Formation en développement front-end avec React

Leçon 1 • Notions Essentielles de JavaScript pour React

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

Leçon 2 • Configuration de l'Environnement de Développement

Installe Node.js, npm et VS Code, puis génère un projet avec Vite. Les étudiants terminent la section avec une application React fonctionnelle 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 à l'affichage. Établit le modèle de 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, non comme un cadriciel complet, et le compare à Angular et Vue. Clarifie ce que React résout et quels outils complémentaires comblent les lacunes.

Leçon 1 • Modèles de Composition de Composants

Introduit les propriétés children, la composition de type emplacement et les composants d'encapsulation. Prépare les étudiants à créer des structures d'interface utilisateur flexibles et réutilisables dans les chapitres ultérieurs.

Leçon 2 • Rendu des Listes et des Clés

Utilise Array.map pour afficher des listes dynamiques et explique pourquoi React exige des clés stables. Applique directement les expressions JSX et les propriétés des sections précédentes.

Leçon 3 • Écrire et Comprendre JSX

Enseigne JSX comme sucre syntaxique pour React.createElement et couvre ses règles et limites. Prépare les étudiants à ce que JSX compile avant d'écrire 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 modèles d'exportation et les conventions de fichiers. Forme l'unité atomique pour tous les chapitres futurs.

Leçon 1 • useRef pour le DOM et les Valeurs Mutables

Montre useRef pour l'accès direct au DOM et pour la persistance de valeurs mutables lors des rendus sans déclencher de nouveaux rendus. Complémente useState pour l'état non visuel.

Leçon 2 • Gestion des Événements Utilisateur

Couvre les événements synthétiques, les modèles de gestionnaires d'événements et la prévention du comportement par défaut du navigateur. Se combine avec useState pour produire des composants interactifs de formulaires et de boutons.

Leçon 3 • Introduction à useState

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

Leçon 4 • Effets Secondaires 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 de mémoire.

Leçon 1 • Styles en Ligne et Objets de Style

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

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

Crée des composants stylisés à l'aide de littéraux de gabarits étiquetés et transmet des propriétés pour les styles dynamiques. Compare le 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 les classes utilitaires directement dans JSX. Couvre les préfixes adaptatifs 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 classes dans les grandes applications. Motive les solutions de stylisation à 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étails 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 à deux pages.

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

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

Leçon 1 • Introduction aux Bibliothèques d'État Externes

Examine Zustand et Redux Toolkit comme alternatives au Contexte pour les grandes applications. Couvre les cas où l'état intégré de React est insuffisant et en quoi les magasins 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. Se combine avec le Contexte pour créer un modèle d'état global léger.

Leçon 3 • API Contexte de React

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

Leçon 4 • Construction de Hooks Personnalisés

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

Leçon 1 • Pagination et Défilement Infini

Implémente le chargement de données basé sur les pages et sur le curseur à 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 Fetch API

Implémente le modèle de récupération au montage dans useEffect et gère l'état de chargement et d'erreur avec useState. Établit la base avant d'introduire les 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'Erreur

Met à jour l'interface utilisateur avant la confirmation du serveur et revient en arrière en cas d'échec à l'aide des rappels de mutation de React Query. Améliore le rendement perçu pour les fonctionnalités à forte écriture.

Leçon 1 • Division de Code et Chargement Paresseux

Divise le groupe 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 Rendement

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

Leçon 3 • Construction de Production et Déploiement

Exécute la construction 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 de la construction.

Leçon 4 • Rappels Stables avec useCallback

Stabilise les références de fonctions transmises comme propriétés à l'aide de useCallback pour éviter les rendus enfants. Se combine avec React.memo pour compléter la trousse d'outils de mémorisation.