React avancé

Modifié le: 2024-02-27

Auditoire

Développeurs

Durée

2 jours

Description

Maintenant que vous maîtrisez les fondements de React, vous êtes prêts à coder au niveau supérieur. Nous couvrons les sujets plus avancés, incluant: patrons d'architecture en React, Hooks personalisés, props de rendu, composants d’ordre supérieur, optimisation des performances, contexte partagé, découpage de code, patron réducteur, React Server Components, Suspense, Next.js, Remix, sécurité et bien plus.

Nous couvrons aussi l'utilisation de composants avancés, tels que les graphiques et les cartes.

Contenu du cours

Contexte

• Forage de propriétés (property drilling)
• Qu'est-ce qu'un contexte?
• Création de contexte avec createContext()
• Utilisation de providers
• Consommer le contexte avec des hooks
• Mettre à jour le contexte

Effets et useEffect()

• Synchroniser des systèmes externes avec les Effets
• Rendre le rendu des composants purs
• Fonction de Cleanup
• Cycle de vie des Effets

Patrons d'architecture React

• Séparation des responsabilités dans nos composants
• Composants d'ordre supérieur (Higher-Order component)
• Props de Rendu (Render Props)
• Hooks personnalisés
• Réutiliser les composants

Patron réducteur (reducer)

• Remplacer l'état par des reducers
• Piliers: Storage, Dispatch, Reducer
• Générateurs d'action
• Appeler useReducer()
• Permettre les mutations avec "immer"

TanStack Query

• Requêtes, déduplication, caching
• Fetch des données
• Mises à jour
• Plugins

Optimiser les performances

• Utiliser la compilation en mode production
• Éviter les re-rendus additionnels
• Memoriser les composants avec le composant d'ordre supérieur memo()
• Appliquer useCallback() pour améliorer la performance des callback
• Appliquer useMemo() pour mémoriser les résultats

Gestion des erreurs et gestion de l'affichage avec Suspense

• Gérer les erreurs avec les ErrorBoundaries
• Utiliser le Suspense pour le chargement de code
• Utiliser le Suspense pour le chargement de données

React Server Components (RSC)

• Architecture de RSC
• Composants Server vs. Composants Clients
• Frontière Client
• Découpage serveur-client
• Données asynchrone et Suspense

React 19

• Actions et Formulaires
• Transitions et animations
• Métadonnées
• Directives "use client" et "use server"

Interfaces utilisateur avancées

• Animer les transitions avec React-Spring
• Générer graphiques avec Chart.js
• Ajouter des cartes via Leaflet et ESRI

Logins et identité

• Gestion d'identité avec React
• Implanter un formulaire Login et un bouton logout
• Stocker et gérer les identifiants
• Protéger les routes et les composants
• JSON Web Tokens (JWT)
• Comprendre et prévenir les vulnérabilités de sécurité