Vous maîtrisez les bases de React et souhaitez aller plus loin ? Cette formation avancée aborde Redux Toolkit, React Query pour la gestion de cache API, les Progressive Web Apps et la migration vers GraphQL. Vous travaillerez aussi l’optimisation des performances avec la mémoisation et le code splitting, des compétences essentielles pour les applications React en production à grande échelle.
Public visé
Développeurs web avec compétences avancées cherchant à approfondir leur expertise React.
Prérequis
Avoir suivi cette formation, ou en maîtriser les thèmes abordés :
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Implémenter Redux Toolkit et refactoriser des applications Redux existantes
- Intégrer et utiliser React Query pour la gestion de données API
- Développer des Progressive Web Apps (PWA) avec React
- Optimiser les performances via les techniques de mémoisation
- Écrire des tests avancés pour les applications React
- Migrer des applications REST vers GraphQL
Programme
Jour 1 - Matin
Redux Toolkit
- Présentation de Redux Toolkit et ses avantages
- ConfigureStore (Redux Toolkit) vs createStore (Redux legacy)
- CreateAction et createSlice
- CreateAsyncThunk pour la gestion des actions asynchrones
- Hooks Redux : useSelector et useDispatch
- Alternatives légères à Redux pour la gestion d’état global
Travaux pratiques
- 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
Travaux pratiques
- Intégration de React Query dans une application pour récupérer et gérer les données d’une API
Jour 1 - Après-midi
PWA avec React
- Comprendre les PWA et leurs avantages
- Créer une PWA avec Vite (utilisation du plugin PWA)
- Utilisation des Services Workers
- Ajout d’un manifeste d’application Web
- Mise en cache des ressources et stratégies de mise en cache
Travaux pratiques
- Transformation d’une application React en PWA
Mémoïsation et optimisation des performances
- Comprendre la mémoïsation et son importance dans React
- Utilisation de React.memo pour éviter des rendus inutiles de composants fonctionnels
- Hooks de mémoïsation : useMemo et useCallback
- Analyse des performances d’une application avec les outils de développement (Profiler React, Timeline…)
- Code Splitting et chargement asynchrone avec React.lazy et (découpage du code en bundles)
- Utiliser pour le chargement de données
Travaux pratiques
- Optimisation des performances d’une application React en utilisant la mémoïsation et le Code Splitting
Jour 2 - Matin
Tests avancés
- Configuration d’un environnement de test avec Vitest (alternative moderne et rapide à Jest) et utilisation de React Testing Library victorbruce82.medium.com
- Tests des composants utilisant Redux Toolkit et React Query (vérification du state global et des requêtes asynchrones)
- Mocking des appels API et des stores (par exemple avec MSW pour simuler une API)
- Tests des hooks personnalisés
- Tests d’intégration (parcours utilisateur à travers plusieurs composants)
Travaux pratiques
- Ecriture de tests avancés pour une application React (tests de composants, du store Redux, des appels API…)
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
Travaux pratiques
- Migration d’une application React utilisant REST vers GraphQL
Jour 2 - Après-midi
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”
Travaux pratiques
- Mise en oeuvre des notions avancées dans une application React
Modalités d’évaluation des acquis
En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
Formation DEV-REACT-200 — ReactJS - Fonctionnalités avancées. Domaine : Développement. Niveau : Intermédiaire. Durée : 2 jours (14 heures). Mots-clés : react, javascript, frontend, redux-toolkit, graphql, pwa, perfectionnement. Cylian Formation, Dijon.