ReactJs | Développer des applications web Mixte : présentiel / à distance

Cette formation de trois jours guide les développeurs dans la maîtrise de React JS : après les fondations du framework et la création de composants en JSX, elle approfondit la gestion d’état avec Context API et Redux, puis aborde le routage et l’optimisation des performances. 

Un focus “IA légère” montre comment exploiter un LLM ou GitHub Copilot pour générer des tests et des mocks, afin d’accélérer le cycle de développement.  Les participants alternent apports méthodologiques, ateliers guidés et repartent avec des gabarits réutilisables.

A l'issue de la formation, le stagiaire sera capable de développer des interfaces utilisateurs avec ReactJS.

• Comprendre les concepts clés de ReactJS et ses spécificités
• Créer des composants fonctionnels
• Maîtriser la syntaxe JSX
• Utiliser Flux et gérer les bugs
• Tester son développement

Jour 1 – Introduction à ReactJS et création de composants

Objectifs :

• Comprendre les fondations de React et son écosystème
• Créer et organiser des composants fonctionnels

• Présentation de ReactJS
  • Philosophie et avantages (UI déclarative, Virtual DOM)
  • Structure d'un projet React (create-react-app, Vite)
• JSX et composants fonctionnels
  • Syntaxe JSX, expressions et compositions
  • Props, enfants (children) et passage de données
  • Atelier : créer un composant Card réutilisable pour un tableau de contenu
• State et gestion d'événements
  • Hook useState pour gérer l'état local
  • Gestion des événements (click, formulaire)
  • Atelier : implémenter un compteur et un formulaire de saisie simple

Jour 2 – Gestion d'état avancée, Flux et tests

Objectifs :

• Maîtriser la gestion d'état globale
• Appliquer le pattern Flux et réaliser des tests unitaires 

• Context API et Redux
  • Context API de React pour le partage d'état
  • Introduction à Redux : store, reducers, actions
  • Atelier : mettre en place un panier d'achat global avec Redux Toolkit
• Architecture Flux
  • Flux classique vs Redux
  • Middleware (Thunk, Saga) pour les effets de bord
• Tests et debugging
  • Tests unitaires avec Jest et React Testing Library
  • Tests de composants et snapshots
  • Atelier : écrire des tests pour le composant panier et simuler des actions

Jour 3 – Routing, performance et IA

Objectifs :

• Mettre en place une navigation robuste pour les applications monopage
• Optimiser les performances perçues et réelles
• Intégrer des outils IA pour accélérer le développement

• React Router et navigation
  • Installation et configuration de React Router Dom
  • Définition de BrowserRouter, Routes et Route
  • Routes dynamiques : utilisation de paramètres et routes imbriquées
  • Gestion des erreurs 404 et redirections
  • Atelier : ajouter un routing complet pour pages Home, Liste, Détail et NotFound
• Optimisation des performances
  • Analyse de performance avec les DevTools (profilage, timeline)
  • memo pour la mémoïsation des composants
  • useMemo pour mémoïser les calculs lourds
  • useCallback pour stabiliser les callbacks et éviter les re-render inutiles
  • Lazy loading de composants : lazy et Suspense
  • Code splitting automatique via Webpack (dynamic import)
  • Atelier : profiler un composant de liste, appliquer memo et lazy loader les détails
• IA pour ReactJS
  • IA & RGPD : risques et bonnes pratiques
  • Utilisation d'API LLM pour générer automatiquement des tests unitaires et des mocks
  • Plugins et extensions IA (GitHub Copilot, TabNine) pour accélérer la saisie de code
  • Atelier : utiliser une extension IA (ex. GitHub Copilot ou TabNine) dans l'éditeur pour générer automatiquement un test Jest simple à partir d'un composant React existant

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

• Apports des connaissances communes.
• Mises en situation sur le thème de la formation et des cas concrets.
• Méthodologie d'apprentissage attractive, interactive et participative.
• Equilibre théorie / pratique : 60 % / 40 %.
• Supports de cours fournis au format papier et/ou numérique.
• Ressources documentaires en ligne et références mises à disposition par le formateur.
• Pour les formations en présentiel dans les locaux mis à disposition, les apprenants sont accueillis dans une salle de cours équipée d'un réseau Wi-Fi, d'un tableau blanc ou paperboard. Un ordinateur avec les logiciels appropriés est mis à disposition (le cas échéant).

En amont de la formation :

• Recueil des besoins des apprenants afin de disposer des informations essentielles au bon déroulé de la formation (profil, niveau, attentes particulières...).
• Auto-positionnement des apprenants afin de mesurer le niveau de départ.

Tout au long de la formation : 

• Évaluation continue des acquis avec des questions orales, des exercices, des QCM, des cas pratiques ou mises en situation...

A la fin de la formation : 

• Auto-positionnement des apprenants afin de mesurer l'acquisition des compétences.
• Evaluation par le formateur des compétences acquises par les apprenants.
• Questionnaire de satisfaction à chaud afin de recueillir la satisfaction des apprenants à l'issue de la formation.
• Questionnaire de satisfaction à froid afin d'évaluer les apports ancrés de la formation et leurs mises en application au quotidien.

• Admission sans disposition particulière