Lección 1Manejo y validación de formularios (controlados vs no controlados, librerías: Formik, React Hook Form, VeeValidate)Implementa un manejo robusto de formularios y validación. Compara entradas controladas y no controladas, 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 entrada controlada vs no controladaFormik 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 una fuerte accesibilidad. Explora Tailwind, Material UI y Chakra, luego aplica roles ARIA, gestión del 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 ARIAGestión del 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 compensaciones del ecosistemaEvalúa y justifica tu elección de framework frontend. Compara arquitecturas de React, Vue y Svelte, madurez del ecosistema, rendimiento y curvas de aprendizaje para seleccionar y defender la mejor opción para cada contexto de proyecto.
Conceptos básicos de React, Vue y SvelteMadurez del ecosistema y soporte comunitarioCompensaciones de rendimiento y tamaño del paqueteIntegración de TypeScript y herramientasFrameworks de decisión para proyectos realesLección 4Compilación, empaquetado y optimización: Webpack/Vite/Rollup, división de código, tree-shaking, manejo de assetsDomina las herramientas modernas de compilación para frontends de alto rendimiento. Compara Webpack, Vite y Rollup, configura división de código y tree-shaking, y optimiza el manejo de assets, caché y mapas de origen para entregar paquetes de producción rápidos y mantenibles.
Comparando configuraciones de Webpack, Vite y RollupDivisión de código e importaciones dinámicasTree-shaking y eliminación de código muertoOptimizando imágenes, fuentes y assets estáticosEstrategias de caché, hashes y mapas de origenLecció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 crear suites de pruebas confiables y mantenibles.
Pruebas unitarias de componentes UI en aislamientoPruebas de integración para flujos y enrutamientoUsando Testing Library para pruebas centradas en el usuarioElegir Jest, Vitest, Cypress o PlaywrightSimulando APIs y manejando pruebas inestablesLección 6Configuración de desarrollo local y entornos: variables de entorno, archivos .env, flags de características para frontendConfigura entornos frontend confiables para setups locales y en la nube. Aprende a gestionar variables de entorno, archivos .env, inyección en tiempo de compilación y flags de características para alternar funcionalidad de forma segura entre desarrollo, staging y producción.
Gestionando archivos .env y variables de compilaciónSeparando configuraciones de dev, staging y producciónConfiguración en tiempo de ejecución y seguridad del entornoImplementando flags de características en frontendManejo de secretos y errores comunes de configuraciónLección 7Estructura de proyecto y convenciones de carpetas para aplicaciones de página única (componentes, páginas, servicios, hooks)Diseña estructuras de proyecto escalables para aplicaciones de página única. Aprende convenciones de carpetas para componentes, páginas, servicios y hooks, y cómo organizar utilidades compartidas, pruebas 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 pruebas y archivos de historiasRefactorizando hacia límites modularesLección 8Patrones de integración de API: clientes REST vs GraphQL, manejo de errores, reintentos de peticiones, 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 obtención de datos resilientes.
Configurando clientes REST con Axios o FetchUsando clientes GraphQL como Apollo o URQLManejo global de errores y mensajería al usuarioReintentos de peticiones, retroceso y timeoutsCancelación, controladores de aborto y cachéLección 9Autenticación en el frontend: almacenamiento de tokens, flujos de refresco y enfoques de cookies segurasComprende los patrones seguros de autenticación en frontend. Compara localStorage, sessionStorage y cookies, diseña flujos de tokens de refresco, e implementa cookies HttpOnly, defensas CSRF y estrategias de logout que protegen a los usuarios en aplicaciones reales.
Almacenamiento de tokens: localStorage vs cookiesImplementando flujos de tokens de refresco de forma seguraCookies HttpOnly y protección CSRFManejando logout, revocación y rotaciónManejo de errores de autenticación y feedback al usuarioLección 10Opciones y patrones de gestión de estado (estado local de componente, Context, Redux/Pinia/MobX, React Query)Compara opciones de gestión 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-renderizados innecesarios en aplicaciones grandes.
Estado local de componente y patrones de elevaciónAPI Context para preocupaciones transversalesDiseño de tiendas Redux, Pinia y MobXEstado del servidor con React Query o SWRAjuste de rendimiento y patrones de selectoresLección 11Enrutamiento y rutas protegidas: enrutamiento del lado cliente, guardias de ruta, carga perezosaConstruye enrutamiento del lado cliente confiable con rutas protegidas. Aprende configuración de rutas, rutas anidadas, carga perezosa y guardias de ruta que aplican 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 carga perezosa y división de códigoGuardias de ruta basadas en autenticación y redireccionesManejando páginas 404 y rutas de reserva
