Reto: Mi Bolsillo interactivo con estado

Reto40 min60 XP

La "Mi Bolsillo" del módulo 1 era una foto estática. Hoy cobra vida: agregar gastos con un formulario controlado, borrarlos, filtrarlos por categoría, y ver el total actualizarse solo. Es la misma app que hiciste en JavaScript puro (SC-02), pero ahora DECLARATIVA —describes la UI para cada estado y React se encarga del resto—. Vas a sentir en carne propia por qué React cambió el desarrollo de interfaces.

Reto

Mi Bolsillo interactivo

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

Qué debes construir

Una app de gastos interactiva y completa con estado. Debe permitir:

Agregar un gasto con un formulario controlado (nombre, valor, categoría) que valida y limpia tras enviar.
Borrar un gasto con su botón (por delegación de la lista).
Filtrar la lista por categoría con un <select> (todas / comida / transporte / ocio).
Total en vivo que refleja los gastos (el total general, no el filtrado).
Todo con estado: el array de gastos y los campos del formulario viven en useState (o useReducer).

Reglas

El array de gastos es la fuente de verdad; las actualizaciones son INMUTABLES ([...], filter, nunca push/mutación).
Los inputs son controlados (value + onChange).
Todo tipado con TypeScript (props, estado, acciones).
La key de la lista es estable (g.id).

35:00

Cuando estés listo, arranca el reloj.

Las decisiones de React que este reto fija:

El estado es la única fuente de verdad, el DOM su espejo. Nunca lees ni escribes el DOM: cambias el estado (setGastos), y React redibuja. Es el patrón "array fuente de verdad" del SC-02, pero ahora React se encarga del render —no escribes un solo createElement.
Lo derivado se calcula, no se guarda. La lista filtrada y el total NO son estado: se DERIVAN del array de gastos en cada render. Guardar datos derivados como estado es un error clásico (se desincronizan). Regla: si puedes calcularlo del estado que ya tienes, calcúlalo.
Inmutabilidad e inputs controlados: cada cambio produce un array nuevo, y el formulario vive en el estado —control total, cero desincronización.

Autoevaluación: agrega gastos, bórralos, filtra por categoría —¿todo reacciona solo, sin que toques el DOM? ¿la lista filtrada y el total se DERIVAN del array (no son estados aparte)? ¿las actualizaciones son inmutables ([...], filter)? Compara con la versión de JavaScript puro del SC-02: allá escribías createElement, append, un render() manual que repintaba todo. Aquí solo describes la UI para cada estado y cambias el estado —React hace el resto—. Esa es la promesa de React cumplida: menos código, cero bugs de sincronización, y una app que se lee como lo que hace.

Qué sigue

Módulo 2 conquistado: el estado ya no tiene secretos —useState, snapshots, inmutabilidad, lifting, useReducer—. Tu "Mi Bolsillo" es interactiva de verdad. Pero vive aislada del mundo: no carga datos de una API, no guarda en localStorage, no usa temporizadores. El módulo 3 abre esa puerta con useEffect —cómo React se sincroniza con sistemas externos— y los custom hooks para empaquetar lógica reutilizable.