Objectifs pédagogiques
- Mettre en oeuvre Redux Toolkit et refondre une application Redux existante en utilisant Redux Toolkit
- Utiliser React Query et l'intégrer dans une application pour récupérer et gérer les données d'une API
- Gérer des PWA (Progressive Web Apps) avec React
- Mémoïser et optimiser des performances avec React
- Ecrire des tests avancés pour une application React
- Migrer une application React utilisant REST vers GraphQL
- Reconnaître les notions avancées telles que la gestion des contextes et des providers
- Utiliser Portals pour le rendu de modales et tooltips
- Gérer les erreurs avec les composants "Error Boundary"
- Mettre en oeuvre les notions avancées dans une application React.
Modalités et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour les cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2i, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatique...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
Niveau requis
Avoir suivi la formation JVS-REA "ReactJS - Développement d'applications Web" ou avoir les connaissances équivalentes. Avoir une très bonne connaissance de JavaScript et de ses aspects avancés.
Public concerné
Dévelopeurs.
Programme
Jour 1
Redux Toolkit
- Présentation de Redux Toolkit et ses avantages
- CreateStore et configureStore
- CreateAction et createSlice
- CreateAsyncThunk pour la gestion des actions asynchrones
- UseSelector et useDispatch
Exemple de travaux pratiques (à titre indicatif)
- Refonte d'une application Redux existante en utilisant Redux Toolkit
React Query
- Introduction à React Query et ses avantages
- Installation et configuration de base
- Fetching, caching et synchronisation automatique des données
- Pagination et chargement infini
- Mutation et gestion des erreurs
Exemple de travaux pratiques (à titre indicatif)
- Intégration de React Query dans une application pour récupérer et gérer les données d'une API
PWA avec React
- Comprendre les PWA et leurs avantages
- Créer une PWA avec Create React App
- Utilisation des Services Workers
- Ajout d'un manifeste d'application Web
- Mise en cache des ressources et stratégies de mise en cache
Exemple de travaux pratiques (à titre indicatif)
- Transformation d'une application React en PWA
Mémoïsation et optimisation des performances
- Comprendre la mémoïsation et son importance
- Utilisation de React.memo pour les composants fonctionnels
- UseMemo et useCallback pour les hooks
- Analyse des performances avec les outils de développement
- Code Splitting et lazy loading avec React.lazy et Suspense
Exemple de travaux pratiques (à titre indicatif)
- Optimisation des performances d'une application React en utilisant la mémoïsation et le Code Splitting
Jour 2
Tests avancés
- Tests des composants utilisant Redux et React Query
- Mocking des API et des stores
- Tests des hooks personnalisés
- Tests d'intégration
Exemple de travaux pratiques (à titre indicatif)
- Ecriture de tests avancés pour une application React
Passer de REST à GraphQL
- Introduction à GraphQL et ses avantages
- Installation et configuration d'Apollo Client
- Requêtes et mutations avec GraphQL
- Gestion du cache avec Apollo Client
- Pagination et chargement infini
Exemple de travaux pratiques (à titre indicatif)
- Migration d'une application React utilisant REST vers GraphQL
Notions avancées supplémentaires
- Gestion des contextes et des providers
- Utilisation de Portals pour le rendu de modales et tooltips
- Gérer les erreurs avec les composants "Error Boundary"
Exemple de travaux pratiques (à titre indicatif)
- Mise en oeuvre des notions avancées dans une application React
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation et/ou un examen M2i
