18: Comenzando nuestra aplicación

 🎨 Paso 1: Configurar los estilos CSS

Lo primero que vamos a hacer es copiar el CSS proporcionado en los recursos del programa:

1. Abre el enlace de los recursos o notas del programa

2. Copia todo el contenido CSS que encontrarás allí

3. Vuelve a tu proyecto en VS Code

4. Abre el archivo src/index.css

5. Borra todo el contenido actual del archivo

6. Pega el nuevo CSS que copiaste

css

/* Así debería verse tu index.css después de pegar */

body {

  margin: 0;

  font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",

    "Droid Sans", "Helvetica Neue", sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.title {

  color: #738f93;

  font-size: 40px;

  font-family: fantasy, sans-serif;

  margin-bottom: 0;

}

/* ... resto del CSS proporcionado */

📋 Paso 2: Limpiar y preparar App.js

Abre el archivo src/App.js y vamos a limpiarlo:

javascript

// Borra TODO el contenido actual y deja solo esto:

import './App.css';

function App() {

  return (

    <div className="App">

      

    </div>

  );

}

export default App;

🏠 Paso 3: Crear la estructura básica de la Home

Dentro del componente App, vamos a construir la página de inicio:

import './App.css';

function App() {

  return (

    <div className="App">

      <header className="App-header">

        {/* Título de la aplicación */}

        <h1 className="title">Rick & Morty</h1>

        

        {/* La imagen irá aquí */}

        

        {/* El botón irá aquí */}

      </header>

    </div>

  );

}

export default App;

Nota: Observa que usamos className en lugar de class (esto es específico de React/JSX).

🖼️ Paso 4: Importar y mostrar la imagen

4.1 Crear la carpeta para imágenes

Dentro de src/, crea una nueva carpeta llamada img:

• Haz clic derecho en la carpeta src

• Selecciona "New Folder"

• Nómbrala img

4.2 Agregar la imagen a la carpeta

• Descarga la imagen desde los recursos del programa

• Arrástrala y suéltala dentro de la carpeta img que creaste

• Asegúrate de que se llame algo como rick-morty.png

4.3 Importar la imagen en App.js

// Agrega esta línea al inicio del archivo, después del import de App.css

import imageRickMorty from "./img/rick-morty.png";

// Ajusta el nombre según cómo se llame tu archivo

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <h1 className="title">Rick & Morty</h1>

        

        {/* Imagen de Rick & Morty */}

        <img 

          src={imageRickMorty} 

          alt="Rick & Morty" 

          className="img-home" 

        />

        

        {/* El botón irá aquí */}

      </header>

    </div>

  );

}

Explicación:

• src={imageRickMorty}: Usamos llaves {} porque estamos usando una variable JavaScript

• alt="Rick & Morty": Texto alternativo para accesibilidad

• className="img-home": Clase CSS que definimos en index.css

🔘 Paso 5: Crear el botón "Buscar personajes"

Agrega el botón después de la imagen:

javascript

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <h1 className="title">Rick & Morty</h1>

        

        <img 

          src={imageRickMorty} 

          alt="Rick & Morty" 

          className="img-home" 

        />

        

        {/* Botón para buscar personajes */}

        <button className="btn-search">

          Buscar personajes

        </button>

      </header>

    </div>

  );

}

⚡ Paso 6: Agregar funcionalidad al botón

6.1 Crear la función para manejar el clic

javascript

import './App.css';

import imageRickMorty from "./img/rick-morty.png";

function App() {

  // Función que se ejecutará al hacer clic en el botón

  const reqApi = () => {

    console.log("¡Hiciste clic en el botón!");

    // Aquí luego llamaremos a la API

  };

  return (

    <div className="App">

      <header className="App-header">

        <h1 className="title">Rick & Morty</h1>

        

        <img 

          src={imageRickMorty} 

          alt="Rick & Morty" 

          className="img-home" 

        />

        

        {/* Botón con evento onClick */}

        <button 

          onClick={reqApi} 

          className="btn-search"

        >

          Buscar personajes

        </button>

      </header>

    </div>

  );

}

