React desde cero práctico

Al finalizar, podrás elegir y aplicar uno de los cuatro sistemas de estilos en React (className global, CSS Modules, Tailwind utility-first, CSS-in-JS) entendiendo el trade-off de cada uno en scope, mantenibilidad y velocidad de equipo — y defenderás la decisión con criterios técnicos, no de gusto.

Al finalizar, podrás declarar estado con useState, actualizarlo de forma segura con el setter (incluyendo la forma funcional cuando depende del valor anterior), distinguir cuándo un valor debe ser estado vs prop, evitar el anti-patrón de copiar props al estado, y aplicar la inicialización lazy con función cuando el cálculo inicial es caro.

Al finalizar, podrás manejar eventos en React (onClick, onChange, onSubmit) usando el Synthetic Event System, distinguir entre inputs controlled y uncontrolled, y construir un formulario completo con preventDefault y estado controlado — el patrón que vas a repetir en cada formulario React que escribas en tu carrera.

Al finalizar, podras decidir si una pieza de logica pertenece al render, a un manejador de eventos o a un useEffect, escribir efectos con su funcion de cleanup correcta y un dependency array exhaustivo, y refactorizar tres antipatrones canonicos (fetching dentro de useEffect, derivacion de estado dentro del efecto y cadenas de efectos encadenados) aplicando el modelo "synchronize with an external system" que documenta react.dev y, cuando proceda, el hook `use()` de React 19 para data fetching.

Al finalizar, podrás identificar cuándo dos componentes hermanos necesitan compartir estado, elevar ese estado al ancestro común más cercano, distribuirlo de vuelta como props con sus setters, y aplicar el patrón children para componer UI sin acoplar lógica — todo siguiendo el patrón canónico que documenta el equipo de React desde 2014.

Al finalizar, podrás elegir una key estable para cualquier lista renderizada con array.map() en JSX y justificar — apoyándote en el algoritmo de reconciliación de React (Fiber) — por qué usar el índice del array como key rompe estado interno de los hijos cuando la lista se reordena, filtra o inserta en medio.

Al finalizar, podrás construir un componente React que carga datos de una API con fetch dentro de useEffect, cubriendo correctamente los tres estados (loading, error, data), cancelando peticiones obsoletas con AbortController para evitar race conditions, y reconocer cuándo migrar a TanStack Query o al hook use() de React 19.

Al finalizar, podrás decidir cuándo NO extraer un componente (regla de 3 / AHA) y, cuando toque hacerlo, diseñar la API con composición de Compound Components en lugar de un océano de props booleanas, igual que lo hacen Radix UI y shadcn/ui en producción.

Al finalizar, podrás construir una TodoList completa en React — con añadir, borrar, marcar como hecha y filtrar (all/active/done) — integrando useState + composición + map + key + props handlers + useEffect en una sola app de 80-100 líneas que demuestra todo lo aprendido en L1-L11.