React

React es la librería de JavaScript más usada para construir interfaces de usuario. Fue creada por Meta (Facebook) y hoy la usan Netflix, Airbnb, Mercado Libre, Discord y miles de empresas. Te permite dividir una interfaz en componentes reutilizables, como piezas de LEGO, y mantener la pantalla sincronizada con los datos automáticamente.

En proyectos reales, React se usa para paneles de administración, tiendas en línea, dashboards, aplicaciones SaaS, sitios con mucha interacción y, junto con React Native, apps móviles. Es también la base de frameworks como Next.js. Saber React es una de las habilidades más pedidas en ofertas de trabajo frontend.

Este curso usa React 19 con Vite, la forma moderna y rápida de crear proyectos, y las herramientas que usan los equipos profesionales: React Router, Zustand, TanStack Query, Tailwind y Vitest.

Qué vas a poder hacer al terminar

• Crear interfaces con componentes, props, estado y eventos.
• Construir formularios, consumir APIs y manejar estados de carga y error.
• Organizar apps grandes con rutas, estado global, custom hooks y una buena estructura de carpetas.
• Optimizar el rendimiento, escribir tests y desplegar en Netlify, Vercel o hosting compartido.
• Entregar tres proyectos completos: app de tareas, dashboard y tienda en línea.

Requisitos previos

• JavaScript moderno: funciones flecha, desestructuración, spread, módulos, map/filter, promesas y async/await.
• HTML y CSS básicos.
• Node.js instalado (ver Instalación con nvm).
• Opcional: TypeScript para usar React con tipos.

Temario

Fundamentos

1. Qué es React y por qué — Componentes, declarativo y Virtual DOM.
2. Crear proyecto con Vite — Estructura, scripts y herramientas.
3. JSX — Escribir interfaces con sintaxis parecida a HTML.
4. Componentes y props — Piezas reutilizables y cómo pasarles datos.
5. Estado con useState — Datos que cambian y actualizan la pantalla.
6. Eventos — Clics, teclado, formularios y comunicación hijo → padre.
7. Condicionales y listas — Mostrar u ocultar y renderizar arreglos con key.
8. Formularios — Inputs controlados, validación y acciones de React 19.
9. useEffect y ciclo de vida — Efectos secundarios, dependencias y limpieza.
10. Consumir APIs — fetch, estados de carga y error, cancelación.

Intermedio

11. Custom hooks — Extrae y reutiliza lógica.
12. useRef, useMemo y useCallback — Referencias y memorización.
13. Context API — Compartir datos sin pasar props por todos lados.
14. React Router — Navegación, rutas dinámicas y rutas protegidas.
15. Zustand y TanStack Query — Estado global y datos del servidor.
16. Estilos — CSS Modules y Tailwind CSS.

Profesional

17. Patrones y estructura — Carpetas por feature y patrones de composición.
18. Rendimiento — memo, lazy, Suspense y listas grandes.
19. Testing — Vitest y React Testing Library.
20. Despliegue — Netlify, Vercel y hosting compartido.

Proyectos

21. Proyecto: app de tareas — useReducer, localStorage y filtros.
22. Proyecto: dashboard — Consume una API con TanStack Query y rutas.
23. Proyecto: e-commerce — Catálogo, carrito con Zustand y checkout.