13. Appendices
13.1. Installing Node.js
[Node.js] can be downloaded from nodejs.org: choose version LTS (long-term support) 24, or version 22 starting with 22.22: this is required by [React Router] 8 ([Vite] 8 only requires 20.19). The [Windows] installer also installs [npm]. Verify the installation in a console:
To run multiple versions of [Node.js] on the same machine, you can use [nvm-windows] (under [Windows]) or [nvm] (under [Linux] and [macOS]).
The examples and case study do not require the installation of any tools overall: [Vite], [TypeScript] (and, for the server, the [nest] tool) are part of each project’s dependencies, installed by [npm install]. The scripts in [package.json] ([npm start], [npm run build]) locate them in the [node_modules] folder. To create a new project yourself, you can use [npm create vite@latest my-project -- --template react-ts] without installing anything.
13.2. Installing Visual Studio Code
[Visual Studio Code] can be downloaded from code.visualstudio.com. It includes JSX and [TypeScript] by default: code completion, type checking as you type, navigating from a component ([<InputField>]) to its definition, and renaming a prop throughout the project. No extension is required; you can add ESLint (along with the rules [eslint-plugin-react-hooks], which flag missing dependencies in [useEffect] and conditionally called hooks) from the Extensions panel (Ctrl-Shift-X).
Open a project via the File / Open Folder menu (the [examples-react] folder, for example), and open a console within it via the Terminal / New Terminal menu.
13.3. The React Developer Tools Extension
The React Developer Tools extension can be installed from the [Chrome], [Edge], or [Firefox] extension store. It adds two tabs to the browser’s developer tools (F12):
- “Components”: the page’s component tree (not the HTML tag tree), and, for each component, its props, state, and hooks ([useState], [useContext]...) along with their values; the component that rendered it;
- “Profiler”: a logger that shows which components were re-rendered with each update, why (“props changed,” “hook 2 changed,” etc.), and how long it took.
You can modify a prop or state there and watch the page update: an excellent way to understand when and why a component is re-rendered. The “Highlight updates when components render” option makes each re-rendered component flash on the page.
13.4. Installing MySQL with Laragon
The JSON server requires [MySQL] (or [MariaDB]). [Laragon] (laragon.org) installs one under [Windows], ready to use, along with the [HeidiSQL] administration tool. After installation:
- the “Start All” button launches the [MySQL] server on port 3306;
- the user [root] has no password: these are the default values from the server’s [.env.example] file;
- In [HeidiSQL] (the “Database” button), the File / Run SQL File menu item runs the [database/dbrdvmedecins2.sql] script.
In [Linux] or [macOS], install [MySQL] or [MariaDB] using the system’s package manager, and run the script using the command-line client: [mysql -u root -p < database/dbrdvmedecins2.sql].
13.5. Installing curl
[curl] is included with [Windows] versions 10 and 11, [macOS], and most distributions of [Linux]. Check its version:
The option [--json], used in this document, has been available since version 7.82 (2022). If you are using an older version, replace [--json @file] with [-H "Content-Type: application/json" -d @file], or install a recent version from curl.se.
For [PowerShell], you should enter [curl.exe], not [curl]: In [PowerShell], [curl] is an alias for another command ([Invoke-WebRequest]), which does not include the options from [curl]. The command prompt ([cmd]) does not have this issue.