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 la 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 créer 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 selon le contexte du projet.
Concepts fondamentaux de React, Vue et SvelteMaturité de l'écosystème et support communautaireCompromis de performance et taille du bundleIntégration TypeScript et outilsCadres de décision pour projets réelsLeçon 4Build, bundling et optimisation : Webpack/Vite/Rollup, division de code, tree-shaking, gestion des assetsMaîtrisez les outils de build modernes pour des frontends performants. Comparez Webpack, Vite et Rollup, configurez la division de code 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 RollupDivision de code et imports dynamiquesTree-shaking et élimination du code mortOptimisation des images, polices et assets statiquesStratégies de cache, hachage et source mapsLeçon 5Tests côté client : tests unitaires de composants, tests d'intégration, choix de bibliothèques de test et exemplesDéveloppez une stratégie de test côté client robuste. Apprenez les tests unitaires pour composants, les tests d'intégration sur routes et API, et comment choisir entre Jest, Vitest, Cypress et Testing Library pour créer des suites de tests fiables et maintenables.
Tests unitaires de composants UI en isolationTests d'intégration pour flux et routageUtilisation de Testing Library pour tests centrés utilisateurChoix entre Jest, Vitest, Cypress ou PlaywrightSimulation d'API et gestion des tests instablesLeçon 6Configuration de développement local et d'environnement : variables d'environnement, fichiers .env, drapeaux de fonctionnalité frontendConfigurez des environnements frontend fiables pour les setups locaux et cloud. Apprenez à gérer les variables d'environnement, fichiers .env, injection au moment du build et drapeaux de fonctionnalité pour basculer en toute 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 drapeaux de fonctionnalité frontendGestion des secrets et pièges de configurationLeçon 7Structure de projet et conventions de dossiers pour applications monopage (composants, pages, services, hooks)Concevez des structures de projet évolutives pour applications monopage. Apprenez les conventions de dossiers pour composants, pages, services et hooks, et comment organiser les utilitaires partagés, tests et styles pour garder de grandes bases de code 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 storyRefactorisation vers des frontières modulairesLeçon 8Patterns d'intégration API : clients REST vs GraphQL, gestion d'erreurs, tentatives de requête, 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 tentatives, 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 utilisateurTentatives de requête, backoff et timeoutsAnnulation, contrôleurs d'avort et cacheLeçon 9Authentification frontend : stockage des jetons, flux de rafraîchissement et approches sécurisées de cookiesComprenez les patterns d'authentification frontend sécurisés. Comparez localStorage, sessionStorage et cookies, concevez des flux de jetons de rafraîchissement, et implémentez des cookies HttpOnly, défenses CSRF et stratégies de déconnexion qui protègent les utilisateurs dans des applications réelles.
Stockage de jetons : localStorage vs cookiesImplémentation sécurisée des flux de jetons de rafraîchissementCookies HttpOnly et protection CSRFGestion de déconnexion, révocation et rotationGestion des erreurs d'authentification et feedback utilisateurLeçon 10Options et patterns de gestion d'état (état local des composants, 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 le cache, la normalisation et éviter les re-rendus inutiles dans de grandes applications.
État local des composants et patterns de levageAPI Context pour préoccupations transversalesConception de magasins Redux, Pinia et MobXÉtat serveur avec React Query ou SWRAjustement des performances et patterns de sélecteursLeçon 11Routage et routes protégées : routage côté client, gardes de route, chargement différéCréez un routage côté client fiable avec routes protégées. Apprenez la configuration de routes, routes imbriquées, chargement différé et gardes de route qui appliquent l'authentification et l'autorisation tout en gardant la navigation rapide et accessible.
Configuration des routeurs et routes côté clientRoutes imbriquées et hiérarchies de layoutImplémentation du chargement différé et division de codeGardes de route basées sur l'authentification et redirectionsGestion des pages 404 et routes de repli