6.2 Versión alternativa con función flecha más explícita:

javascript

// Otra forma de escribir la misma función

const reqApi = () => {

  console.log("Click detectado - función ejecutada");

};

👁️ Paso 7: Verificar que todo funciona

7.1 Guarda todos los cambios (Ctrl + S o Cmd + S)

7.2 Abre tu navegador en http://localhost:3000

7.3 Deberías ver:

• El título "Rick & Morty" en color azul-grisáceo

• La imagen de Rick & Morty centrada

• Un botón verde que dice "Buscar personajes"

7.4 Probar la funcionalidad:

1. Abre las Herramientas de Desarrollo del navegador (F12 o Ctrl+Shift+I)

2. Ve a la pestaña "Console"

3. Haz clic en el botón "Buscar personajes"

4. Deberías ver el mensaje "¡Hiciste clic en el botón!" en la consola

🎯 Código completo de App.js hasta ahora:

javascript

import './App.css';

import imageRickMorty from "./img/rick-morty.png";

function App() {

  // Función que se ejecutará al hacer clic

  const reqApi = () => {

    console.log("¡Hiciste clic! Pronto llamaremos a la API");

  };

  return (

    <div className="App">

      <header className="App-header">

        <h1 className="title">Rick & Morty</h1>

        

        <img 

          src={imageRickMorty} 

          alt="Rick & Morty" 

          className="img-home" 

        />

        

        <button 

          onClick={reqApi} 

          className="btn-search"

        >

          Buscar personajes

        </button>

      </header>

    </div>

  );

}

export default App;

🔧 Paso 8: Personalizaciones opcionales

8.1 Cambiar el título:

javascript

<h1 className="title">Rick y Morty API</h1>

8.2 Cambiar el texto del botón:

javascript

<button onClick={reqApi} className="btn-search">

  Ver todos los personajes

</button>

8.3 Modificar estilos (en index.css):

css

/* Para cambiar el color del título */

.title {

  color: #1ba94c;  /* Verde del botón */

  /* ... resto de propiedades */

}

/* Para cambiar el color del botón */

.btn-search {

  background-color: #282c34;  /* Azul oscuro */

  /* ... resto de propiedades */

}

🐛 Solución de problemas comunes:

Problema 1: La imagen no aparece

javascript

// Verifica:

// 1. Que la ruta sea correcta

import imagen from "./img/rick-morty.png"; // ¡Cuidado con mayúsculas!

// 2. Que el archivo exista en la carpeta img

// 3. Que la extensión sea correcta (.png, .jpg, etc.)

Problema 2: Los estilos no se aplican

css

/* Verifica en index.css que tengas: */

.img-home {

  width: 500px;

  padding: 50px;

}

/* Si no está, añádelo */

Problema 3: El botón no hace nada en consola

javascript

// Verifica:

// 1. Que escribiste onClick (con C mayúscula)

// 2. Que la función se llama reqApi (exacto)

// 3. Que abriste la consola del navegador (F12)

📊 Estructura actual de tu proyecto:

text

rick-morty-app/

├── src/

│   ├── img/

│   │   └── rick-morty.png

│   ├── App.js

│   ├── App.css

│   └── index.css

├── public/

└── package.json

🎉 ¡Felicidades!

Has creado la interfaz visual completa de la página de inicio de tu aplicación. Tienes:

✅ Título estilizado
✅ Imagen importada correctamente
✅ Botón con estilos atractivos
✅ Funcionalidad básica (console.log en clic)

En el próximo tutorial implementaremos la llamada a la API real para obtener los personajes de Rick & Morty.

---

💡 Consejo: ¿Quieres ver cómo se ve en diferentes dispositivos? Usa las herramientas de desarrollo del navegador (F12) y activa el modo responsive.

¿Cómo se ve tu aplicación hasta ahora? ¡Compártelo en los comentarios