Lección 1Manejo y validación de formularios (controlados vs no controlados, librerías: Formik, React Hook Form, VeeValidate)Implementa manejo robusto de formularios y validación. Compara inputs controlados y no controlados, usa librerías como Formik, React Hook Form y VeeValidate, y diseña validación, mensajes de error y flujos de envío para formularios complejos.
Estrategias de inputs controlados vs no controladosFormik y React Hook Form en la prácticaVeeValidate y patrones de formularios VueReglas de validación síncrona y asíncronaMensajes de error, UX y accesibilidadLección 2Librerías de componentes UI y prácticas de accesibilidad (Tailwind, Material, Chakra, roles ARIA, navegación por teclado)Aprende a usar librerías UI modernas manteniendo fuerte accesibilidad. Explora Tailwind, Material UI y Chakra, luego aplica roles ARIA, manejo de foco y patrones de navegación por teclado para construir interfaces inclusivas y listas para producción.
Sistemas de diseño con Tailwind y clases utilitariasPatrones de componentes Material UI y ChakraHTML semántico y estrategias de roles ARIAManejo de foco y navegación por tecladoContraste de color, temas y movimiento reducidoLección 3Elección de framework frontend y justificación (React, Vue, Svelte) y tradeoffs del ecosistemaEvalúa y justifica tu elección de framework frontend. Compara arquitecturas React, Vue y Svelte, madurez del ecosistema, rendimiento y curvas de aprendizaje para seleccionar y defender la mejor opción según el contexto del proyecto.
Conceptos centrales React, Vue y SvelteMadurez del ecosistema y soporte comunitarioTradeoffs de rendimiento y tamaño de bundleIntegración TypeScript y toolingFrameworks de decisión para proyectos realesLección 4Build, bundling y optimización: Webpack/Vite/Rollup, code splitting, tree-shaking, manejo de assetsDomina tooling de build moderno para frontends performantes. Compara Webpack, Vite y Rollup, configura code splitting y tree-shaking, y optimiza manejo de assets, cache y source maps para entregar bundles de producción rápidos y mantenibles.
Comparando setups Webpack, Vite y RollupCode splitting e imports dinámicosTree-shaking y eliminación de código muertoOptimizando imágenes, fuentes y assets estáticosEstrategias de cache, hashes y source mapsLección 5Tests del lado cliente: testing unitario de componentes, tests de integración, elección de librerías de testing y ejemplosDesarrolla una estrategia robusta de testing del lado cliente. Aprende testing unitario para componentes, tests de integración entre rutas y APIs, y cómo elegir entre Jest, Vitest, Cypress y Testing Library para crear suites de tests confiables y mantenibles.
Testing unitario de componentes UI en aislamientoTests de integración para flujos y enrutamientoUsando Testing Library para tests centrados en usuarioElegiendo Jest, Vitest, Cypress o PlaywrightMockeando APIs y manejando tests inestablesLección 6Configuración local de desarrollo y entornos: variables de entorno, archivos .env, feature flags para frontendConfigura entornos frontend confiables para setups locales y cloud. Aprende a manejar variables de entorno, archivos .env, inyección en tiempo de build y feature flags para alternar funcionalidad de forma segura entre desarrollo, staging y producción.
Manejando archivos .env y variables de buildSeparando configs dev, staging y producciónConfiguración runtime y seguridad de entornosImplementando feature flags en frontendManejo de secretos y errores comunes de configuraciónLección 7Estructura de proyecto y convenciones de carpetas para single-page apps (componentes, páginas, servicios, hooks)Diseña estructuras de proyecto escalables para single-page apps. Aprende convenciones de carpetas para componentes, páginas, servicios y hooks, y cómo organizar utilidades compartidas, tests y estilos para mantener codebases grandes descubribles y mantenibles.
Organizando componentes, páginas y layoutsServicios, hooks y capas de acceso a datosUtilidades compartidas, tipos y constantesEstructurando tests y archivos storyRefactorizando hacia límites modularesLección 8Patrones de integración API: REST vs clientes GraphQL, manejo de errores, reintentos de requests, timeoutsImplementa patrones robustos de integración API en el cliente. Compara clientes REST y GraphQL, configura Axios o Fetch, maneja errores y reintentos, y diseña timeouts, cancelación y normalización para capas de fetching de datos resilientes.
Configurando clientes REST con Axios o FetchUsando clientes GraphQL como Apollo o URQLManejo global de errores y mensajes al usuarioReintentos de requests, backoff y timeoutsCancelación, abort controllers y cacheLección 9Autenticación en frontend: almacenamiento de tokens, flujos de refresh y enfoques de cookies segurasEntiende patrones seguros de autenticación frontend. Compara localStorage, sessionStorage y cookies, diseña flujos de refresh token e implementa cookies HttpOnly, defensas CSRF y estrategias de logout que protejan usuarios en aplicaciones reales.
Almacenamiento de tokens: localStorage vs cookiesImplementando flujos de refresh token de forma seguraCookies HttpOnly y protección CSRFManejando logout, revocación y rotaciónManejo de errores de auth y feedback al usuarioLección 10Opciones y patrones de manejo de estado (estado local de componente, Context, Redux/Pinia/MobX, React Query)Compara opciones de manejo de estado para frontends complejos. Explora estado local, Context, Redux, Pinia, MobX y React Query, y aprende patrones para cache, normalización y evitar re-renders innecesarios en aplicaciones grandes.
Estado local de componente y patrones de liftingContext API para preocupaciones transversalesDiseño de stores Redux, Pinia y MobXEstado del servidor con React Query o SWROptimización de rendimiento y patrones de selectoresLección 11Enrutamiento y rutas protegidas: enrutamiento del lado cliente, guards de ruta, lazy loadingConstruye enrutamiento del lado cliente confiable con rutas protegidas. Aprende configuración de rutas, rutas anidadas, lazy loading y guards de ruta que enforcen autenticación y autorización manteniendo la navegación rápida y accesible.
Configurando routers y rutas del lado clienteRutas anidadas y jerarquías de layoutImplementando lazy loading y code splittingGuards de ruta basados en auth y redirectsManejando páginas 404 y rutas fallback
