Formation ReactJS - Fonctionnalités avancées

  • 2 jours (14 heures)
  • Perfectionnement
  • Présentiel ou classe à distance

Une formation proposée par

Télécharger le programme

Objectifs

A l'issue de cette formation, vous serez capable de :

  • Mettre en oeuvre Redux Toolkit et migrer / refondre une base Redux existante
  • Utiliser TanStack Query (ex React Query) pour récupérer, mettre en cache et synchroniser des données d'API
  • Mettre en place une PWA (manifest, service worker) et comprendre les stratégies hors-ligne
  • Identifier et résoudre les causes courantes de lenteurs (profiling, mémoïsation, chargement à la demande)
  • Ecrire des tests plus avancés (asynchrones, mocks, simulation d'API)
  • Comprendre les principes de passage REST > GraphQL et intégrer un client (repères Apollo)
  • Mobiliser des notions avancées : Context / Providers, Portals, Error Boundaries, Suspense / lazy
  • Structurer une application React "prête pour la production" (architecture, conventions).
Les compétences visées par cette formation font l'objet d'une évaluation.

À qui s'adresse cette formation ?

Développeurs.

Pré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 une pratique de React (composants, hooks, routing).

Programme

1 Pendant votre formation

ReactJS - Fonctionnalités avancées

Jour 1 - Matin

Redux Toolkit

  • Pourquoi Redux Toolkit : simplification, standardisation, réduction du "boilerplate"
  • configureStore et organisation du store (découpage en slices)
  • createSlice : actions et reducers, repères sur l'immutabilité via Immer
  • createAsyncThunk : appels asynchrones et gestion des états (chargement / erreur)
  • Patterns d'utilisation : useSelector / useDispatch

TanStack Query (ex React Query)

  • Quand l'utiliser : "server state", cache, synchronisation et invalidation
  • Mise en place : QueryClient, Provider, DevTools (repères)
  • Queries : cache, staleTime, refetch, gestion d'erreurs
  • Mutations : invalidation et mises à jour optimistes (repères)
  • Comparatif rapide : RTK Query vs TanStack Query (choix pragmatiques)

Exemples de travaux pratiques (à titre indicatif)

  • Refonte d'un store Redux existant vers Redux Toolkit
  • Intégration de TanStack Query sur une API (liste, détail, mutation)

Jour 1 - Après-midi

PWA avec React

  • Rappels : manifest, installation, mode hors-ligne et cache
  • Service worker : principes, cycle de vie et points de vigilance
  • Stratégies de cache (repères) et mise à jour d'une PWA
  • Intégration pratique avec une base Vite (plugin PWA / Workbox - repères)

Performance et optimisation

  • Identifier les re-renders (React DevTools Profiler) et causes fréquentes
  • Mémoïsation : useMemo / useCallback / React.memo (quand et pourquoi)
  • Découpage du code : lazy, import dynamique, chargement à la demande (repères)
  • Gestion des listes et rendu conditionnel : petits pièges classiques

Exemples de travaux pratiques (à titre indicatif)

  • Mesurer une lenteur, proposer une correction et la valider par profilage
  • Mettre en place du chargement à la demande sur une fonctionnalité

Jour 2 - Matin

Tests avancés

  • Rappels d'outils : Testing Library et Vitest / Jest (selon contexte)
  • Tests asynchrones : attente, timers, promesses (repères)
  • Mocks et stubs : isoler une dépendance (repères)
  • Mock d'API : MSW (Mock Service Worker) pour des scénarios réalistes
  • Approche "intégration légère" : tester un flux utilisateur simple

Exemples de travaux pratiques (à titre indicatif)

  • Ecrire un test asynchrone avec mock d'API (MSW)
  • Tester un flux de formulaire (saisie > validation > envoi)

Jour 2 - Après-midi

GraphQL (repères) et intégration

  • REST vs GraphQL : bénéfices, coûts et cas d'usage
  • Notions : schéma, requêtes, mutations, pagination (repères)
  • Intégration client : Apollo (repères) et patterns d'utilisation

Notions React avancées

  • Context / Providers : quand l'utiliser vs état centralisé (repères)
  • Portals : modales, overlays et contraintes d'accessibilité (repères)
  • Error Boundaries : capter et isoler les erreurs d'UI (repères)
  • Suspense / lazy : gestion du chargement et UX (repères)
  • Atelier de synthèse : architecture, conventions, dossiers, responsabilités

Exemples de travaux pratiques (à titre indicatif)

  • Intégrer une petite couche GraphQL (liste / détail) ou adapter un client existant
  • Revue d'architecture : proposer une organisation de projet et des conventions

Financement

Plusieurs dispositifs de financement sont accessibles via les OPCO (Opérateurs de Compétences), organismes agréés par le ministère du Travail dont le rôle est d'accompagner, collecter et gérer les contributions des entreprises au titre du financement de la formation professionnelle.
Pour plus d'information, une équipe de gestionnaires SKOLAE Formation spécialisée vous accompagne dans le choix de vos formations et la gestion administrative.

Nous contacter pour en savoir plus

Points forts

Modalités pédagogiques

Formation délivrée en présentiel ou distanciel* (blended-learning, 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 certains 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 informatiques...) 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

Accessibilité aux personnes en situation de handicap

Dernière mise à jour : 19/10/2026

Sessions

ReactJS - Fonctionnalités avancées

2 jours (14 heures) Réf. JVSREA-AV

à partir de 1 450 € HT

Repas inclus en présentiel
Du 14 décembre au 15 décembre 2026 Paris La Défense
Places disponibles
S'inscrire
Du 11 mai au 12 mai 2027 Paris La Défense
Places disponibles
S'inscrire

Ces formations peuvent aussi vous intéresser