React 19 de Cero a Experto / Fundamentos

Reto: Mi Bolsillo hecho de componentes

Reto30 min60 XP

Hora de juntar los fundamentos: vas a construir la interfaz de "Mi Bolsillo" —la app que conoces— con componentes de React. Props tipadas, una lista renderizada con .map() y key, un contenedor reutilizable con children, y datos que fluyen hacia abajo. Todo estático por ahora (el estado llega en el módulo 2); aquí ensayas el ARMADO de una UI a partir de piezas.

Reto

La UI de Mi Bolsillo en componentes

Media30 min60 XP(×2 sin mirar la solución)

Qué debes construir

La pantalla de "Mi Bolsillo" compuesta de varios componentes reutilizables, renderizando una lista de gastos y su total. La UI resultante debe mostrar: un título, cada gasto en su tarjeta (nombre, valor formateado y categoría), y el total abajo.

Componentes requeridos:

type Gasto: { id: number; nombre: string; valor: number; categoria: string }.
<Tarjeta>: un contenedor con children (la prop del módulo) que aporta el marco (borde, padding, fondo).
<FilaGasto>: recibe un gasto por props (tipadas) y muestra su nombre, valor (formateado con Intl es-CO) y categoría.
<ListaGastos>: recibe gastos: Gasto[] por props y los renderiza con .map() y key={g.id}, cada uno en una <FilaGasto>.
<App>: define el array de gastos, compone todo dentro de una <Tarjeta>, y muestra el total (con reduce) al final.

Reglas

Todas las props tipadas con TypeScript (nada de any).
La lista usa key estable (g.id), no el índice.
Los datos fluyen hacia abajo (props); nada de estado todavía.
Formatea los valores en pesos con Intl.NumberFormat("es-CO").

30:00

Cuando estés listo, arranca el reloj.

Lo que este reto consolida —los fundamentos, trabajando juntos:

Componentes con una responsabilidad clara: Tarjeta enmarca, ListaGastos itera, FilaGasto muestra un gasto. Cada uno es simple, reutilizable y testeable —el árbol de componentes bien diseñado.
Props tipadas y flujo hacia abajo: los datos entran por App, bajan a ListaGastos, y de ahí a cada FilaGasto. Una sola dirección, predecible, con TypeScript garantizando cada contrato.
key estable y composición: la lista usa g.id, y Tarjeta envuelve cualquier contenido con children. Los patrones que verás en cada app de React.

Autoevaluación: ¿cada componente hace UNA cosa clara (enmarcar, iterar, mostrar)? ¿las props están tipadas y los datos fluyen solo hacia abajo? ¿la key es g.id y no el índice? Prueba a agregar un gasto al array —la UI se actualiza sola, porque describe la lista, no la manipula—. Fíjate en la limitación que sentirás pronto: si quisieras AGREGAR o BORRAR un gasto con un botón, no podrías, porque los datos son fijos. Para que la UI CAMBIE con la interacción necesitas estado —y eso desbloquea el módulo 2.

Qué sigue

Fundamentos dominados: construyes UIs a partir de componentes, props, listas y composición. Pero todo es estático —la pantalla no cambia con la interacción—. El módulo 2 trae la pieza que lo cambia todo: el ESTADO. Con useState, tu "Mi Bolsillo" cobrará vida —agregar, borrar, filtrar—, y entenderás el corazón reactivo de React.