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, optimiser les performances, contexte partagé, découpage de code, immuabilité des données, Redux, suspense, mode concurrent et bien plus.

Nous avons même une démo sur comment créer une application téléphonique en utilisant React.

Jour 1

Maîtrisez la plateforme
1. Patrons architecture React Nouveau
  • Séparation des responsabilités dans vos composants
  • Composants d’ordre supérieur (higher-order components)
  • Props de rendu (render props)
  • Hooks personnalisés (custom hooks)
  • Réutilisation des composantes
2. Contexte Nouveau
  • Pourquoi utiliser un contexte?
  • Pourquoi utiliser un contexte?
  • Créer un contexte avec createContext()
  • Utiliser des fournisseurs et des consommateurs (providers and consumers)
  • Mettre à jour le contexte
3. Gestion de l’État avec Redux 
  • Introduction à Flux et à Redux
  • Stockage
  • Actions
  • Réducteurs (reducers)
  • Utilisation des Hooks avec Redux
4. Utiliser Redux avec des appels asynchrones 
  • Utiliser le middleware de Redux
  • Utiliser Redux-Thunk
  • Utiliser Redux dev tools
  • Utiliser Fetch() avec Redux
5. Redux Toolkit Nouveau
  • Simplifiez le stockage avec configureStore()
  • Générez vos réducteurs et actions grâce aux slices
  • Écrivez des modifications immuables, en utilisant immer
  • Filtrez vos données avec des sélecteurs

Jour 2

Maîtrisez la plateforme
6. Optimiser les performances de React Nouveau
  • Livrer en mode « production »
  • Éviter la réconciliation
  • ShouldComponentUpdate()
  • Composants purs
  • Memoïsation de composants avec memo()
7. Suspense Nouveau
  • Suspense, un composant pour le chargement
  • Suspense avec le découpage dynamique de code
  • Suspense pour la récupération de données
  • Patron Render-as-you-fetch
8. Transitions Nouveau
  • Transitions de Suspense
  • 3 étapes du chrgement
  • Hooks personnalisés (custom hooks)
  • Valeur en différé
  • SuspenseList
9. Mode Concurrent Nouveau
  • Activer le mode concurrent
  • Mode Concurrent
  • Mode bloquant
  • Mode historique
10. Technologies additionnelles 
  • Présentation de React Native : développement d’applications mobiles avec React
  • Présentation de React Ionic : développement d’applications mobiles avec le DOM