19. Nuestro primer Componente en React JS

 

 Tutorial 19: Nuestro Primer Componente en React JS

🎯 Objetivo

Aprender a crear, exportar e importar componentes en React paso a paso.

📁 Estructura de Archivos

text

src/

├── App.js

└── components/

    ├── HolaMundo.js

    └── AdiosMundo.js

---

🚀 Paso 1: Crear la Carpeta de Componentes

1. Abre tu proyecto React en el editor de código

2. Dentro de la carpeta src, crea una nueva carpeta llamada components

3. Importante: Esta carpeta organizará todos tus componentes

---

🧩 Paso 2: Crear Nuestro Primer Componente

Reglas importantes para componentes:

• ✅ SIEMPRE empiezan con mayúscula

• ❌ NUNCA empiezan con minúscula

Correcto: HolaMundo.js
Incorrecto: holaMundo.js o holamundo.js

Crear el archivo:

1. En la carpeta components, crea HolaMundo.js

2. Agrega el siguiente código:

jsx

// HolaMundo.js

import React from "react";

export default function HolaMundo() {

    return (

        <div>

            <h1>Hola Mundo</h1>

            <h2>Agustin Navarro</h2>

        </div>

    );

}

---

🔍 Anatomía de un Componente

1. Importaciones (arriba del todo)

jsx

import React from "react";

// Puedes importar otros componentes, CSS, imágenes, etc.

2. Función del Componente

jsx

function HolaMundo() {

    // Siempre empieza con mayúscula

    return ( /* contenido JSX */ );

}

3. Return (obligatorio)

jsx

return (

    // Todo el contenido visual del componente

);

4. Exportación (al final)

jsx

export default HolaMundo;  // Exportación principal

---

📤 Paso 3: Exportar el Componente

Hay dos formas de exportar:

Opción A: Exportación inline (recomendada)

jsx

export default function HolaMundo() {

    // código...

}

Opción B: Exportación al final

jsx

function HolaMundo() {

    // código...

}

export default HolaMundo;

---

📥 Paso 4: Importar el Componente en App.js

jsx

// App.js

import React from "react";

import logo from "./logo.svg";

import "./App.css";

import HolaMundo from "./components/HolaMundo";  // ← Importamos

function App() {

    return (

        <div className="App">

            <header className="App-header">

                <img src={logo} className="App-logo" alt="logo" />

                <HolaMundo />  {/* ← Usamos el componente como etiqueta */}

            </header>

        </div>

    );

}

export default App;

---

⚡ Paso 5: Usar el Componente

Dentro del JSX, usamos el componente como si fuera una etiqueta HTML:

jsx

<HolaMundo />

Resultado en el navegador:

text

Hola Mundo

Agustin Navarro

---

🔄 Paso 6: Crear un Segundo Componente (AdiosMundo)

1. Crea AdiosMundo.js en la carpeta components:

jsx

// AdiosMundo.js

import React from "react";

export default function AdiosMundo() {

    return (

        <div>

            <h3>Adios Mundo</h3>

        </div>

    );

}

2. Importarlo en App.js:

jsx

// App.js

import React from "react";

import HolaMundo from "./components/HolaMundo";

import AdiosMundo from "./components/AdiosMundo";  // ← Nuevo import

function App() {

    return (

        <div className="App">

            <header className="App-header">

                <HolaMundo />

                <AdiosMundo />  {/* ← Usamos el nuevo componente */}

            </header>

        </div>

    );

}

---

🎭 Paso 7: Fragmentos (Fragment)

Problema común:

jsx

// ERROR: Esto dará error

return (

    <h1>Título</h1>

    <p>Texto</p>

);

Soluciones:

Opción A: Envolver en un div

jsx

return (

    <div>

        <h1>Título</h1>

        <p>Texto</p>

    </div>

);

Opción B: Usar Fragment (recomendado si no quieres divs extra)

jsx

return (

    <>

        <h1>Título</h1>

        <p>Texto</p>

    </>

);

---

📝 Ejercicio Práctico-Crea tu propio componente:

1. Crea MiComponente.js en components/

2. Haz que muestre:

• Tu nombre

• Tu edad

• Tu color favorito

3. Impórtalo y úsalo en App.js

jsx

// Solución ejemplo

import React from "react";

export default function MiComponente() {

    return (

        <div>

            <h2>Nombre: [Tu Nombre]</h2>

            <p>Edad: [Tu Edad]</p>

            <p>Color favorito: [Tu Color]</p>

        </div>

    );

}

---

💡 Consejos Importantes

1. Un componente = Un archivo (generalmente)

2. Nombres descriptivos: BotonEnviar, TarjetaUsuario, MenuPrincipal

3. Un solo elemento en return: Siempre envolver en <> o <div>

4. JavaScript en componentes: Puedes escribir lógica antes del return

jsx

function ComponenteConLogica() {

    // Aquí puedes escribir JavaScript

    const nombre = "Juan";

    const saludar = () => {

        console.log("Hola!");

    };

    

    // Después retornas JSX

    return <h1>Hola {nombre}</h1>;}

---

✅ Resumen del Proceso

1. Crear carpeta components dentro de src

2. Crear archivo con nombre en Mayúscula (MiComponente.js)

3. Estructura básica:

4. jsx

import React from "react";

export default function NombreComponente() {

    return (

        // JSX aquí

    );

5. }

6. Importar en App.js: import NombreComponente from "./components/NombreComponente"

7. Usar en JSX: <NombreComponente />

---

🎓 Conceptos Clave

• Componente: Pieza reutilizable de interfaz

• JSX: HTML dentro de JavaScript

• Export/Import: Cómo compartir componentes entre archivos

• Fragment: Envoltorio invisible para múltiples elementos

---

¡Felicidades! 🎉 Has creado tu primer componente en React. En la siguiente lección aprenderemos sobre props para hacer componentes más dinámicos