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 pour comprendre les composants React basés sur les classes et les méthodes de cycle de vie.

Leçon 2 • Promesses et Async/Await

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

Leçon 3 • Essentiels de la syntaxe ES6

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 exports nommés et par défaut, la résolution des modules et les attentes du bundler. Permet directement l'organisation des fichiers de composants dans les projets React.

Leçon 1 • Configuration d'un projet React

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

Leçon 2 • Qu'est-ce que React et pourquoi l'utiliser

Explique le DOM virtuel, l'UI déclarative et la place de React dans l'écosystème front-end. Pose les bases conceptuelles pour tout le travail ultérieur avec React.

Leçon 3 • Affichage de listes et de conditionnels

Couvre l'affichage de listes basé sur les clés et les motifs d'affichage conditionnel. Ce sont les techniques d'UI 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. Fait le lien entre JSX et le JavaScript dans lequel il est compilé.

Leçon 1 • Remontée 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 exige des mises à jour immuables et comment les appliquer aux objets et aux tableaux. Prévention des bogues courants causés par la 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 du formulaire.

Leçon 4 • Fondamentaux du hook useState

Explique l'initialisation de l'état, la fonction setter 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 mémoire dans les composants à longue durée de vie.

Leçon 2 • Mécanismes du hook 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

Fait correspondre componentDidMount, componentDidUpdate et componentWillUnmount à leurs équivalents useEffect. Prépare les étudiants à lire les bases de code héritées.

Leçon 4 • Comprendre les effets de bord

Définit les effets de bord 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émoïsation des valeurs et des fonctions pour éviter les recalculs et les nouveaux rendus inutiles. Introduit la réflexion sur l'optimisation des performances.

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

Enseigne la création et la consommation de contextes pour éviter le prop drilling. Fait le lien avec les modèles d'état globaux présentés dans le chapitre sur la gestion d'état.

Leçon 3 • useReducer pour l'état complexe

Présente le modèle de réducteur pour gérer la logique d'état avec plusieurs actions. Prépare les étudiants à la réflexion de type 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 entre les rendus. Permet la gestion du focus, les animations et l'intégration de bibliothèques tierces.

Leçon 1 • Navigation et liens

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

Leçon 2 • Configuration et bases de React Router

Couvre BrowserRouter, Routes et le composant 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 layouts

Explique les arbres de routes imbriqués et le composant Outlet pour les layouts partagés. Réduit la duplication de layout 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 ensemble les connaissances sur les contextes et le routage dans un modèle réaliste.

Leçon 1 • Fondamentaux de Redux Toolkit

Présente le store, les slices et les reducers de Redux Toolkit comme l'approche moderne de Redux. Remplace les modèles Redux classiques riches en code répétitif.

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

Compare l'état local, Context, Redux et Zustand en fonction de la complexité et du cas d'utilisation. Donne aux étudiants les moyens de prendre des décisions architecturales sur des projets réels.

Leçon 3 • API Context à grande échelle

Étend les modèles useContext à l'état à l'échelle de l'application avec des contextes multiples et des optimisations de performances. Couvre les cas où Context est suffisant.

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

Couvre les hooks useSelector et useDispatch pour l'interaction du composant avec le store. Permet aux composants de lire des slices et de dispatcher 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 développement complet.

Leçon 2 • Techniques d'optimisation des performances

Couvre React.memo, le chargement paresseux et le fractionnement du code pour réduire la taille du bundle et le coût du rendu. Améliore directement les performances perçues 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 UI de secours pour éviter les crashs complets de l'application. Ajoute de la résilience en production aux arbres de composants.