Formation React et développement Frontend

Leçon 1 • L'Essentiel de JavaScript pour React

Passe en revue la syntaxe ES6+ — fonctions fléchées, déstructuration, modules et promesses — sur laquelle le code React s'appuie quotidiennement. Garantit que les étudiants lisent et écrivent du JavaScript moderne sans difficulté.

Leçon 2 • Comment les Navigateurs Affichent les Pages Web

Couvre le DOM, le CSSOM et le pipeline de rendu que les navigateurs utilisent pour afficher le contenu. Ancre le concept de DOM virtuel de React dans le comportement réel du navigateur.

Leçon 3 • Fondamentaux du CSS pour le Style des Composants

Couvre le modèle de boîte, la spécificité, le flexbox et la grille comme outils de style utilisés dans les projets React. Prépare les étudiants à styliser les composants en toute confiance.

Leçon 4 • L'Essentiel du HTML et du Balisage Sémantique

Passe en revue les éléments HTML5 sémantiques et la structure de document nécessaires pour un rendu React accessible. Relie un balisage approprié au SEO et à la compatibilité avec les lecteurs d'écran.

Leçon 1 • Rendu de Listes et UI Conditionnelle

Enseigne le mapping de tableaux, les props key et les patrons de rendu conditionnel utilisés dans presque toutes les UI React. S'appuie sur les expressions JSX introduites plus tôt dans le chapitre.

Leçon 2 • Écrire et Comprendre le JSX

Enseigne les règles de syntaxe JSX, les expressions et comment Babel transforme le JSX en appels React.createElement. Relie le JSX aux connaissances HTML du chapitre 1.

Leçon 3 • Composition de Composants et Prop Children

Introduit la composition plutôt que l'héritage en utilisant la prop children et des patrons de type slots. Les étudiants construisent des composants wrapper flexibles qui acceptent un contenu enfant arbitraire.

Leçon 4 • Passer et Recevoir des Props

Explique comment les composants parents transmettent des données aux enfants via les props et comment les enfants les consomment. Renforce le flux de données unidirectionnel en tant que principe de conception central de React.

Leçon 1 • Remonter l'État et Partager des Données

Explique la remontée de l'état vers un ancêtre commun pour partager des données entre des composants frères. Renforce le flux de données unidirectionnel et prépare les étudiants au context dans le chapitre suivant.

Leçon 2 • Gérer les Événements dans React

Enseigne les événements synthétiques, les gestionnaires d'événements et les patrons de gestion de formulaires qui connectent les actions utilisateur aux mises à jour d'état. S'appuie sur useState pour créer des composants interactifs.

Leçon 3 • Comprendre l'État et la Réactivité

Définit l'état comme des données qui déclenchent des re-rendus et le contraste avec les props et les variables ordinaires. Établit le modèle mental nécessaire avant d'introduire les API de hooks.

Leçon 4 • Gérer l'État Complexe avec useReducer

Introduit useReducer pour la logique d'état impliquant plusieurs sous-valeurs ou des transitions complexes. Les étudiants refactorisent des exemples useState en composants basés sur un reducer.

Leçon 1 • Construire un Context de Thème et d'Auth

Applique le context à deux cas d'usage pratiques : le basculement de thème et l'état d'authentification. Renforce les patrons de context avec des scénarios réels que les étudiants rencontrent en entreprise.

Leçon 2 • L'API Context de React pour l'État Global

Enseigne createContext, Provider et useContext pour partager des valeurs dans l'arbre de composants. Résout le problème de prop drilling identifié au chapitre 3.

Leçon 3 • Hooks Personnalisés pour la Logique Réutilisable

Extrait la logique d'effet et d'état répétée dans des hooks personnalisés suivant la convention du préfixe use. Les étudiants produisent des hooks partageables comme useFetch et useLocalStorage.

Leçon 4 • Récupérer des Données depuis des API

Couvre les patrons fetch et async dans useEffect, les états de chargement et la gestion des erreurs. Les étudiants construisent un composant qui récupère et affiche des données JSON distantes.

