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 de React, Vue y SvelteMadurez del ecosistema y soporte comunitarioTradeoffs de rendimiento y tamaño de bundleIntegración con TypeScript y herramientasFrameworks de decisión para proyectos realesLección 4Build, empaquetado y optimización: Webpack/Vite/Rollup, code splitting, tree-shaking, manejo de assetsDomina herramientas modernas de build para frontends de alto rendimiento. Compara Webpack, Vite y Rollup, configura code splitting y tree-shaking, y optimiza manejo de assets, caché y source maps para entregar bundles rápidos y mantenibles.
Comparando configuraciones 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 caché, hashes y source mapsLección 5Pruebas del lado cliente: pruebas unitarias de componentes, pruebas de integración, elección de librerías de testing y ejemplosDesarrolla una estrategia robusta de testing del lado cliente. Aprende pruebas unitarias para componentes, pruebas de integración entre rutas y APIs, y cómo elegir entre Jest, Vitest, Cypress y Testing Library para suites confiables y mantenibles.
Pruebas unitarias de componentes UI en aislamientoPruebas de integración para flujos y enrutamientoUsando Testing Library para pruebas centradas en usuarioElegir Jest, Vitest, Cypress o PlaywrightMocking de APIs y manejo de pruebas inestablesLección 6Configuración de desarrollo local y entornos: variables de entorno, archivos .env, feature flags para frontendConfigura entornos frontend confiables para desarrollo local y cloud. Aprende a manejar variables de entorno, archivos .env, inyección en tiempo de build y feature flags para alternar funcionalidad entre desarrollo, staging y producción de forma segura.
Manejando archivos .env y variables de buildSeparando configs de dev, staging y producciónConfiguración en runtime y seguridad de entornoImplementando 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, pruebas y estilos para mantener codebases grandes accesibles.
Organizando componentes, páginas y layoutsServicios, hooks y capas de acceso a datosUtilidades compartidas, tipos y constantesEstructurando pruebas y archivos storyRefactorizando hacia límites modularesLección 8Patrones de integración de API: clientes REST vs GraphQL, manejo de errores, reintentos de requests, timeoutsImplementa patrones robustos de integración de 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 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 cachéLección 9Autenticación en frontend: almacenamiento de tokens, flujos de refresh, enfoques de cookies segurasComprende patrones seguros de autenticación en 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 caché, 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 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 redireccionesManejando páginas 404 y rutas fallback
