1. Introduction

The document’s PDF is HERE.

The document’s codes are HERE.

This document is a product of Anthropic’s AI Claude. It follows the course “Step-by-Step Introduction to the NestJS Web Framework,” from which it shifts the perspective:

In the course [NestJS], the server generates the pages HTML (view engine [Handlebars]); the browser simply displays them;
in this course, the pages are generated in the browser by an application [React]; the server, now reduced to a simple server JSON, provides only data.

The application’s pages, however, remain unchanged: they are those of the [RdvMedecins] application already presented with the other frameworks (login with CAPTCHA, doctor’s schedule, appointment window, patient portal, doctor and client management, account creation, French and English).

This document follows the same structure as its predecessors: first, numerous short examples, each focusing on a specific concept of [React], followed by a complete case study—the [React] client of the [RdvMedecins] application—with all files annotated. It follows the same structure as the courses *Step-by-Step Introduction to the Vue.js Framework* and *Step-by-Step Introduction to the Angular Framework*: Readers familiar with [Vue.js] or [Angular] will find the same examples, written in the style of [React]: 25 examples, numbered like those in the [Angular] course.

A course already exists on this topic: A React Client/Server Example / NestJS (2026), which covers both the server and the client. This document differs from that one in its approach: the server is treated as a black box, and we are only interested in the API and JSON; we learn [React] step by step before tackling the complete client.

1.1. React’s Role in a Web Application

The application has two parts, which communicate with each other only through requests:

1: The [React] application, running in the browser, sends a HTTP request to the server, for example, [GET /api/schedule?doctorId=1&day=2026-10-05];
2: The server responds with data JSON: this doctor’s schedule for that day. It does not generate any pages;
3: Using this data, [React] updates the page displayed in the browser without reloading it.

The following diagram compares the two architectures:

The browser loads only a single, nearly empty page—HTML—upon startup. Everything else is generated by the code [JavaScript]: this is known as a single-page application (SPA, for [Single Page Application]). When the user clicks on an internal link, no page is requested from the server: the router changes the displayed URL and replaces the page’s content.

[React] is a library created by [Facebook] (now [Meta]) and released in 2013. It is currently the most widely used library for building web interfaces. It is based on three concepts:

components: the interface is broken down into reusable parts (a navigation bar, a form field, a confirmation window, etc.). A [React] component is a simple [JavaScript] (or [TypeScript]) function that returns what needs to be displayed, written in JSX, a syntax that combines HTML and [JavaScript];
State and declarative rendering: a component’s data is stored in its state ([useState]). When the state changes, [React] calls the component’s function, compares the result to the previous one, and automatically updates whatever has changed on the page. We never write code that directly modifies the page: we describe the page based on its state;
hooks: functions ([useState], [useEffect], [useContext]...) through which a component accesses the mechanisms of [React]: state, side effects, and shared data. You can write your own hooks to reuse a behavior.

Unlike [Angular], [React] is not an "all-in-one" framework: it is a rendering library. The router, forms, the HTTP client, translation, and shared state are provided by other libraries, chosen by the developer. This course uses the most common ones: [React Router] (the router), [React Hook Form] (an example form library), [TanStack Query] (reading data from the server), [Zustand] (shared state), and [i18next] (languages). The build tool is [Vite].

We will use [React] 19, with its most recent implementation: function components and hooks (the old components written as classes are no longer used), form actions ([useActionState]), [use()] and [<Suspense>], [<title>] placed by a component, [useEffectEvent] and [<Activity>] (React 19.2).

1.2. Tools Used

The examples were written and tested using the following tools (installation instructions are provided in the appendix):

[Node.js] 24 (or at least 22.22: this is a requirement of [React Router] 8) and its package manager [npm];
the editor [Visual Studio Code], which includes [TypeScript] and JSX without any additional extensions;
a recent browser ([Chrome], [Firefox], [Edge]), if possible with the [React Developer Tools] extension;
the command-line tool [curl], which displays the raw HTTP responses;
the DBMS [MySQL] (or [MariaDB]), for example, the one for [Laragon] under [Windows]: it is required for the JSON server, as described in the chapter introducing it.

The libraries are those of the [package.json] files: [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 and [react-i18next] 17, [Bootstrap] 5.3.

1.3. Examples

The codes in the document are organized into three folders:

deliverable/
├── examples-react/            the 25 small React examples
├── rdvmedecins-nestjs-json/   the RdvMedecins JSON server (the "black box")
└── rdvmedecins-react/         the React client of the case study

The examples folder contains twenty-five small applications—one per example—that share the same libraries:

examples-react/
├── 01-first-application/
│   ├── index.html
│   └── src/
├── 02-state/
├── ...
├── 25-server-errors/
├── common/            code shared by examples 24 and 25
├── node_modules/
├── package.json
├── tsconfig.json
└── vite.config.ts     the Vite configuration, shared by all the examples

Install the libraries once, in a console opened to the [examples-react] folder (in [VS Code]: Terminal menu / New Terminal):

npm install

Then run a sample by entering its name:

npm start 01-first-application

The [Vite] development server serves the example on port 5173: open it at http://localhost:5173/. This server does not need to be restarted when you modify a file: each saved file is immediately recompiled, and the browser page updates automatically, usually without even losing its state. Stop it by entering [Ctrl-C] in the console before running the next example (only one example at a time can occupy port 5173).

Examples 22 through 25 query the JSON and [RdvMedecins] servers: you will need to have installed and started them, as explained in the chapter dedicated to them.

1.4. Document Contents

Chapter	Contents	Examples
Getting Started	An Application, Status, JSX, Events, Controlled Fields, useReducer, Validation, React Hook Form, Formatting	01–09
Components	props, functions passed up to the parent, composition (children, render props), lifecycle and effects, contexts, custom hooks, confirmation dialog	10 to 16
Routing	React Router, navigation guards (middleware)	17 and 18
Asynchronous Operations and Shared State	Timers, anti-rebound, expired responses, use() and Suspense, Zustand	19 and 20
Internationalization	An Application in French and English (i18next)	21
The server: a black box	Installation of the JSON server, its API, curl examples	-
Interacting with the server	fetch, connection and cookies, form actions, the API access layer, TanStack Query, server errors	22–25
Case Study	The React client for the RdvMedecins application	-
Deployment	The compiled client, served by the JSON server	-

Each example is presented with its complete code, commented line by line, and a screenshot of its execution. The code itself is extensively commented: these comments are part of the course.