Leçon 1 • Routes Protégées et Gardes de Navigation

Implémente la protection de route en utilisant le context d'auth du chapitre 4 et le composant Navigate. Les étudiants redirigent les utilisateurs non authentifiés vers une page de connexion.

Leçon 2 • Concepts de Routage Côté Client

Explique comment les applications monopages simulent la navigation sans rechargement complet de page en utilisant l'API History. Contrast les modèles de routage côté client et côté serveur.

Leçon 3 • Définir des Routes et des Liens de Navigation

Couvre BrowserRouter, Routes, Route et les composants Link pour mapper des URLs à des composants. Les étudiants construisent une mise en page multi-pages de base avec une barre de navigation persistante.

Leçon 4 • Routes Dynamiques et Paramètres d'URL

Enseigne les routes paramétrées et le hook useParams pour afficher des pages de détail à partir de segments d'URL. S'appuie sur le rendu de listes du chapitre 2 pour créer des UI maître-détail.

Leçon 1 • CSS Modules et Styles Délimités

Enseigne la syntaxe des CSS Modules et comment Vite génère des noms de classe localement délimités pour éviter les conflits. Les étudiants convertissent une feuille de style globale en styles de composants modulaires.

Leçon 2 • CSS Utilitaire avec Tailwind

Introduit le modèle de classes utilitaires de Tailwind, sa configuration et ses préfixes de conception adaptative. Les étudiants reconstruisent un composant en utilisant uniquement des classes utilitaires pour comparer les approches.

Leçon 3 • Animations et Transitions dans React

Couvre les transitions CSS, les animations par images clés et la bibliothèque Framer Motion pour l'animation au niveau des composants. Les étudiants ajoutent des animations d'entrée et de sortie aux pages routées.

Leçon 4 • CSS-in-JS avec Styled-Components

Couvre les littéraux de gabarit étiquetés, les styles dynamiques basés sur les props et le theming avec styled-components. Se connecte au context de thème construit au chapitre 4.

Leçon 1 • Profilage et Mesure des Performances

Applique le profileur React DevTools et le panneau de performance du navigateur pour localiser les goulots d'étranglement. Les étudiants produisent un rapport de performance avant-après pour un composant réel.

Leçon 2 • Comprendre le Comportement de Rendu de React

Explique quand et pourquoi React re-rend les composants et comment le réconciliateur décide quoi mettre à jour. Fournit le modèle mental nécessaire avant d'appliquer une quelconque optimisation.

Leçon 3 • Mémorisation avec React.memo et useMemo

Enseigne React.memo pour la mémorisation des composants et useMemo pour les calculs coûteux. Les étudiants appliquent les deux à un composant de liste lent et mesurent l'amélioration.

Leçon 4 • Références Stables avec useCallback

Couvre useCallback pour stabiliser les références de fonctions passées comme props aux enfants mémorisés. S'appuie directement sur la connaissance de React.memo de la section précédente.

Leçon 1 • Tester les Interactions Utilisateur et le Comportement Asynchrone

Utilise userEvent et waitFor pour simuler des clics, des soumissions de formulaire et le chargement de données asynchrones. Se connecte aux patrons de gestion d'événements et de fetch des chapitres 3 et 4.

Leçon 2 • Tests Unitaires avec Vitest et React Testing Library

Couvre la configuration de Vitest, les utilitaires de rendu et les requêtes de React Testing Library pour tester les composants en isolation. Les étudiants écrivent des tests pour les composants construits dans les chapitres précédents.

Leçon 3 • Fondamentaux et Stratégie de Test

Introduit la pyramide de test, les types de tests et la philosophie de tester le comportement plutôt que l'implémentation. Définit la stratégie que les étudiants appliquent tout au long de ce chapitre.

Leçon 4 • Construire et Déployer en Production

Couvre les builds de production avec Vite, les variables d'environnement et le déploiement sur une plateforme d'hébergement statique avec un pipeline CI/CD. Les étudiants livrent une application en ligne et accessible au public.