React avancé : état, données, performance et tests
Industrialiser une application React : Redux Toolkit, requêtes en cache, PWA, optimisation, tests et architecture.
- Durée
- 14 h · 2 jours
- Niveau
- Confirmé
- Format
- Présentiel · Distanciel · Mixte
- Effectif max.
- 12 participants
Présentation
Ce programme s’adresse aux développeurs qui maîtrisent déjà React et veulent passer au niveau supérieur : gestion d’état à grande échelle, récupération et mise en cache des données, application hors ligne, optimisation des performances et tests avancés. On termine par un atelier d’architecture pour structurer une application prête pour la production.
À qui s’adresse ce programme
- Développeurs React confirmés
- Lead developers et architectes front-end
- Équipes qui préparent une application React pour la production
Prérequis
- Pratique de React : composants, hooks, routage
- Très bonne connaissance de JavaScript
Objectifs pédagogiques
- Gérer l’état global avec Redux Toolkit
- Gérer cache et synchronisation des données avec TanStack Query
- Rendre une application installable et utilisable hors ligne
- Mesurer et corriger les problèmes de performance
- Écrire des tests asynchrones avec mocks et API simulées
- Comprendre le passage de REST à GraphQL
- Structurer une application React pour la production
Programme détaillé
4 modules · 14 h · 2 jours
Gestion d’état avec Redux Toolkit
- Quand utiliser un état global
- Slices, reducers et actions
- Actions asynchrones
- Migrer un Redux existant
- Sélecteurs et bonnes pratiques
Gérer un panier partagé entre plusieurs écrans.
Données serveur : requêtes, cache et synchronisation
- Distinguer état client et état serveur
- Requêtes, mutations et invalidation du cache
- Pagination et chargement infini
- Gestion des erreurs et des états de chargement
- Mises à jour optimistes
Remplacer des appels manuels par une couche de requêtes en cache.
PWA, performance et tests avancés
- Rendre une application installable et hors ligne
- Mesurer avec les outils de profilage
- Mémoïsation, découpage du code et chargement différé
- Tests asynchrones, mocks et API simulées
- Tests d’intégration de parcours
Identifier et corriger trois goulots de performance.
GraphQL, notions avancées et architecture
- De REST à GraphQL : principes et client
- Context, portals, error boundaries et suspense
- Organisation des dossiers et conventions
- Découpage par fonctionnalités
- Check-list de mise en production
Revoir l’architecture d’une application existante et proposer un plan d’amélioration.
Outils et technologies
Méthodes pédagogiques
- Alternance d’exposés courts et de travaux pratiques
- Démonstrations en direct par le formateur
- Projet fil rouge construit au fil des modules
- Corrections collectives et échanges sur les bonnes pratiques
Évaluation
- Exercices pratiques corrigés à chaque module
- Mini-projet réalisé en fin de formation
- Quiz de validation des acquis
Matériel requis
- Un ordinateur avec une connexion internet
- Un éditeur de code et Node.js installés
Ressources fournies
- Support de cours et dépôt d’exercices corrigés
Débouchés
- Une application plus rapide et mieux testée
- Une architecture de projet réutilisable
- Des critères pour choisir ses outils d’état et de données
Les cours vidéo associés
Mes cours en vidéo qui accompagnent ce programme : pour préparer la formation ou réviser ensuite. Accès gratuit avec un compte.
