1. Introduction

Le PDF du document est ICI.

Les codes du document sont ICI.

Ce document est un produit de l'IA Claude d'Anthropic. Il fait suite au cours Introduction étape par étape au framework web NestJS, dont il change le point de vue :

• dans le cours [NestJS], c'est le serveur qui fabrique les pages HTML (moteur de vues [Handlebars]) ; le navigateur se contente de les afficher ;
• dans ce cours, les pages sont fabriquées dans le navigateur, par une application [React] ; le serveur, devenu un simple serveur JSON, ne fournit plus que des données.

Les pages de l'application, elles, ne changent pas : ce sont celles de l'application [RdvMedecins] déjà présentées avec les autres frameworks (connexion avec captcha, agenda d'un médecin, fenêtre de réservation, espace du patient, gestion des médecins et des clients, création d'un compte, français et anglais).

Le document suit la même progression que ses prédécesseurs : d'abord de nombreux petits exemples, chacun centré sur une notion de [React], puis une étude de cas complète, le client [React] de l'application [RdvMedecins], dont tous les fichiers sont commentés. Il reprend le plan des cours Introduction étape par étape au framework Vue.js et Introduction étape par étape au framework Angular : le lecteur qui connaît [Vue.js] ou [Angular] retrouvera les mêmes exemples, écrits à la manière de [React] : 25 exemples, numérotés comme ceux du cours [Angular].

Un cours existe déjà sur ce sujet : Un exemple de client / serveur React / NestJS (2026), qui étudie à la fois le serveur et le client. Le présent document s'en distingue par sa démarche : le serveur y est une boîte noire, dont seule l'API JSON nous intéresse, et l'on apprend [React] pas à pas, avant de s'attaquer au client complet.

1.1. La place de React dans une application web

L'application a deux parties, qui ne se parlent que par des requêtes HTTP :

• 1 : l'application [React], exécutée par le navigateur, envoie une requête HTTP au serveur, par exemple [GET /api/agenda?idMedecin=1&jour=2026-10-05] ;
• 2 : le serveur répond par des données JSON : l'agenda de ce médecin, ce jour-là. Il ne fabrique aucune page ;
• 3 : avec ces données, [React] met à jour la page affichée, dans le navigateur, sans la recharger.

Le schéma suivant compare les deux architectures :

Le navigateur ne charge qu'une seule page HTML, presque vide, au démarrage. Tout le reste est fabriqué par du code [JavaScript] : c'est ce qu'on appelle une application à page unique (SPA, pour [Single Page Application]). Quand l'utilisateur clique sur un lien interne, aucune page n'est demandée au serveur : le routeur change l'adresse affichée et remplace le contenu de la page.

