Formation Développement Frontend avec React

Leçon 1 • JavaScript essentiel pour React

Passe en revue la syntaxe ES6+ requise tout au long du cours : fonctions fléchées, déstructuration, modules et promesses. Évite toute confusion de syntaxe dans le code React ultérieur.

Leçon 2 • Configuration de l'environnement de développement

Installe Node.js, npm et VS Code, puis ébauche un projet avec Vite. Les étudiants terminent la section avec une application React en cours d'exécution sur localhost.

Leçon 3 • Comment les navigateurs affichent les pages web

Couvre le DOM, le CSSOM et le pipeline de rendu, de l'analyse HTML à la peinture. Établit le modèle du navigateur qui explique pourquoi le DOM virtuel de React est important.

Leçon 4 • La place de React dans l'écosystème

Positionne React comme une bibliothèque d'interface utilisateur, pas un framework complet, et le compare à Angular et Vue. Clarifie ce que React résout et quels outils complémentaires comblent les lacunes.

Leçon 1 • Patrons de composition de composants

Présente les props children, la composition de type slot et les composants wrapper. Prépare les étudiants à construire des structures d'interface utilisateur flexibles et réutilisables dans les chapitres suivants.

Leçon 2 • Rendu de listes et clés

Utilise Array.map pour afficher des listes dynamiques et explique pourquoi React nécessite des props key stables. Applique directement les expressions JSX et les props des sections précédentes.

Leçon 3 • Écrire et comprendre JSX

Enseigne JSX comme sucre syntaxique autour de React.createElement et couvre ses règles et limitations. Donne aux étudiants une base sur ce en quoi JSX est compilé avant qu'ils n'écrivent des composants.

Leçon 4 • Composants fonctionnels

Définit un composant fonctionnel comme une fonction pure retournant du JSX et couvre les conventions de nommage, les motifs d'exportation et les conventions de fichiers. Forme l'unité atomique pour tous les chapitres suivants.

Leçon 1 • useRef pour le DOM et les valeurs mutables

Démontre useRef pour l'accès direct au DOM et pour la persistance de valeurs mutables entre les rendus sans déclencher de re-rendus. Complète useState pour l'état non visuel.

Leçon 2 • Gestion des événements utilisateur

Couvre les événements synthétiques, les motifs de gestionnaires d'événements et la prévention du comportement par défaut du navigateur. Combine avec useState pour produire des composants de formulaire et de bouton interactifs.

Leçon 3 • Introduction à useState

Explique l'état comme des données qui déclenchent des re-rendus et montre useState pour les valeurs primitives et objets. Relie les changements d'état au processus de réconciliation du chapitre 1.

Leçon 4 • Effets de bord avec useEffect

Enseigne useEffect pour la récupération de données, les abonnements et la manipulation du DOM après le rendu. Couvre le tableau de dépendances et les fonctions de nettoyage pour prévenir les fuites mémoire.

Leçon 1 • Styles en ligne et objets de style

Applique des objets de style JavaScript pour une stylisation dynamique, pilotée par les props, et explique les noms de propriétés en camelCase. Met en évidence les compromis de performance par rapport aux approches basées sur les classes.

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

Crée des composants stylisés en utilisant des littéraux de gabarit tagués et transmet des props pour des styles dynamiques. Compare CSS-in-JS aux modules CSS pour l'adéquation à l'équipe et au projet.

Leçon 3 • CSS utilitaire d'abord avec Tailwind

Intègre Tailwind CSS dans un projet Vite-React et applique des classes utilitaires directement dans le JSX. Couvre les préfixes réactifs et l'application conditionnelle de classes.

Leçon 4 • CSS simple et styles globaux

Importe des feuilles de style globales et explique les collisions de noms de classe dans les grandes applications. Motive les solutions de style à portée limitée introduites dans les sections suivantes.

Leçon 1 • Routes dynamiques et paramètres d'URL

Définit des segments de route paramétrés et les lit avec useParams. Permet des pages de détail pilotées par des identifiants de données, un modèle utilisé dans la plupart des applications réelles.

Leçon 2 • Routes imbriquées et mises en page

Utilise des éléments Route imbriqués et le composant Outlet pour partager des mises en page persistantes entre les routes enfants. Réduit la duplication de mise en page dans les applications multi-sections.

Leçon 3 • Configuration de React Router v6

Installe React Router, enveloppe l'application dans BrowserRouter et définit les routes avec les composants Routes et Route. Produit un exemple fonctionnel de navigation sur deux pages.

Leçon 4 • Routes protégées et gardes de navigation

Construit un composant wrapper qui redirige les utilisateurs non authentifiés à l'aide de Navigate. Introduit l'état d'authentification comme une préoccupation de routage sans implémenter un système d'authentification complet.

Leçon 1 • Introduction aux bibliothèques d'état externes

Présente Zustand et Redux Toolkit comme alternatives au Context pour les grandes applications. Couvre quand l'état intégré de React est insuffisant et en quoi les stores externes diffèrent.

Leçon 2 • État complexe avec useReducer

Modélise les transitions d'état comme des fonctions de réduction pures et distribue des actions typées. S'associe à Context pour construire un modèle d'état global léger.

Leçon 3 • API Context de React

Crée un contexte, fournit une valeur à la racine de l'arbre et le consomme avec useContext. Couvre la division du contexte pour éviter les re-rendus inutiles.

Leçon 4 • Construction de hooks personnalisés

Extrait la logique d'état réutilisable dans des hooks personnalisés préfixés par use. Démontre des hooks pour la récupération de données, la gestion de formulaires et la synchronisation avec le stockage local.

Leçon 1 • Pagination et défilement infini

Implémente le chargement de données basé sur les pages et sur les curseurs à l'aide de useInfiniteQuery de React Query. Couvre les modèles d'interface utilisateur pour les boutons de chargement supplémentaire et la récupération déclenchée par le défilement.

Leçon 2 • Récupération de données avec useEffect et l'API Fetch

Implémente le modèle de récupération au montage à l'intérieur de useEffect et gère l'état de chargement et d'erreur avec useState. Établit la base de référence avant d'introduire des abstractions.

Leçon 3 • Axios pour les requêtes HTTP

Remplace fetch par Axios pour une syntaxe plus propre, une analyse JSON automatique et des intercepteurs. Couvre la création d'une instance Axios avec une URL de base et des en-têtes par défaut.

Leçon 4 • Mises à jour optimistes et récupération d'erreurs

Met à jour l'interface utilisateur avant la confirmation serveur et annule en cas d'échec à l'aide des callbacks de mutation de React Query. Améliore la performance perçue pour les fonctionnalités à forte écriture.

Leçon 1 • Division du code et chargement paresseux

Divise le bundle par route et composant à l'aide de React.lazy et Suspense. Réduit le temps de chargement initial en différant le JavaScript non critique.

Leçon 2 • Identification des goulots d'étranglement de performance

Utilise le profileur React DevTools et les outils de performance du navigateur pour localiser les re-rendus inutiles et les composants lents. Établit un flux de travail d'optimisation basé sur la mesure.

Leçon 3 • Build et déploiement de production

Exécute le build de production Vite, analyse la sortie et déploie sur une plateforme d'hébergement statique. Couvre les variables d'environnement et la configuration au moment du build.

Leçon 4 • Callbacks stables avec useCallback

Stabilise les références de fonctions transmises comme props à l'aide de useCallback pour empêcher les re-rendus enfants. S'associe à React.memo pour compléter la boîte à outils de mémoïsation.