Crea tu cuenta gratis para acceder a actividades gratuitas o compra el curso para acceso completo.
Programación Frontend Frontend
En nuestro workshop, los estudiantes explorarán el emocionante mundo del **desarrollo frontend**, creando **un prototipo funcional** de una página web tipo landing page basados en sus propias ideas. Utilizarán **CSS3** y **HTML5**, herramientas profesionales de maquetación de hipertexto ampliamente usadas en la industria.
CONTENIDO DEL CURSO
1 React y el Virtual DOM
GRATIS
React y el Virtual DOM
El Espejo Virtual — Intro React
¿Por qué React? Virtual DOM vs DOM real
Create React App vs Vite: setup moderno
Tu primer componente React funcional
JSX: escribir HTML dentro de JavaScript
Reverse: ¿qué hace este componente React?
Quiz — React y Virtual DOM
2 Componentes, Props y Composición
Componentes, Props y Composición
Props: pasar datos entre componentes
Children y composición avanzada
Card reutilizable con props tipadas (TS)
Renderizado condicional y listas con key
Mini-Proyecto 1: UI de catálogo de productos
Quiz — Props y Composición
3 State, Hooks y Efectos
State, Hooks y Efectos
useState: estado local en componentes
useEffect: efectos y ciclo de vida
Contador con undo/redo usando useState
useContext: estado global sin Redux
¿Cuándo usar useState vs useRef?
Evaluación: carrito de compras con hooks
Quiz — Hooks y Estado
4 Routing y Navegación SPA
Routing y Navegación SPA
React Router v6: rutas y navegación
Rutas dinámicas, anidadas y protegidas
SPA con 4 rutas y navegación activa
Lazy loading de rutas para mejor performance
Mini-Proyecto 2: App de recetas con routing
Quiz — Routing y SPA
5 Consumo de APIs y Manejo de Estado Global
Consumo de APIs y Manejo de Estado Global
React Query: fetching, caching y refetching
Zustand: estado global minimalista
Dashboard con datos reales de API pública
Formularios con React Hook Form + Zod
Evaluación: CRUD completo con React Query
Quiz — APIs y Estado Global
6 Proyecto Final: App React Productiva
Proyecto Final: App React Productiva
Performance: memo, useCallback y code splitting
Testing en React: Vitest + Testing Library
Checklist: React en producción
Documenta la arquitectura de tu app
Mini-Proyecto 3: App completa con Auth y CRUD
Mini-Proyecto 4: Contribución Open Source
Quiz Final — Programación Frontend
QUÉ INCLUYE
PRECIO DEL CURSO
Pago único · Nivel Básico