Tu app por fin tiene cara

De la consola a la pantalla 📱

En los checkpoints anteriores construiste tu app en la consola: primero la ficha de una persona, luego un equipo entero con su edad media. Funcionaba… pero nadie enseña una consola a sus amigos.

Hoy tu app cobra cara. Con React vas a pintar ese mismo equipo en pantalla: tarjetas, una lista, un resumen. Los mismos datos de siempre, ahora visibles y bonitos.

La idea: los datos entran como props

Tus componentes reciben el equipo igual que tus funciones recibían el array:

const equipo = [
  { nombre: "Ana", nacimiento: 2000 },
  { nombre: "Beto", nacimiento: 1990 },
  { nombre: "Caro", nacimiento: 2010 },
];

<Equipo equipo={equipo} anioActual={2026} />

Y dentro del componente haces lo de siempre —calcular la edad, recorrer la lista—, pero en vez de console.log devuelves JSX, que el navegador dibuja.

Lo construirás en tres pasos

• Tarjeta → la ficha de una persona, ahora visible.
• Equipo → la lista de tarjetas (con map y key).
• EquipoApp → la app completa: cabecera, lista y edad media.

Cada ejercicio renderiza de verdad: cuando pulses Comprobar, verás tu equipo en pantalla. Esa es la recompensa. 🎉

🚩 Checkpoint 3 de 4. Ya le pusiste cara a tu app. El último paso será darle un backend full-stack: tu equipo vivirá en una base de datos y se servirá por una API.