React Fundamentals Texto Leccion

Creando componentes

Componentes: los bloques de construcción Un componente es una función de JavaScript que devuelve JSX. Es la unidad básica de React: con componentes pequeños y bien definidos construyes interfaces grandes, igual que con bloques de Lego. Idea claveLos nombres de los componentes deben empezar con mayúscula. Así React distingue entre un componente tuyo (Saludo) y una etiqueta HTML normal (div). Un componente funcional // Función tradicional function Saludo() { return <h1>¡Hola Mundo!</h1&gt

Tiempo de estudio

15 Min

Componentes: los bloques de construcción

Un componente es una función de JavaScript que devuelve JSX. Es la unidad básica de React: con componentes pequeños y bien definidos construyes interfaces grandes, igual que con bloques de Lego.

Idea clave

Los nombres de los componentes deben empezar con mayúscula. Así React distingue entre un componente tuyo (Saludo) y una etiqueta HTML normal (div).

Un componente funcional

// Función tradicional

function Saludo() {

  return <h1>¡Hola Mundo!</h1>;

}



// Arrow function equivalente

const Saludo = () => {

  return <h1>¡Hola Mundo!</h1>;

};



// Con retorno implícito

const Saludo = () => <h1>¡Hola Mundo!</h1>;

Usar un componente

Una vez definido, lo usas como si fuera una etiqueta. Puedes repetirlo cuantas veces quieras:

function App() {

  return (

    <div>

      <Saludo />

      <Saludo />

      <Saludo />

    </div>

  );

}

// Renderiza tres veces "¡Hola Mundo!"

Organizar los componentes en archivos

La convención es un componente por archivo dentro de src/components/. Cada uno se exporta y luego se importa donde se necesite:

// src/components/Header.jsx

function Header() {

  return (

    <header>

      <h1>Mi Aplicación</h1>

      <nav>

        <a href="/">Inicio</a>

        <a href="/acerca">Acerca</a>

      </nav>

    </header>

  );

}



export default Header;

// src/App.jsx

import Header from './components/Header';



function App() {

  return (

    <div>

      <Header />

      <main>Contenido</main>

    </div>

  );

}

Composición: componentes dentro de componentes

La verdadera potencia aparece al combinar componentes pequeños para formar otros más grandes:

function Tarjeta() {

  return (

    <div className="tarjeta">

      <TarjetaCabecera />

      <TarjetaCuerpo />

      <TarjetaPie />

    </div>

  );

}



function TarjetaCabecera() {

  return <div className="tarjeta-cabecera">Título</div>;

}

¿Por qué dividir en tantos componentes?

Componentes pequeños son más fáciles de leer, probar y reutilizar. Si una pieza de UI aparece dos veces o tiene una responsabilidad clara (una cabecera, un botón, una tarjeta), suele merecer su propio componente.

¿Qué pasa si nombras tu componente saludo en minúscula?

React usa la primera letra para decidir: minúscula = etiqueta HTML del DOM; mayúscula = componente. Por eso siempre van en mayúscula.

Ejercicio práctico

Objetivo: practicar la creación y composición de componentes.

Crea tres componentes en archivos separados: Header, Footer y PerfilUsuario.
PerfilUsuario debe mostrar un nombre y un rol fijos dentro de una tarjeta.
En App.jsx compón la página: Header arriba, dos PerfilUsuario en medio y Footer abajo.

Entregable: los cuatro archivos (.jsx) con sus export/import correctos y una captura del resultado.

Para recordar

Un componente es una función que devuelve JSX y su nombre empieza con mayúscula.
Se exporta desde su archivo y se importa donde se use.
Componer componentes pequeños es la forma de construir interfaces grandes y mantenibles.