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 les 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 codebases 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 bundlers. Permet directement l'organisation des fichiers de composants dans les projets React.

Leçon 1 • Configuration d'un Projet React

Parcourt le scaffolding de 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 • Ce qu'est React et Pourquoi

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 • Rendu de Listes et de Conditionnelles

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

Leçon 4 • Syntaxe JSX et Règles

Couvre la transpilation JSX, l'incorporation d'expressions et les règles spécifiques au JSX comme className et les balises auto-fermantes. Relie le JSX au JavaScript qu'il compile.

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évient les 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 gestion de soumission fiables des formulaires.

Leçon 4 • Fondamentaux du Hook useState

Explique l'initialisation de l'état, la fonction setter et les déclencheurs de re-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 temporisations. Prévient les fuites mémoire dans les composants à longue durée de vie.

Leçon 2 • Mécanique du Hook useEffect

Couvre la syntaxe de l'effet, le tableau de dépendances et le timing 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 avec useEffect. Prépare les étudiants à lire des codebases legacy.

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 la nécessité de useEffect.

Leçon 1 • useMemo et useCallback

Explique la mémorisation des valeurs et des fonctions pour éviter les recalculs et les re-rendus inutiles. Introduit une 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 contexte pour éviter le prop drilling. Relie aux motifs d'état global introduits dans le chapitre sur la gestion d'état.

Leçon 3 • useReducer pour l'État Complexe

Introduit le motif de réducteur pour gérer une logique d'état avec plusieurs actions. 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 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 et Bases de React Router

Couvre BrowserRouter, Routes et les composants 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 Route imbriqués et le composant Outlet pour les layouts partagés. Réduit la duplication de layout entre les pages liées.

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 • Fondamentaux de Redux Toolkit

Présente le store, les slices et les reducers de Redux Toolkit comme l'approche moderne de Redux. Remplace les motifs classiques de Redux lourds en boilerplate.

Leçon 2 • Choix de la Bonne Solution d'État

Compare l'état local, Context, Redux et Zustand par complexité et 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 de useContext à l'état à l'échelle de l'application avec plusieurs contextes et des optimisations de performance. 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 au niveau 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 des environnements et le déploiement sur des plateformes d'hébergement statiques. Complète le cycle de vie complet du développement.

Leçon 2 • Techniques d'Optimisation des Performances

Couvre React.memo, le chargement différé et le code splitting pour réduire la taille du bundle et le coût de rendu. Améliore directement la performance perçue 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 repli pour empêcher les crashes complets de l'application. Ajoute de la résilience de production aux arbres de composants.