React est la bibliothèque frontend la plus utilisée pour construire des interfaces web modernes et réactives. Cette formation couvre l’ensemble des fondamentaux : composants fonctionnels, Hooks, routage avec React Router, gestion d’état avec Redux et tests avec Jest. En trois jours, vous serez capable de développer une application single-page complète et maintenable.
Public visé
Développeurs ayant à réaliser des applications Web.
Prérequis
Avoir suivi les formations suivantes, ou en maîtriser les thèmes abordés :
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Maîtriser la syntaxe et les fonctionnalités ES6
- Expliquer les principes du framework ReactJS
- Décrire la syntaxe JSX et les fondamentaux des composants
- Implémenter la navigation avec react-router-dom
- Appliquer les Hooks efficacement
- Gérer les événements et le rendu conditionnel
- Conceptualiser la gestion d’état Redux
Programme
Jour 1 - Matin
Introduction et rappels ES6
- Outils de développement et IDE (Environnement de Développement Intégré)
- Extension du navigateur React Developer Tools
- Packaging, npm et bundlers (notions de build)
- Transpiler ECMAScript (utilisation de Babel)
- Rappels de la syntaxe ES6+ : let, const, classes, ES6, modules ES6 (import / export), fonctions fléchées (arrow functions)…
Travaux pratiques :
- Installation des outils et IDE
- Rappels sur la syntaxe ES6
Le framework ReactJS
- Principes de base de React et comparaison avec d’autres frameworks (Vue, Angular…)
- Philosophie “composant” : construire l’interface par composition de composants réutilisables
- Workflows de développement : démarrer une application from scratch, intégrer React dans une appli existante, création d’un projet avec Vite (remplacement de Create React App)
- Le DOM virtuel (Virtual DOM) et la réconciliation (mise à jour efficace du DOM par React)
- Le DOM virtuel et la réconciliation
Le JSX et les composants
- Définition d’un élément React (arborescence d’éléments virtuels)
- Liaison avec le DOM : montée en DOM d’un composant (API createRoot de React 18, remplaçant ReactDOM.render)
- Syntaxe JSX et expressions JavaScript dans le JSX
- Les composants React
- Composants fonctionnels avec Hooks
- Imbrication de composants (composition de composants parent / enfant)
Travaux pratiques :
- Création d’un composant de base
- Imbrication de composants
Jour 1 - Après-midi
Les props
- Définition des props et transmission de données aux composants enfants
- Accéder aux props dans un composant fonctionnel
- La props.children
Travaux pratiques :
- Utilisation des props dans un composant
Le routing et la navigation
- Construire une SPA (Single Page Application) avec react-router-dom (version 6)
- Le router, les routes et les liens de navigation
- Gestion de la navigation
- Les paramètres d’URL et les navigations imbriquées
Travaux pratiques :
- Mise en place du routage avec React Router et gestion d’une route avec paramètre
Les Hooks
- Définition et comparaison avec les composants en mode “classe”
- Hooks d’état (useState) et d’effet (useEffect)
- Règles des Hooks et custom Hooks
Travaux pratiques :
- Conversion d’un composant en mode “classe” en composant fonctionnel avec Hooks
- Gestion des évènements et rendu conditionnel
Jour 2 - Matin
Syntaxe des évènements dans le JSX
- Gestion des méthodes d’évènement (handlers)
- Contenu conditionnel et raccourcis (opérateur &&, opérateur ternaire)
Travaux pratiques :
- Gestion des évènements et rendu conditionnel dans un composant
- Listes, fragments et formulaires
Listes et raccourcis (map, filter)
- Les clés (key) et le DOM virtuel
- Les fragments
- Etat du composant et composants contrôlés
- Gestion des formulaires et refs
Travaux pratiques :
- Création d’une liste avec des données et gestion d’un formulaire
Jour 2 - Après-midi
Immutabilité des variables partagées
- Problème de la gestion d’état
- Les actions, les reducers et le store
- Utilisation avec React (react-redux)
- Le composant Provider
- Les containers
- Introduction à Redux et Zustand
- Utilisation avec les Hooks useSelector et useDisptach
Travaux pratiques :
- Intégration de Redux dans l’application
- Chapitre d’ouverture : perspectives et bonnes pratiques
Jour 3 - Matin
Introduction aux tests unitaires
- Le framework Jest (setup, teardown, describe, it)
- La React Testing Library (cleanup, render, fireEvent)
- React Native : aperçu et utilisation pour le développement d’applications mobiles
- Utilisation d’Expo
Jour 3 - Après-midi
Server Side Rendering (SSR)
- Principe du rendu côté serveur
- Avantages du SSR
- Contraintes du SSR
Bonnes pratiques de développement React
- Organisation du code en composants modulaires et réutilisables
- Optimisation des performances
- Découpage du code (code splitting) et chargement à la demande
Travaux pratiques :
- Analyse d’une page React rendue côté serveur (exemple avec Next.js)
- Atelier de revue de code
Modalités d’évaluation des acquis
En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.
Pour aller plus loin
Cette formation donne accès à cette formation :
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
Formation DEV-REACT-100 — ReactJS - Composants, Hooks et Redux. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : react, javascript, frontend, web, spa, initiation. Cylian Formation, Dijon.