Lección 5 de 13 · Lectura y práctica

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.

Del concepto a la práctica

Taller de esta lección

Un componente debe representar una responsabilidad reconocible. En una lista de biblioteca, separar la tarjeta del listado permite que el listado recorra datos y que la tarjeta se concentre en presentar un solo libro. El nombre con mayúscula comunica que se trata de un componente propio.

Ejemplo resuelto

jsx

function TarjetaLibro({ libro }) {
  return <article><h2>{libro.titulo}</h2><p>{libro.autor}</p></article>;
}

function ListaLibros({ libros }) {
  return <section>{libros.map(libro => <TarjetaLibro key={libro.id} libro={libro} />)}</section>;
}

Con dos registros, ListaLibros crea dos tarjetas y cada una recibe un registro distinto.

Pruébalo

Define dos libros con id, titulo y autor.
Crea la tarjeta para un registro.
Recorre la lista desde un componente superior.
Usa el identificador como key.

Comprueba tu resultado

Deben aparecer exactamente dos títulos y sus autores correspondientes.

Error frecuente: llamar al componente tarjetaLibro o usar el índice como identidad; corrígelo con TarjetaLibro y un id estable. No mezcles en la tarjeta la lógica que decide qué libros mostrar.

Colección declarada e identidad

El ejemplo se monta con const libros=[{id:'b1',titulo:'Mar abierto',autor:'Ana'},{id:'b2',titulo:'Ríos del norte',autor:'Luis'}] y <ListaLibros libros={libros}/> dentro de App. Espera Mar abierto/Ana y Ríos del norte/Luis en ese orden. Invierte una copia del array para obtener la pareja opuesta sin alterar el original. La tarjeta recibe libro, mientras ListaLibros decide recorrer la colección; si añades un filtro, calcula antes las filas que se pasarán.

key identifica hermanos dentro de una lista y no se entrega como prop ordinaria a TarjetaLibro. Si el hijo necesita el ID, recíbelo en libro o mediante otra prop. Un ID estable conserva identidad al reordenar; IDs duplicados incumplen el contrato. El índice puede ser suficiente para listas estáticas que nunca cambian, pero no sirve como identidad de una biblioteca editable. Define los componentes fuera del render del padre para evitar crear un tipo nuevo accidentalmente en cada ejecución. La comprobación es una asociación título/autor correcta antes y después de invertir el orden, no solo contar dos elementos.

Un arreglo de dos libros alimenta App y ListaLibros, que crean dos TarjetaLibro con los IDs b1 y b2 y títulos Mar y Ríos. — **Una lista, componentes pequeños**
App compone la lista y la lista crea una tarjeta por registro. Cada tarjeta recibe un libro con ID estable; la estructura describe la interfaz sin gestionar nodos manualmente.
Ver la infografía en tamaño completo ↗

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.

Sigue con React Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Quiz: Introduccion a React Siguiente: Props: Pasando datos →Entrar y guardar mi progreso