Formation React et concepts avancés

Leçon 1 • Composants fonctionnels et accessoires (props)

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

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

Gérez l'état local des composants à l'aide du crochet useState et déclenchez les nouvelles mises en rendu 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

Rattachez 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 présentés dans la section précédente.

Leçon 4 • Syntaxe JSX et bases du rendu

Comprenez JSX comme sucre syntaxique au-dessus de 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 crochet useEffect

Exécutez des effets secondaires après les rendus et contrôlez l'exécution à l'aide d'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 multi-actions à l'aide d'une fonction réductrice et d'un patron de distribution. Prépare les étudiants à la pensée de style Redux présentée plus tard.

Leçon 3 • rendement

Mémorisez des fonctions et des valeurs calculées pour éviter les rendus inutiles. Améliore directement le rendement dans les arbres de composants créés 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 rendus à l'aide de useRef. Complète useState pour les besoins de données non réactives.

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

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

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

Fournissez des valeurs globales telles que les thèmes et la locale sans forage d'accessoires à l'aide de l'API de contexte. Fait le pont entre l'état local du chapitre 1 et l'état à l'échelle de l'application.

Leçon 3 • Accessoires de rendu (Render Props) et composants d'ordre supérieur (HOC)

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

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

Rattrapez les erreurs d'exécution dans les arbres de composants avec des limites d'erreur et affichez des replis élégants. Ajoute de la résilience de production aux patrons couverts 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 la base de 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 pilotées par les données. Relie le routage aux patrons 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 initiale du paquet. Cela améliore directement le rendement pour les grandes applications à page unique.

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 encapsulants. 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émorisez l'état calculé avec createSelector pour garder les composants découplés de la forme du magasin. Applique les concepts de useMemo du chapitre 2 au niveau du magasin.

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

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

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

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

Leçon 4 • Concepts fondamentaux de Redux et configuration du magasin

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

Leçon 1 • Optimisation du lot et élagueur d'arbre (tree shaking)

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

Leçon 2 • Rendement

N'affichez que les lignes visibles dans les grands ensembles de données à l'aide de bibliothèques de fenêtrage pour réduire le nombre de nœuds DOM. Résout un goulot d'étranglement de rendement 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 pendant les mises à jour lourdes. Représente la frontière actuelle du rendu React.

Leçon 4 • Profilage d'applications React

Utilisez le Profileur React DevTools et les outils de rendement du navigateur pour localiser les rendus lents. Établit une approche de mesure avant 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 patrons de récupération de données construits aux chapitres 2 et 5.

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

Rendez les composants à l'intérieur d'un magasin Redux réel ou simulé et vérifiez les actions distribuées. Relie le test directement à l'architecture Redux du chapitre 5.

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

Interrogez, interagissez 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 de test et configurez Jest avec React Testing Library. Encadre 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é. Garantit que les patrons de composants du chapitre 3 sont inclusifs par défaut.

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

Pré-affichez les composants React sur le serveur avec Next.js pour améliorer le référencement (SEO) et le temps de chargement initial. Étend le routage côté client du chapitre 4 à un modèle complet (full-stack).

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

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

Leçon 4 • Pipelines d'intégration continue et de déploiement continu (CI/CD)

Automatisez le test, la construction et le déploiement d'applications React via un pipeline d'intégration continue et de déploiement continu. Opérationnalise la suite de tests du chapitre 7 en un processus de version répétable.