Leson 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 une 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ées contrôlées vs non contrôléesFormik et React Hook Form en pratiqueVeeValidate et patterns de formulaires VueRègles de validation synchrone et asynchroneMessages d'erreur, UX et accessibilitéLeson 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éduitLeson 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 outilsFrameworks de décision pour projets réelsLeson 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 mapsLeson 5Tests côté client : tests unitaires de 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 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 PlaywrightMocking d'API et gestion des tests instablesLeson 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 configurationLeson 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 modulairesLeson 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 retries, et concevez timeouts, annulation 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 d'erreurs et messagerie utilisateurRetries de requête, backoff et timeoutsAnnulation, contrôleurs d'avort et cacheLeson 9Authentification frontend : stockage des tokens, flux de rafraîchissement, approches sécurisées de cookiesComprenez les patterns d'authentification frontend sécurisés. Comparez localStorage, sessionStorage et cookies, concevez des flux de tokens de rafraîchissement, et implémentez des cookies HttpOnly, défenses CSRF et stratégies de déconnexion protégeant les utilisateurs dans des applications réelles.
Stockage de tokens : localStorage vs cookiesImplémentation sécurisée des flux de rafraîchissementCookies HttpOnly et protection CSRFGestion de déconnexion, révocation et rotationGestion d'erreurs auth et feedback utilisateurLeson 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-rendus 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 SWRAjustement performance et patterns de sélecteursLeson 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 appliquant authentification et 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 de lazy loading et code splittingGardes de route basées auth et redirectionsGestion des pages 404 et routes de fallback