[React] est une bibliothèque créée par [Facebook] (aujourd'hui [Meta]) et publiée en 2013. C'est aujourd'hui la plus utilisée pour écrire des interfaces web. Elle repose sur trois idées :

• les composants : l'interface est découpée en morceaux réutilisables (une barre de navigation, un champ de formulaire, une fenêtre de confirmation...). Un composant [React] est une simple fonction [JavaScript] (ou [TypeScript]), qui renvoie ce qu'il faut afficher, écrit en JSX, une syntaxe qui mêle HTML et [JavaScript] ;
• l'état et le rendu déclaratif : les données d'un composant sont rangées dans son état ([useState]). Quand l'état change, [React] rappelle la fonction du composant, compare le résultat au précédent, et met à jour, tout seul, ce qui a changé dans la page. On n'écrit jamais de code qui modifie directement la page : on décrit la page en fonction de l'état ;
• les hooks : des fonctions ([useState], [useEffect], [useContext]...) par lesquelles un composant accède aux mécanismes de [React] : l'état, les effets de bord, les données partagées. On peut écrire ses propres hooks pour réutiliser un comportement.

À la différence d'[Angular], [React] n'est pas un framework « tout compris » : c'est une bibliothèque d'affichage. Le routeur, les formulaires, le client HTTP, la traduction, l'état partagé sont fournis par d'autres bibliothèques, choisies par le développeur. Ce cours utilise les plus répandues : [React Router] (le routeur), [React Hook Form] (un exemple de bibliothèque de formulaires), [TanStack Query] (la lecture des données du serveur), [Zustand] (l'état partagé), [i18next] (les langues). L'outil de construction est [Vite].

Nous utiliserons [React] 19, avec son écriture la plus récente : composants fonctions et hooks (les anciens composants écrits sous forme de classes ne sont plus utilisés), actions de formulaire ([useActionState]), [use()] et [<Suspense>], [<title>] placé par un composant, [useEffectEvent] et [<Activity>] (React 19.2).

1.2. Les outils utilisés

Les exemples ont été écrits et testés avec les outils suivants (leur installation est décrite en annexe) :

• [Node.js] 24 (ou 22.22 au moins : c'est l'exigence de [React Router] 8) et son gestionnaire de paquets [npm] ;
• l'éditeur [Visual Studio Code], qui comprend [TypeScript] et le JSX sans extension supplémentaire ;
• un navigateur récent ([Chrome], [Firefox], [Edge]), si possible avec l'extension [React Developer Tools] ;
• l'outil en ligne de commande [curl], qui affiche les réponses HTTP brutes ;
• le SGBD [MySQL] (ou [MariaDB]), par exemple celui de [Laragon] sous [Windows] : il est nécessaire au serveur JSON, à partir du chapitre qui le présente.

Les bibliothèques sont celles des fichiers [package.json] : [React] 19.3, [React Router] 8.4, [Vite] 8.3, [TypeScript] 6.0, [React Hook Form] 7.89, [TanStack Query] 5.104, [Zustand] 5.0, [i18next] 26 et [react-i18next] 17, [Bootstrap] 5.3.

1.3. Les exemples

Les codes du document sont rangés dans trois dossiers :

livrable/
├── exemples-react/            les 25 petits exemples de React
├── rdvmedecins-nestjs-json/   le serveur JSON RdvMedecins (la « boîte noire »)
└── rdvmedecins-react/         le client React de l'étude de cas

Le dossier des exemples contient vingt-cinq petites applications, une par exemple, qui partagent les mêmes bibliothèques :

exemples-react/
├── 01-premiere-application/
│   ├── index.html
│   └── src/
├── 02-etat/
├── ...
├── 25-erreurs-serveur/
├── commun/            du code partagé par les exemples 24 et 25
├── node_modules/
├── package.json
├── tsconfig.json
└── vite.config.ts     la configuration de Vite, commune à tous les exemples

On installe les bibliothèques une seule fois, dans une console ouverte sur le dossier [exemples-react] (dans [VS Code] : menu Terminal / Nouveau terminal) :

npm install

puis on lance un exemple, en donnant son nom :

npm start 01-premiere-application

Le serveur de développement de [Vite] sert l'exemple sur le port 5173 : on l'ouvre à l'adresse http://localhost:5173/. Ce serveur n'a pas besoin d'être relancé quand on modifie un fichier : chaque fichier enregistré est aussitôt recompilé, et la page du navigateur se met à jour d'elle-même, le plus souvent sans même perdre son état. On l'arrête par [Ctrl-C] dans la console, avant de lancer l'exemple suivant (un seul exemple à la fois peut occuper le port 5173).

Les exemples 22 à 25 interrogent le serveur JSON [RdvMedecins] : il faudra alors l'avoir installé et lancé, comme expliqué au chapitre qui lui est consacré.

1.4. Contenu du document

Chapitre	Contenu	Exemples
Premiers pas	une application Vite, l'état, le JSX, les événements, les champs contrôlés, useReducer, la validation, React Hook Form, la mise en forme	01 à 09
Les composants	props, fonctions remontées vers le parent, composition (children, render props), cycle de vie et effets, contextes, hooks personnalisés, fenêtre de confirmation	10 à 16
Le routage	React Router, les gardes de navigation (middlewares)	17 et 18
L'asynchrone et l'état partagé	minuteries, anti-rebond, réponses périmées, use() et Suspense, Zustand	19 et 20
Internationalisation	une application en français et en anglais (i18next)	21
Le serveur, une boîte noire	installation du serveur JSON, son API, exemples curl	-
Dialoguer avec le serveur	fetch, connexion et cookie, actions de formulaire, couche d'accès à l'API, TanStack Query, erreurs du serveur	22 à 25
Étude de cas	le client React de l'application RdvMedecins	-
Déploiement	le client compilé, servi par le serveur JSON	-

Chaque exemple est présenté avec son code complet, commenté ligne par ligne, et une copie d'écran de son exécution. Les codes sont eux-mêmes abondamment commentés : leurs commentaires font partie du cours.