Comprendre les concepts avancés de React
- Développement
- Développement web
Formation React.JS Avancé
Objectifs
A l’issue de la formation, l’apprenant sera capable de :
Comprendre les concepts avancés de React
Comprendre les concepts avancés de React
Optimiser les performances des applications et l’expérience utilisateur
Améliorer la qualité du code produit
Intégrer les différentes librairies externes incontournables
Certification
Prérequis
Une première expérience concrète avec React et Redux
Un entretien en amont avec notre expert permet de prendre en compte le profil de chaque participant (niveau, objectifs et résultats attendus, contexte professionnel, enjeux…) et d’adapter le contenu de la formation si besoin
Cette formation ne peut être financée que dans le cadre d’un projet d’entreprise (prise en charge entreprise ou OPCO). Les dossiers à financement personnel et CPF ne sont pas pris en compte.
Public
Développeurs Web
Formation(s) associée(s)
- Formation Développer des applications avec React.js et Redux
- Formation développement Front End React.js niveau 2
- TRAINING MERN STACK
- Cursus de formation de Symfony à ReactJs/Redux
- Formation devenez un développeur Full Stack avec React.js et Node.js
- Formation Firebase avec React.js
- Formation Développer des applications avec React.js, Redux et Zustand
- Formation NextJS 15
Dernière mise à jour
Programme mis à jour le 10 février 2025
Bon à savoir
Evaluez votre niveau
Pour vous aider à bien choisir votre formation, nous vous proposons soit un entretien avec le formateur soit un test d’évaluation. Cela vous assurera que vous disposez des connaissances nécessaires pour suivre la formation dans des conditions optimales.
Sessions garanties
La majorité de nos sessions proposées en distanciel sont garanties. Elles peuvent être enregistrées à la demande.
Travaux pratiques
Nos formations comprennent de nombreux travaux pratiques pour un meilleur apprentissage (60 % de pratique). Nous proposons également de travailler sur vos données pour une meilleure expérience.
Les Modules
de formation
Module1
INTRODUCTION AVANCEE ET NOUVEAUTES DE REACT
● Environnement et structure du projet
● Nouvelles fonctionnalités de React (18+)
○ Rendu concurrent et Suspense amélioré
○ React Server Components
○ React Compiler et ses implications
● Mise en place d’une architecture robuste
● Introduction à SWC et esbuild (remplacement de Babel)
● Structuration modulaire et scalable
Travaux pratiques
● Mise en place d’un projet avec Vite et SWC
● Structuration avancée du projet fil rouge
Module2
TYPESCRIPT AVANCÉ AVEC REACT
● Typage avancé des composants et hooks
○ Génériques, types conditionnels, mapped types
○ Utilisation des interfaces et types complexes
● Organisation modulaire du code TypeScript
● Patterns avancés avec TypeScript
Travaux pratiques
● Refactoring d’une base de code JavaScript vers TypeScript
● Développement de composants complexes typés
Module3
GESTION D’ÉTAT AVANCÉE
● Introduction à Zustand pour la gestion d’état globale
● TanStack Query : gestion avancée des données asynchrones
○ Gestion du cache, invalidation, actualisation des données
● Redux Toolkit : usages avancés et comparaison
○ Modularisation, middleware, et selectors
● Patterns avancés de gestion d’état
Travaux pratiques
● Mise en place d’un état global avec Zustand
● Intégration de TanStack Query dans une application complexe
Module4
OPTIMISATION DES PERFORMANCES
● Analyse et optimisation du cycle de vie avec React
○ Fonctionnement interne et algorithme de réconciliation
● Techniques avancées :
○ Memoization avec useMemo et useCallback
○ Optimisation des re-rendus
● Suspense pour les données asynchrones
● Code splitting et lazy loading
Travaux pratiques
● Utilisation avancée de React Profiler
● Implémentation de Suspense dans le projet fil rouge
Module5
TESTS ET STRATÉGIES DE QUALITÉ LOGICIELLE
● Mise en place d’une stratégie complète de tests
● Tests unitaires et d’intégration avancés avec Vitest et React Testing Library
● Développement orienté composants avec Storybook
● Mocking d’API avec Mock Service Worker (MSW)
● Tests de mutation avec Stryker
Travaux pratiques
● Création d’histoires interactives avec Storybook
● Écriture de tests avancés avec MSW et couverture via Stryker
Module6
PATTERNS AVANCÉS ET BONNES PRATIQUES
● Render Props et Higher-Order Components (HOC)
● Hooks personnalisés pour la réutilisation de logique complexe
● Gestion avancée avec Contexts et Injection de dépendances
● Utilisation de Portals et gestion du DOM distant
● Gestion des erreurs avec Error Boundaries
Travaux pratiques
● Implémentation de patterns avancés dans le projet fil rouge
● Création de Hooks réutilisables et gestion dynamique des erreurs
Module7
TECHNOLOGIES MODERNES ET OUTILS AUTOUR DE REACT
● Vite : bundling avancé et optimisations
● SWC/esbuild : accélération du processus de transpilation
● Introduction au React Compiler
● Déploiement avancé avec CI/CD
○ Intégration avec GitHub Actions ou GitLab CI
● Monitoring des performances en production
Travaux pratiques
● Configuration d’un pipeline CI/CD complet
● Migration d’un projet existant vers Vite et SWC
Module8
ACCESSIBILITÉ (A11Y) ET INTERNATIONALISATION (I18N)
● Standards WCAG et rôles ARIA
● Outils d’audit d’accessibilité (axe-core)
● Gestion des locales et ressources dynamiques avec i18next
● Changement de langue dynamique dans une application React
Travaux pratiques
● Audit et correction de l’accessibilité dans le projet fil rouge
● Mise en place de l’internationalisation avec des ressources asynchrones
Module9
GESTION AVANCÉE DES DONNÉES
● GraphQL et Apollo Client
○ Requêtes avancées et gestion du cache
● Intégration avec des services externes en temps réel
○ Firebase, Supabase, ou autres services modernes
● Stratégies de récupération et de synchronisation de données
Travaux pratiques
● Ajout d’une intégration GraphQL dans le projet fil rouge
● Gestion dynamique des données en temps réel
Module10
DÉPLOIEMENT ET OPTIMISATION EN PRODUCTION
● Optimisation des builds pour la production
○ Minification, tree-shaking, et analyse des bundles
● Stratégies avancées de déploiement (Vercel, Netlify, Docker)
● Monitoring avec Sentry et gestion des erreurs en production
Travaux pratiques
● Déploiement final du projet fil rouge avec monitoring actif
● Mise en place d’un pipeline complet pour les builds et déploiements
Les prochaines
sessions de formation
Sur demande
Vous souhaitez organiser cette formation à une date spécifique ?Contactez-nous en remplissant le formulaire ci-dessous
02 juin 2025
04 août 2025
06 octobre 2025
24 novembre 2025