Formation aux bases de React et du Frontend

Leçon 1 • JavaScript Essentiel pour React

Revise 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 JS 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 CSS pour le Style des Composants

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

Leçon 4 • HTML et Fondamentaux du Balisage Sémantique

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

Leçon 1 • Rendu de Listes et UI Conditionnelle

Enseigne le mappage de tableaux, les props key et les modèles 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 la façon dont 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 modèles de type emplacement. Les étudiants construisent des composants wrapper flexibles qui acceptent du 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 comme principe de conception central de React.

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

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

Leçon 2 • Gestion des Événements dans React

Enseigne les événements synthétiques, les gestionnaires d'événements et les modèles 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 régulières. Établit le modèle mental nécessaire avant d'introduire les API de hooks.

Leçon 4 • Gérer un É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 Contexte de Thème et d'Authentification

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

Leçon 2 • API de Contexte 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 modèles 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 contexte d'authentification 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 monopage simulent la navigation sans rechargement complet de la page en utilisant l'API History. Compare 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 les composants BrowserRouter, Routes, Route et Link pour mapper des URL à des composants. Les étudiants construisent une disposition multi-page 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 détaillées à 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 CSS Modules et comment Vite génère des noms de classe délimités localement pour éviter les conflits. Les étudiants convertissent une feuille de style globale en styles de composants modulaires.

Leçon 2 • CSS Utilitaire d'Abord avec Tailwind

Introduit le modèle de classe utilitaire de Tailwind, la configuration et les 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 balisés, les styles basés sur des props dynamiques et le thème avec styled-components. Se connecte au contexte de thème construit au Chapitre 4.

Leçon 1 • Profilage et Mesure des Performances

Applique le Profileur des DevTools React 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 requis avant d'appliquer une optimisation.

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

Enseigne React.memo pour la mémorisation de 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 en tant que props aux enfants mémorisés. S'appuie directement sur les connaissances 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 formulaires et le chargement de données asynchrones. Se connecte aux modèles de gestion d'événements et de fetch des Chapitres 3 et 4.

Leçon 2 • Test Unitaire 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 de manière isolée. Les étudiants écrivent des tests pour les composants construits dans les chapitres précédents.

Leçon 3 • Fondamentaux et Stratégie des Tests

Introduit la pyramide des tests, les types de tests et la philosophie de tester le comportement plutôt que l'implémentation. Établit 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 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, publiquement accessible.