React 19 de Cero a Experto / Formularios y validación

Reto: formulario de gasto validado y accesible

Reto40 min60 XP

Cierras el módulo construyendo el formulario que toda app real necesita: agregar un gasto a "Mi Bolsillo" con validación clara, errores ACCESIBLES y buen comportamiento de foco. Juntas todo lo del módulo —controlados, validación con reglas, y los cuatro pilares de accesibilidad— en una pieza pulida de principio a fin. Cuando termines, tendrás un patrón de formulario que puedes reusar en cualquier proyecto.

Reto

Formulario de gasto accesible

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

Qué debes construir

Un formulario para agregar un gasto, validado y accesible, que al enviar añade el gasto a una lista:

Tres campos: nombre (texto, mínimo 2 caracteres), valor (número, mayor que 0) y categoria (select: comida / transporte / ocio).
Validación al enviar: cada campo con su mensaje de error si no cumple.
Errores accesibles: cada input con su <label>, aria-invalid, aria-describedby enlazado al mensaje, y el mensaje con role="alert".
Foco al primer error: al enviar con errores, el foco salta al primer campo inválido.
Éxito: si todo es válido, agrega el gasto a una lista, limpia el formulario y anuncia el éxito con role="status".

Reglas

Inputs controlados (value + onChange) para poder validar y limpiar.
Todo tipado con TypeScript; categoria como unión de literales.
Accesibilidad completa: labels asociados, ARIA en errores, gestión de foco.

35:00

Cuando estés listo, arranca el reloj.

Lo que este reto consolida:

Validar es una función pura. validar() toma el estado y devuelve los errores —sin efectos, fácil de testear (SC-02)—. La UI solo refleja ese resultado.
La accesibilidad es parte del formulario, no un añadido. Labels, ARIA y foco se construyen junto al campo, no después. Un formulario "terminado" sin esto está a medias.
El foco al primer error convierte un formulario frustrante en uno amable: el usuario no busca el error, el error lo encuentra a él.

Autoevaluación (pruébalo con TECLADO): envía vacío —¿aparecen los errores y el foco salta al primer campo inválido? ¿cada input tiene su label y cada error su role="alert" con aria-describedby? Llena bien y envía —¿se agrega el gasto, se limpia el formulario, y el role="status" anuncia el éxito? Este es el formulario completo de una app real: no solo funciona, sino que cualquiera puede usarlo —con ratón, con teclado o con lector de pantalla—. Ese es el estándar de calidad que separa un formulario "que anda" de uno "bien hecho".

Qué sigue

Módulo 8 conquistado: dominas los formularios —controlados vs no controlados, React Hook Form, Zod, errores accesibles y wizards multi-paso—. Tu app tiene pantallas, datos, estado y formularios sólidos. El módulo 9 da el salto más emocionante: el TIEMPO REAL —WebSockets y Socket.io— para apps donde los datos fluyen en vivo entre usuarios: chats, presencia, colaboración. La antesala del proyecto final.