Arquitectura
basada en componentes
Construir interfaces como piezas que se combinan, se reutilizan y se mantienen por separado
La misma tarjeta, copiada 14 veces
de la tarjeta de producto en catálogo, ofertas, búsqueda y carrito
al agregar la etiqueta «Agotado»: el cliente compró lo que no había
<!-- catalogo.html --> <div class="tarjeta"> <h3>Martillo 16 oz</h3> <p class="precio">$189.00</p> </div> <!-- ofertas.html (copia) --> <div class="tarjeta"> <h3>Martillo 16 oz</h3> <p class="precio">$169.00</p> </div> <!-- ...y 12 copias más -->
Un componente = estructura + estilos + lógica
Estructura
Qué se muestra
- El marcado de la pieza (JSX en React)
- Recibe datos y los coloca en su lugar
Estilos
Cómo se ve
- CSS propio de la pieza
- No debe romper el diseño de otras piezas
Lógica
Cómo se comporta
- Responde a eventos (clic, escribir)
- Decide qué mostrar según los datos
Piensa en árbol: la página de la ferretería
se usa muchas veces.
Anatomía de un componente en React
1function TarjetaProducto(2{ producto }) { 3 const agotado = producto.stock === 0; 4 return ( <article className="tarjeta"> <h3>{producto.nombre}</h3> <p className="precio">${producto.precio}</p> {agotado && <span className="badge">Agotado</span>} </article> ); }
- 1
Una función con mayúscula
Así React sabe que es un componente y no una etiqueta HTML.
- 2
Recibe props
Los datos llegan desde el componente padre.
- 3
Lógica
Decide antes de dibujar: ¿está agotado?
- 4
Devuelve JSX
Estructura con valores entre llaves.
Componer: la lista usa la tarjeta
function ListaProductos({ productos }) { return ( <section className="lista"> {productos.map(p => ( <TarjetaProducto key={p.id} producto={p} /> ))} </section> ); } // productos llega desde la API del // back-end MVC de la Unidad 3
Los datos bajan, los eventos suben
// En el padre: entrega datos y una función <TarjetaProducto producto={p} onAgregar={agregarAlCarrito} /> // En el hijo: solo avisa <button onClick={() => onAgregar(producto)}> Agregar </button>
¿Cuántos componentes ves en esta pantalla?
Criterios para decidir
- ¿Se repite? Si aparece varias veces, es candidato.
- ¿Tiene una responsabilidad propia? Buscar, filtrar, mostrar un producto.
- ¿Cambia por su cuenta? Si se actualiza sin el resto, sepáralo.
En equipos, 5 minutos: dibujen el árbol y defiendan su número.
Tres ideas para llevarte
Piezas completas
Un componente encapsula su estructura, sus estilos y su lógica.
Árbol y props
La interfaz es un árbol: los datos bajan por props y los eventos suben.
Regla práctica
Si lo copias dos veces, probablemente es un componente.
Para profundizar: Banks, A., y Porcello, E. (2020). Learning React. O'Reilly.
Actividad: el árbol de tu proyecto integrador
Elige la pantalla principal de tu proyecto integrador.
Dibuja su árbol de componentes (mínimo 6) y marca cuáles se repiten.
Para cada componente anota qué props recibe y qué eventos avisa.
Entrega el diagrama y tu declaración de uso de IA (herramienta y prompts).
| Criterio (%) | Excelente | Bueno | Básico | Insuficiente |
|---|---|---|---|---|
| Identificación (25) | 6+ componentes bien delimitados | Uno mal delimitado | Menos de 6 | Sin componentes claros |
| Jerarquía (25) | Árbol correcto y completo | Un nivel confuso | Varias relaciones mal | Sin árbol |
| Props y eventos (25) | Todos documentados | Faltan algunos | Solo props | No documenta |
| Reutilización y entrega (25) | Repetidos marcados; IA declarada | Marca la mayoría | No marca repetidos | Entrega incompleta |
Niveles: Excelente 100 % · Bueno 80 % · Básico 60 % · Insuficiente 0–40 % del valor del criterio