Objectifs pédagogiques

Concevoir des interfaces modulaires et réutilisables grâce aux composants.

Maîtriser le cycle de vie et la gestion d'état avec les Hooks.

Gérer efficacement les données asynchrones et les appels API.

Mettre en place une navigation complexe au sein d'une SPA.

Garantir la fiabilité du code via des tests unitaires de composants.

Programme

Jour 1 : L'Approche Component-Driven

Philosophie React : Le DOM Virtuel, le flux de données unidirectionnel et la pensée par composants.
JSX & Rendu : Syntaxe, expressions, rendu conditionnel et gestion des listes (keys).
Props & Composition : Transmettre des données et utiliser children pour créer des composants réutilisables.
Atelier : Décomposition d'une maquette statique en une hiérarchie de composants React.

Jour 2 : State Management et Cycle de vie (Hooks de base)

useState : Gérer l'état local et comprendre l'asynchronisme des mises à jour.
useEffect : Gérer les effets de bord (appels API, timers) et le nettoyage (cleanup).
Formulaires : Composants contrôlés vs non-contrôlés et gestion du changement.
Atelier : Création d'un moteur de recherche de films avec appel à une API externe.

Hooks de Performance : useMemo et useCallback pour éviter les calculs et rendus inutiles.
useRef : Accéder au DOM et stocker des valeurs persistantes hors cycle de rendu.
Context API : Éviter le "Prop Drilling" et partager un état global (thème, utilisateur) sans bibliothèque tierce.
Atelier : Implémentation d'un mode sombre (Dark Mode) global et d'un système d'authentification factice.

React Router : Gestion du routage Single Page Application (SPA), paramètres d'URL et navigation programmatique.
Gestion d'état complexe : Introduction à Redux Toolkit ou TanStack Query (React Query) pour la synchronisation des données serveur.
Style : Comparatif CSS Modules, Styled-components et Tailwind CSS dans un projet React.
Atelier : Mise en place d'une application multi-pages avec navigation fluide.

Tests unitaires : Tester ses composants avec Vitest et React Testing Library (simuler des interactions).
Bonnes pratiques : Custom Hooks pour extraire la logique métier et principes SOLID appliqués aux composants.
Build & Deploy : Utilisation de Vite.js, variables d'environnement et déploiement (Vercel/Netlify).
Atelier Final : Finalisation d'un projet "Portfolio" ou "Dashboard" complet, testé et prêt pour la production.