CodeForge

supercurso 06

React 19 de Cero a Experto

Componentes, hooks, Server Components y apps colaborativas en tiempo real.

11 módulos69 lecciones publicadas~30 h de contenidointermedio

Temario

01Fundamentos0/7
  1. Qué es React: describir la UI, no manipularla20m20
  2. JSX: HTML y JavaScript en el mismo idioma20m20
  3. Componentes y props: piezas que reciben datos22m20
  4. Listas y keys: renderizar arrays de datos20m20
  5. Eventos: la UI que responde al usuario20m20
  6. Composición con children: componentes que envuelven18m20
  7. Reto: Mi Bolsillo hecho de componentes30m60
02Estado0/7
  1. useState: la memoria de un componente22m20
  2. El estado es una foto fija: updates funcionales20m20
  3. Formularios controlados: el estado manda20m20
  4. Inmutabilidad: cómo React ve tus cambios20m20
  5. Lifting state up: compartir estado entre componentes20m20
  6. useReducer: el reducer del SC-03, en React22m20
  7. Reto: Mi Bolsillo interactivo con estado40m60
03Efectos y ciclo de vida0/7
  1. useEffect: sincronizar con el mundo exterior22m20
  2. Cleanup: limpiar lo que un efecto abre22m20
  3. Cuándo NO usar useEffect (la lección clave)24m20
  4. useRef: la caja que React no observa22m20
  5. Cargar datos con useEffect (y la race condition)24m20
  6. Custom hooks: empaqueta tu propia lógica24m20
  7. Reto: Mi Bolsillo que no olvida40m60
04React 19 moderno0/6
  1. Actions y useActionState: formularios que se manejan solos24m20
  2. useOptimistic: UI que responde al instante22m20
  3. use(): el hook que rompe las reglas20m20
  4. Server Components vs Client Components (el concepto)22m20
  5. El compilador de React: adiós al useMemo manual22m20
  6. Reto: Mi Bolsillo con envío optimista40m60
05Datos0/6
  1. El estado del servidor no es como el tuyo22m20
  2. useQuery: cargar datos en una línea22m20
  3. Caché, datos viejos e invalidación22m20
  4. useMutation: escribir datos y sincronizar22m20
  5. Suspense y Error Boundaries: carga a nivel de árbol22m20
  6. Reto: construye tu propio useQuery45m100
06Estado global0/6
  1. Prop drilling: cuando pasar props duele20m20
  2. Context: datos en el aire del subárbol22m20
  3. Zustand: estado global sin ceremonia24m20
  4. Máquinas de estado y XState24m20
  5. Qué herramienta de estado usar (mapa de decisión)22m20
  6. Reto: Mi Bolsillo con estado global40m60
07Routing0/7
  1. Por qué una SPA necesita un router22m20
  2. React Router: rutas, Link y navegación22m20
  3. Parámetros de URL y query strings20m20
  4. Layouts anidados con Outlet20m20
  5. Loaders y actions: datos en la ruta22m20
  6. Rutas protegidas y redirecciones22m20
  7. Reto: construye tu propio React Router45m100
08Formularios y validación0/6
  1. Formularios controlados vs no controlados22m20
  2. React Hook Form: formularios sin dolor22m20
  3. Validación con Zod: un esquema, dos mundos22m20
  4. Errores de formulario accesibles22m20
  5. Formularios multi-paso (wizards)22m20
  6. Reto: formulario de gasto validado y accesible40m60
09Tiempo real y sistemas distribuidos0/7
  1. Tiempo real: del preguntar al empujar22m20
  2. El WebSocket nativo del navegador20m20
  3. Socket.io: WebSockets listos para producción22m20
  4. Integrar el socket en React: useSocket24m20
  5. Un chat en vivo con envío optimista22m20
  6. Presencia y salas (rooms)20m20
  7. Reto: chat en tiempo real con presencia45m100
10Nivel producción0/6
  1. Rendimiento: medir antes de optimizar22m20
  2. Code splitting con lazy y Suspense20m20
  3. Virtualización: listas de miles sin sudar24m20
  4. Testing de componentes con Testing Library24m20
  5. Arquitectura por features20m20
  6. Reto: optimizar una lista de 10.000 gastos45m100
11Proyecto final0/4
  1. Planear el chat: arquitectura antes que código22m20
  2. Proyecto: chat colaborativo en tiempo real90m150
  3. Reto: de demo a producto (extiende el chat)50m100
  4. El cierre: lo que ahora sabes hacer18m20