Formation React Avancé

Leçon 1 • Composants fonctionnels et props

Définissez des composants fonctionnels réutilisables et transmettez des données via les props. Présente le modèle de composant qui sous-tend toute l'architecture React.

Leçon 2 • Gestion d'état avec useState

Gérez l'état local d'un composant à l'aide du hook useState et déclenchez des re-rendus lors des changements. Fournit la couche de données réactive pour les interfaces utilisateur interactives.

Leçon 3 • Gestion des événements dans React

Attachez des gestionnaires d'événements synthétiques aux éléments JSX et gérez les interactions utilisateur. Fait le pont entre les actions utilisateur et les changements d'état introduits dans la section précédente.

Leçon 4 • Syntaxe JSX et principes de base du rendu

Comprenez JSX comme un sucre syntaxique pour React.createElement et comment le DOM virtuel effectue le rendu de l'interface utilisateur. Relie la logique JavaScript au balisage déclaratif.

Leçon 1 • Comprendre le hook useEffect

Exécutez des effets de bord après les rendus et contrôlez l'exécution avec un tableau de dépendances. Remplace componentDidMount, componentDidUpdate et componentWillUnmount.

Leçon 2 • useReducer pour la logique d'état complexe

Gérez les transitions d'état à plusieurs actions avec une fonction réductrice et le modèle de distribution. Prépare les étudiants à la réflexion de type Redux introduite plus tard.

Leçon 3 • Optimisation avec useCallback et useMemo

Mémoïsez des fonctions et des valeurs calculées pour éviter les re-rendus inutiles. Améliore directement les performances dans les arbres de composants construits dans les chapitres précédents.

Leçon 4 • useRef pour l'accès au DOM et la persistance

Stockez des valeurs mutables et accédez aux nœuds DOM sans déclencher de re-rendus avec useRef. Complète useState pour les besoins de données non réactifs.

Leçon 1 • Stratégies de composition de composants

Privilégiez la composition à l'héritage pour construire des interfaces utilisateur flexibles à partir de petits composants ciblés. Renforce le principe de responsabilité unique dans React.

Leçon 2 • API Context pour les préoccupations transversales

Fournissez des valeurs globales telles que les thèmes et les paramètres régionaux sans perçage de props à l'aide de l'API Context. Fait le pont entre l'état local du chapitre 1 et l'état à l'échelle de l'application.

Leçon 3 • Props de rendu et composants d'ordre supérieur

Injectez un comportement via des props de rendu et des HOC pour étendre la fonctionnalité des composants sans héritage. Contraste avec les hooks pour montrer les approches historiques et actuelles.

Leçon 4 • Limites d'erreur et interface utilisateur de repli

Interceptez les erreurs d'exécution dans les arbres de composants avec des limites d'erreur et affichez des solutions de repli élégantes. Ajoute de la résilience en production aux modèles abordés dans ce chapitre.

Leçon 1 • Configuration de React Router et navigation de base

Installez React Router, configurez BrowserRouter et définissez les éléments Route et Link. Établit les fondations de la navigation pour tous les sujets de routage suivants.

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

Extrayez les paramètres d'URL et les chaînes de requête pour afficher des pages basées sur des données. Relie le routage aux modèles de récupération de données du chapitre 2.

Leçon 3 • Fractionnement de code et chargement paresseux des routes

Chargez les composants de route à la demande avec React.lazy et Suspense pour réduire la taille du bundle initial. Améliore directement les performances des grandes SPA.

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

Redirigez les utilisateurs non authentifiés loin des routes privées à l'aide de composants d'encapsulation. Introduit la gestion de l'état d'authentification qui alimente le chapitre sur l'état à venir.

Leçon 1 • Sélecteurs et état dérivé

Dérivez et mémoïsez l'état calculé avec createSelector pour garder les composants découplés de la forme du store. Applique les concepts de useMemo du chapitre 2 au niveau du store.

Leçon 2 • Création de slices avec createSlice

Générez des réducteurs et des créateurs d'actions à partir d'une seule définition de slice à l'aide de mutations basées sur Immer. Élimine le code standard des modèles Redux traditionnels.

Leçon 3 • RTK Query pour la récupération de données

Remplacez les thunks manuels par les hooks auto-générés de RTK Query pour la mise en cache, l'interrogation et l'invalidation. Rationalise la gestion de l'état côté serveur dans les applications Redux.

Leçon 4 • Concepts principaux de Redux et configuration du store

Comprenez les actions, les réducteurs et le store, puis configurez-en un avec configureStore de Redux Toolkit. S'appuie sur le modèle de réducteur introduit au chapitre 2.

Leçon 1 • Optimisation du bundle et élagage d'arbre

Réduisez la charge utile JavaScript grâce à l'élagage d'arbre, aux importations dynamiques et à l'audit des dépendances. Complète les techniques de fractionnement de code du routage du chapitre 4.

Leçon 2 • Virtualisation pour les grandes listes

Affichez uniquement les lignes visibles dans les grands ensembles de données en utilisant des bibliothèques de fenêtrage pour réduire le nombre de nœuds DOM. Résout un goulot d'étranglement de performance courant dans les interfaces utilisateur riches en données.

Leçon 3 • Fonctionnalités concurrentes et transitions

Utilisez les fonctionnalités concurrentes de React 18 — useTransition et useDeferredValue — pour garder les interfaces utilisateur réactives lors des mises à jour lourdes. Représente la frontière actuelle du rendu React.

Leçon 4 • Profilage des applications React

Utilisez le profileur des DevTools React et les outils de performance du navigateur pour localiser les rendus lents. Établit une approche axée sur la mesure avant d'appliquer toute optimisation.

Leçon 1 • Simulation d'API et test asynchrone

Interceptez les requêtes réseau avec Mock Service Worker et testez les transitions d'état asynchrones. Valide les modèles de récupération de données construits aux chapitres 2 et 5.

Leçon 2 • Test des composants connectés à Redux

Effectuez le rendu de composants à l'intérieur d'un store Redux réel ou simulé et vérifiez les actions distribuées. Lie directement le test à l'architecture Redux du chapitre 5.

Leçon 3 • Test des composants avec React Testing Library

Interrogez, interagissez avec et vérifiez les composants rendus à l'aide de requêtes accessibles. Encourage le test du point de vue de l'utilisateur plutôt que des détails d'implémentation.

Leçon 4 • Philosophie de test et configuration des outils

Comprenez la pyramide des tests et configurez Jest avec React Testing Library. Définissez la stratégie de test appliquée tout au long de ce chapitre.

Leçon 1 • Accessibilité dans les applications React

Implémentez les attributs ARIA, la navigation au clavier et la gestion du focus pour répondre aux normes d'accessibilité. Garantissez que les modèles de composants du chapitre 3 sont inclusifs par défaut.

Leçon 2 • Rendu côté serveur et génération statique

Pré-rendu des composants React sur le serveur avec Next.js pour améliorer le référencement et le temps de chargement initial. Étendez le routage côté client du chapitre 4 à un modèle full-stack.

Leçon 3 • Bonnes pratiques de sécurité dans React

Empêchez les XSS, CSRF et l'exposition de données non sécurisées en appliquant des mesures de sécurité Web générales et spécifiques à React. Protégez les couches d'authentification et de données construites dans les chapitres précédents.

Leçon 4 • Pipelines CI/CD et de déploiement

Automatisez les tests, la construction et le déploiement des applications React via un pipeline CI/CD. Opérationnalisez la suite de tests du chapitre 7 en un processus de publication reproductible.