Leçon 1Gestion et validation des formulaires (contrôlés vs non contrôlés, bibliothèques : Formik, React Hook Form, VeeValidate)Implémentez une gestion robuste des formulaires et validation. Comparez les entrées contrôlées et non contrôlées, utilisez des bibliothèques comme Formik, React Hook Form et VeeValidate, et concevez la validation, les messages d'erreur et les flux de soumission pour des formulaires complexes.
Stratégies d'entrée contrôlée vs non contrôléeFormik et React Hook Form en pratiqueVeeValidate et patterns de formulaires VueRègles de validation synchrone et asynchroneMessages d'erreur, UX et accessibilitéLeçon 2Bibliothèques de composants UI et pratiques d'accessibilité (Tailwind, Material, Chakra, rôles ARIA, navigation clavier)Apprenez à utiliser des bibliothèques UI modernes tout en maintenant une forte accessibilité. Explorez Tailwind, Material UI et Chakra, puis appliquez les rôles ARIA, la gestion du focus et les patterns de navigation clavier pour construire des interfaces inclusives prêtes pour la production.
Systèmes de design avec Tailwind et classes utilitairesPatterns de composants Material UI et ChakraHTML sémantique et stratégies de rôles ARIAGestion du focus et navigation clavierContraste des couleurs, thématisation et mouvement réduitLeçon 3Choix d'un framework frontend et justification (React, Vue, Svelte) et compromis d'écosystèmeÉvaluez et justifiez votre choix de framework frontend. Comparez les architectures React, Vue et Svelte, la maturité de l'écosystème, les performances et les courbes d'apprentissage pour sélectionner et défendre la meilleure option pour chaque contexte de projet.
Concepts fondamentaux React, Vue et SvelteMaturité de l'écosystème et support communautaireCompromis de performance et taille de bundleIntégration TypeScript et outilsFrameworks de décision pour projets réelsLeçon 4Build, bundling et optimisation : Webpack/Vite/Rollup, code splitting, tree-shaking, gestion des assetsMaîtrisez les outils de build modernes pour des frontends performants. Comparez Webpack, Vite et Rollup, configurez le code splitting et le tree-shaking, et optimisez la gestion des assets, le cache et les source maps pour livrer des bundles de production rapides et maintenables.
Comparaison des configurations Webpack, Vite et RollupCode splitting et imports dynamiquesTree-shaking et élimination du code mortOptimisation des images, polices et assets statiquesStratégies de cache, hashes et source mapsLeçon 5Tests côté client : tests unitaires des composants, tests d'intégration, choix et exemples de bibliothèques de testDéveloppez une stratégie de test côté client robuste. Apprenez les tests unitaires pour composants, les tests d'intégration sur routes et APIs, et comment choisir entre Jest, Vitest, Cypress et Testing Library pour créer des suites de tests fiables et maintenables.
Tests unitaires des composants UI en isolationTests d'intégration pour flux et routageUtilisation de Testing Library pour tests centrés utilisateurChoix entre Jest, Vitest, Cypress ou PlaywrightMocking d'APIs et gestion des tests instablesLeçon 6Configuration dev local et environnements : variables d'environnement, fichiers .env, feature flags frontendConfigurez des environnements frontend fiables pour setups locaux et cloud. Apprenez à gérer les variables d'environnement, fichiers .env, injection au moment du build et feature flags pour basculer en sécurité les fonctionnalités entre développement, staging et production.
Gestion des fichiers .env et variables de buildSéparation des configs dev, staging et productionConfiguration runtime et sécurité d'environnementImplémentation de feature flags frontendGestion des secrets et pièges de configurationLeçon 7Structure de projet et conventions de dossiers pour applications single-page (composants, pages, services, hooks)Concevez des structures de projet scalables pour applications single-page. Apprenez les conventions de dossiers pour composants, pages, services et hooks, et comment organiser les utilitaires partagés, tests et styles pour garder de gros codebases découvrables et maintenables.
Organisation des composants, pages et layoutsServices, hooks et couches d'accès aux donnéesUtilitaires partagés, types et constantesStructure des tests et fichiers storyRefactoring vers des frontières modulairesLeçon 8Patterns d'intégration API : clients REST vs GraphQL, gestion d'erreurs, retries de requêtes, timeoutsImplémentez des patterns d'intégration API robustes côté client. Comparez les clients REST et GraphQL, configurez Axios ou Fetch, gérez les erreurs et retries, et concevez des timeouts, annulations et normalisation pour des couches de récupération de données résilientes.
Configuration de clients REST avec Axios ou FetchUtilisation de clients GraphQL comme Apollo ou URQLGestion globale des erreurs et messagerie utilisateurRetries de requêtes, backoff et timeoutsAnnulation, contrôleurs d'avort et cacheLeçon 9Authentification frontend : stockage des tokens, flux de refresh, approches sécurisées de cookiesComprenez les patterns d'authentification frontend sécurisés. Comparez localStorage, sessionStorage et cookies, concevez des flux de refresh token, et implémentez des cookies HttpOnly, défenses CSRF et stratégies de logout qui protègent les utilisateurs dans des applications réelles.
Stockage de tokens : localStorage vs cookiesImplémentation sécurisée des flux de refresh tokenCookies HttpOnly et protection CSRFGestion logout, révocation et rotationGestion des erreurs d'auth et feedback utilisateurLeçon 10Options et patterns de gestion d'état (état local composant, Context, Redux/Pinia/MobX, React Query)Comparez les options de gestion d'état pour frontends complexes. Explorez l'état local, Context, Redux, Pinia, MobX et React Query, et apprenez les patterns pour cache, normalisation et éviter les re-renders inutiles dans de grandes applications.
État local composant et patterns de liftingAPI Context pour préoccupations transversalesDesign de stores Redux, Pinia et MobXÉtat serveur avec React Query ou SWROptimisation performance et patterns de sélecteursLeçon 11Routage et routes protégées : routage côté client, gardes de route, lazy loadingConstruisez un routage côté client fiable avec routes protégées. Apprenez la configuration de routes, routes imbriquées, lazy loading et gardes de route qui appliquent l'authentification et l'autorisation tout en gardant la navigation rapide et accessible.
Configuration de routeurs et routes côté clientRoutes imbriquées et hiérarchies de layoutImplémentation lazy loading et code splittingGardes de route basées sur auth et redirectionsGestion pages 404 et routes de fallback
