Formation ReactJs, Développer des applications web Mixed: In person / distance learning

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

• 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

• 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

• 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

• 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