Descriptif
React : développer des applications Web est une formation de 3 jours (21 heures), de niveau intermédiaire, rattachée au domaine « Développement logiciel, informatique et Web ». Développer des interfaces avec React. Conçue et animée par des praticiens en activité, elle alterne apports ciblés (30 %) et mises en pratique (70 %) sur des laboratoires cloud individuels, avec des cas inspirés des secteurs banque, assurance et services publics. Disponible en inter-entreprises, en intra sur catalogue et en version sur mesure adaptée au contexte de l'entreprise.
Objectifs pédagogiques
À l'issue de la formation, le participant sera capable de :
- Composants
- État
- Hooks
- Routage
- Tests
Programme détaillé
| N° | Contenus et activités | Durée |
|---|---|---|
| Jour 1 | ||
| 1 | Ouverture : niveau JavaScript des participants, présentation du fil rouge de tableau de bord de tickets et démarrage du projet Vite en navigateur | 0,5 h |
| 2 | Fondations React : JSX, composants, props, rendu et réconciliation, outillage Vite et React DevTools | 1,5 h |
| 3 | Travaux pratiques : découper la maquette du tableau de bord en composants et afficher une liste de tickets | 2 h |
| 4 | État local et événements : useState, formulaires contrôlés, levée d'état, rendu de listes et clés | 1,5 h |
| 5 | Travaux pratiques : filtrer et trier les tickets, gérer le formulaire de création et ses validations | 1,5 h |
| Jour 2 | ||
| 6 | Effets et références : useEffect et nettoyage, useRef, useMemo, useCallback, pièges du tableau de dépendances | 1,5 h |
| 7 | Travaux pratiques : consommer l'API de tickets, gérer chargement, erreurs et annulation de requête | 2 h |
| 8 | État partagé : useContext et useReducer, panorama de Redux Toolkit, Zustand et TanStack Query | 1,5 h |
| 9 | Travaux pratiques : centraliser l'état d'authentification et mettre en cache les requêtes avec TanStack Query | 2 h |
| Jour 3 | ||
| 10 | Routage avec React Router : routes imbriquées, paramètres, chargement différé et routes protégées | 1,5 h |
| 11 | Travaux pratiques : structurer la navigation du tableau de bord et protéger les pages d'administration | 1 h |
| 12 | Tests avec Vitest et React Testing Library : composants, interactions utilisateur et requêtes simulées | 1,5 h |
| 13 | Travaux pratiques : couvrir les parcours critiques par des tests et corriger deux régressions introduites volontairement | 1,5 h |
| 14 | Sécurité front et mise en production : échappement automatique du JSX et pièges de dangerouslySetInnerHTML, stockage des jetons et expositions XSS associées, en-têtes CSP, audit de l'application avec OWASP ZAP, build Vite et analyse du paquet livré, puis plan d'action | 1,5 h |
Méthodes pédagogiques
- Pédagogie active : 48 % du temps en pratique encadrée — laboratoires cloud provisionnés par participant, travaux pratiques guidés, fil rouge applicatif —, le reste en apports structurés, démonstrations commentées, cadrage et évaluation
- répartition calculée sur le déroulé détaillé de cette formation, et non annoncée de façon uniforme
- classe inversée avec prérequis sur le LMS
- apprentissage adaptatif selon le positionnement initial
- travaux en binômes
- classe virtuelle en séquences de 3 h 30 maximum sur Microsoft Teams
- support clair, complet et paginé remis à chaque participant
Technologies et outils mobilisés
React, Vite, React Router, TanStack Query, Vitest, React Testing Library, OWASP ZAP
Modalités d'évaluation et de validation
- Positionnement initial en ligne
- quiz de validation à chaque séquence
- évaluation finale des acquis (QCM et mise en situation)
- satisfaction à chaud
- questionnaire de transfert à 30 jours
- attestation de fin de formation
Plateforme, laboratoires et ressources
- LMS DATAROCKSTARS : parcours, supports numériques, quiz, évaluations, émargement par demi-journée
- laboratoires cloud individuels accessibles depuis un navigateur, sans installation, données fictives, détruits en fin de session
- bibliothèque O'Reilly (plus de 60 000 ressources)
- accès aux supports pendant 6 mois