Formation développeur React

Leçon 1 • Classes et prototypes

Présente la syntaxe des classes, l'héritage et la chaîne de prototypes. Fournit le contexte nécessaire pour comprendre les composants React basés sur les classes et leurs méthodes de cycle de vie.

Leçon 2 • Promesses et Async/Await

Explique l'exécution asynchrone, le chaînage de promesses et la syntaxe async/await. Prépare les étudiants à la récupération de données dans les composants React.

Leçon 3 • Syntaxe ES6 essentielle

Couvre let/const, les fonctions fléchées, les littéraux de gabarit et la déstructuration. Ces motifs apparaissent dans toutes les bases de code React.

Leçon 4 • Modules et import/export

Enseigne les exportations nommées et par défaut, la résolution des modules et les attentes des regroupateurs. Permet directement l'organisation des fichiers de composants dans les projets React.

Leçon 1 • Configuration d'un projet React

Parcourt l'échafaudage de projet avec Vite et Create React App, la structure de dossiers et l'utilisation du serveur de développement. Les étudiants repartent avec un environnement local fonctionnel.

Leçon 2 • Ce qu'est React et pourquoi l'utiliser

Explique le DOM virtuel, l'interface utilisateur déclarative et la place de React dans l'écosystème frontal. Établit les fondements conceptuels pour tout le travail ultérieur avec React.

Leçon 3 • Rendu de listes et de conditionnels

Couvre le rendu de listes avec clés et les motifs de rendu conditionnel. Ce sont les techniques d'interface utilisateur dynamique les plus courantes dans React.

Leçon 4 • Syntaxe et règles JSX

Couvre la transpilation JSX, l'intégration d'expressions et les règles spécifiques à JSX comme className et les balises auto-fermantes. Établit le lien entre JSX et le JavaScript vers lequel il est compilé.

Leçon 1 • Élévation de l'état

Explique le partage d'état entre composants frères en le déplaçant vers un parent commun. Renforce le principe du flux de données unidirectionnel.

Leçon 2 • Mises à jour immuables de l'état

Couvre pourquoi React nécessite des mises à jour immuables et comment les appliquer aux objets et aux tableaux. Prévient les bogues courants causés par une mutation directe.

Leçon 3 • Composants de formulaire contrôlés

Enseigne les entrées contrôlées où l'état React pilote les valeurs du formulaire. Permet une validation et une soumission fiables des formulaires.

Leçon 4 • Notions fondamentales du crochet useState

Explique l'initialisation de l'état, la fonction de définition et les déclencheurs de nouveau rendu. useState est l'outil principal pour l'interactivité locale dans les composants fonctionnels.

Leçon 1 • Fonctions de nettoyage

Enseigne le retour de fonctions de nettoyage pour annuler les abonnements et les minuteries. Prévient les fuites de mémoire dans les composants à longue durée de vie.

Leçon 2 • Mécanismes du crochet useEffect

Couvre la syntaxe des effets, le tableau de dépendances et le moment d'exécution. Les étudiants acquièrent un contrôle précis sur le moment où les effets s'exécutent.

Leçon 3 • Aperçu du cycle de vie des composants de classe

Établit la correspondance entre componentDidMount, componentDidUpdate et componentWillUnmount avec les équivalents useEffect. Prépare les étudiants à lire des bases de code existantes.

Leçon 4 • Compréhension des effets secondaires

Définit les effets secondaires dans React et explique pourquoi ils doivent être isolés du rendu. Motive le besoin de useEffect.

Leçon 1 • useMemo et useCallback

Explique la mémorisation de valeurs et de fonctions pour éviter des recalculs et des nouveaux rendus inutiles. Introduit la réflexion sur l'optimisation du rendement.

Leçon 2 • useContext pour les données partagées

Enseigne la création et la consommation de contexte pour éviter le forage d'accessoires. Établit un lien avec les motifs d'état global introduits dans le chapitre sur la gestion de l'état.

Leçon 3 • useReducer pour les états complexes

Présente le motif de réducteur pour gérer une logique d'état à actions multiples. Prépare les étudiants à une réflexion de style Redux au sein d'un seul composant.

Leçon 4 • useRef et le DOM

Couvre useRef pour l'accès au DOM et la persistance de valeurs mutables à travers les rendus. Permet la gestion du focus, les animations et l'intégration de bibliothèques logicielles tierces.

Leçon 1 • Navigation et liens

Enseigne Link, NavLink et la navigation programmatique avec useNavigate. Permet les motifs de navigation déclaratifs et impératifs.

Leçon 2 • Configuration de base de React Router

Couvre les composants BrowserRouter, Routes et Route pour définir l'arbre de navigation d'une application. Établit le modèle de routage déclaratif.

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

Explique les arbres de Route imbriqués et le composant Outlet pour les mises en page partagées. Réduit la duplication de mise en page entre les pages connexes.

Leçon 4 • Routes protégées et gardes d'authentification

Implémente des gardes de route qui redirigent les utilisateurs non authentifiés. Applique les connaissances en contexte et en routage ensemble dans un motif réaliste.

Leçon 1 • Notions fondamentales de Redux Toolkit

Présente le magasin, les tranches et les réducteurs de Redux Toolkit comme l'approche moderne de Redux. Remplace les motifs Redux classiques lourds en code standard.

Leçon 2 • Choix de la bonne solution d'état

Compare l'état local, le contexte, Redux et Zustand en fonction de la complexité et du cas d'utilisation. Équipe les étudiants pour prendre des décisions architecturales sur des projets réels.

Leçon 3 • API Context à grande échelle

Étend les motifs useContext à l'état à l'échelle de l'application avec plusieurs contextes et optimisations du rendement. Couvre quand le contexte est suffisant.

Leçon 4 • Lecture et écriture de l'état Redux

Couvre les crochets useSelector et useDispatch pour l'interaction avec le magasin au niveau du composant. Permet aux composants de lire des tranches et de répartir des actions.

Leçon 1 • Construction et déploiement d'applications React

Parcourt les builds de production, la configuration de l'environnement et le déploiement sur des plateformes d'hébergement statique. Complète le cycle de vie complet du développement.

Leçon 2 • Techniques d'optimisation du rendement

Couvre React.memo, le chargement paresseux et la division de code pour réduire la taille du groupe et le coût du rendu. Améliore directement le rendement perçu par l'utilisateur.

Leçon 3 • Test des composants React

Présente React Testing Library et Jest pour les tests unitaires et d'intégration. Couvre le rendu, l'interrogation et la simulation d'interactions utilisateur.

Leçon 4 • Limites d'erreur et résilience

Enseigne les limites d'erreur basées sur les classes et les interfaces utilisateur de repli pour éviter les plantages complets de l'application. Ajoute de la résilience de production aux arbres de composants.