React
Academy

Plan de cours

React Avancé

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, Redux, 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.

Jour 1

Maîtrisez la plateforme
1. 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
2. Patrons architecture React 
  • Séparation des responsabilités dans nos composants
  • Composants d’ordre supérieur (higher-order components)
  • Props de rendu (render props)
  • Hooks personnalisés (custom hooks)
  • Réutilisation des composantes
3. Patron Réducteur (reducer) Nouveau
  • Remplacer l'état par des reducers
  • Piliers: Storage, Dispatch, Reducer
  • Générateurs d'action
  • Appeler useReducer()
4. Toolkit Redux 
  • Utiliser configureStore() pour créer un store Redux
  • Générer des reducers et des actions avec des slices
  • Modifier l'état avec "immer"
  • Filter data with selectors
5. Récupérer des données avec Redux RTK Query Nouveau
  • Configurer le middleware pour activer le caching, l'invalidation, et le polling
  • Générer un consommateur d'API avec createApi()
  • Utiliser le Hook useQuery()
  • Ajouter une fonction baseQuery()

Jour 2

Maîtrisez la plateforme
6. Optimiser les performances Nouveau
  • Livrer 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
7. Délimiter les erreurs et 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
8. Logins et identité Nouveau
  • 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é
9. Comparer les Frameworks React Nouveau
  • _Create-React-App_ des applications de base
  • _Vite_ pour le développement moderne et rapide
  • _Gatsby_ pour la génération de site statique
  • _Next.js_ pour le rendu côté serveur
  • _Astro_ pour le rendu côté serveur sans le JS client.
  • _Remix_ pour le chargement de données et la mise en page via le routage
  • _Preact_ pour un React léger
10. Interfaces utilisateur avancées 
  • Animer les transitions avec React-Spring
  • Générer graphiques avec Chart.js
  • Ajouter des cartes via Leaflet et ESRI