Formation ReactJS, Framework Meta pour applications web Mixed: In person / distance learning

Utilisé par des entreprises majeures comme Facebook pour la création d’interfaces dynamiques et réactives, React est aujourd’hui un pilier du développement web front-end. Cette formation avancée s’adresse aux développeurs souhaitant approfondir leur maîtrise de ReactJS et de son écosystème (Redux, Hooks, Server Side Rendering, etc.).

Durant trois jours, les participants apprendront à construire des interfaces complexes, à optimiser les performances de leurs applications, et à adopter des pratiques de développement robustes et durables.

• Approfondir les fondamentaux de React et adopter une approche déclarative
• Explorer les différentes stratégies de gestion d'état (Redux, Hooks, Context, etc.)
• Appliquer les principes de la programmation fonctionnelle dans React
• Optimiser les performances et comprendre les problématiques de rendu
• Concevoir des composants maintenables, réutilisables et stylisés
• Mettre en place le rendu côté serveur (Server Side Rendering)
• Intégrer des design systems et construire des interfaces responsives

• Développeurs web expérimentés
• Architectes techniques front-end

• Avoir une bonne connaissance de React (composants, props, state, etc.)
• Avoir déjà utilisé Redux ou avoir suivi une formation de niveau débutant à intermédiaire sur React

Module 1 : Approche avancée de la conception en React

• Pensée déclarative vs impérative
• L'interface comme fonction du state et des props
• Arborescence de composants, Virtual DOM, arbre hôte
• Mise en place et propagation du state
• Flux de données unidirectionnel
• Composition de composants
• Utilisation des outils de développement React

Module 2 : JavaScript moderne au service de React

• Syntaxes avancées : destructuring, spread/rest operators
• Modules ES6+, let/const, template literals
• Fonctions fléchées, itérateurs
• Promesses, async/await
• Babel et les évolutions ECMAScript utiles à React

Module 3 : Routage et chargement de données

• Utiliser React Router efficacement
• Routage dynamique et déclaratif
• Création de layout (page maître)
• Effets de cycle de vie avec useEffect
• Chargement et gestion de données distantes

Module 4 : Formulaires et authentification

• Composants contrôlés et non contrôlés
• Gestion avancée des formulaires
• Mise en place de l'authentification (JWT, rôles, permissions)
• Navigation conditionnelle : pages publiques / privées

Module 5 : Gestion de l'état avec Redux

• Concepts fondamentaux de la programmation fonctionnelle
• Mutations, fonctions pures, reducers
• Architecture Redux : store, actions, middleware
• Intégration React-Redux : provider et connect
• Mise en œuvre d'un mini-Redux avec TDD
• Synchronisation des données serveur / Redux

Module 6 : Programmation fonctionnelle appliquée à React

• Concepts de closure, mémoïsation
• Composition de fonctions
• Bonnes pratiques de codage fonctionnel dans un contexte React

Module 7 : Utilisation avancée des Hooks

• useState, useEffect, useReducer, useMemo, useContext
• Personnalisation et composition de hooks
• Comparaison avec Redux : quand utiliser l'un ou l'autre

Module 8 : Patterns avancés

• Higher-Order Components (HOC)
• Migration de patterns HOC vers des hooks personnalisés
• Refactoring et optimisation du code legacy

Module 9 : Optimisation et profilage

• Réduction des re-render inutiles
• Encapsulation de state
• Utilisation de React.memo, useMemo, useCallback
• Immuabilité et performance

Module 10 : Rendu côté serveur (SSR)

• Limitations du rendu client
• Mise en place d'un SSR avec React
• Conciliation rendu client / serveur

Module 11 : Stylisation et design UI

• Approches de stylisation : CSS-in-JS vs CSS classique
• Bibliothèques UI : Material UI, Semantic UI, React Bootstrap, etc.
• Composants stylisés (Styled Components, Emotion)
• Utilisation de Storybook pour l'UI design

Module 12 : UI patterns avancés et design system

• Systèmes de thème et de design unifiés
• Définition de constantes de style (espacements, couleurs, typographie)
• Gestion du responsive via les props
• Création de composants adaptatifs et accessibles
• Mise en place d'un système de design basé sur des variantes

Docaposte Institute propose plusieurs dispositifs pédagogiques adaptés aux apprenants :

• Formation en présentiel
• En groupe (inter-entreprises ou intra-entreprise)
• En individuel (monitorat)
• En journée ou en cours du soir (sur demande spécifique)
• Formation en distanciel
• Distanciel synchrone
• Distanciel asynchrone

• Alternance d'apports théoriques et de mises en pratique contextualisées.
• Progression pédagogique structurée, de la compréhension à la mise en œuvre opérationnelle.
• Pédagogie immersive favorisant une mise en application immédiate des compétences.
• Formation interactive et participative s'appuyant sur des ateliers pratiques, études de cas et échanges collectifs (+ 60 % du temps de formation.)
• Séquences pédagogiques rythmées et évaluations formatives régulières pour renforcer l'ancrage des apprentissages.
• Supports de cours, ressources documentaires et références mis à disposition par le formateur

En amont de la formation (évaluation en ligne dans l'extranet apprenant)

• Recueil des besoins et des attentes des participants.
• Auto-positionnement permettant d'évaluer le niveau initial des apprenants.

Tout au long de la formation

• Évaluations continues réalisées par le formateur travers des questions orales, exercices, QCM, études de cas et mises en situation pratiques.
  
  

À l'issue de la formation (évaluations en ligne dans l'extranet apprenant)

• Auto-positionnement afin de mesurer l'acquisition des compétences visées.
• Validation de l'acquisition des compétences par le formateur
• Questionnaire de satisfaction « à chaud » à l'issue de la formation
• Questionnaire de satisfaction "à froid", 45 jours après la formation afin d'évaluer l'ancrage des acquis et leur mise en application en situation professionnelle.

• Admission sans disposition particulière