13. Annexes
13.1. Installation de Node.js
[Node.js] se télécharge sur nodejs.org : on choisit la version LTS (support à long terme) 24, ou la version 22 à partir de 22.22 : c'est ce qu'exige [React Router] 8 ([Vite] 8 se contente de 20.19). L'installateur [Windows] installe aussi [npm]. On vérifie l'installation dans une console :
Pour faire cohabiter plusieurs versions de [Node.js] sur une même machine, on peut utiliser [nvm-windows] (sous [Windows]) ou [nvm] (sous [Linux] et [macOS]).
Les exemples et l'étude de cas n'exigent d'installer aucun outil globalement : [Vite], [TypeScript] (et, pour le serveur, l'outil [nest]) font partie des dépendances de chaque projet, installées par [npm install]. Les scripts de [package.json] ([npm start], [npm run build]) les trouvent dans le dossier [node_modules]. Pour créer soi-même un nouveau projet, on peut utiliser [npm create vite@latest mon-projet -- --template react-ts], sans rien installer.
13.2. Installation de Visual Studio Code
[Visual Studio Code] se télécharge sur code.visualstudio.com. Il comprend d'origine le JSX et [TypeScript] : complétion, vérification des types au fil de la frappe, navigation d'un composant ([<ChampSaisie>]) vers sa définition, renommage d'une prop dans tout le projet. Aucune extension n'est indispensable ; on peut ajouter ESLint (avec les règles [eslint-plugin-react-hooks], qui signalent les dépendances oubliées d'un [useEffect] et les hooks appelés sous condition) depuis le panneau des extensions (Ctrl-Maj-X).
On ouvre un projet par le menu Fichier / Ouvrir le dossier (le dossier [exemples-react], par exemple), et l'on y ouvre une console par le menu Terminal / Nouveau terminal.
13.3. L'extension React Developer Tools
L'extension React Developer Tools s'installe depuis la boutique d'extensions de [Chrome], [Edge] ou [Firefox]. Elle ajoute deux onglets aux outils de développement du navigateur (F12) :
- « Components » : l'arbre des composants de la page (et non celui des balises HTML), et, pour chacun, ses props, son état et ses hooks ([useState], [useContext]...) avec leur valeur ; le composant qui l'a affiché ;
- « Profiler » : un enregistreur, qui montre quels composants ont été ré-affichés à chaque mise à jour, pourquoi (« props changed », « hook 2 changed »...), et combien de temps cela a pris.
On peut y modifier une prop ou un état et voir la page se mettre à jour : un excellent moyen de comprendre quand et pourquoi un composant est ré-affiché. L'option « Highlight updates when components render » fait clignoter, dans la page, chaque composant ré-affiché.
13.4. Installation de MySQL avec Laragon
Le serveur JSON a besoin de [MySQL] (ou [MariaDB]). [Laragon] (laragon.org) en installe un sous [Windows], prêt à l'emploi, avec l'outil d'administration [HeidiSQL]. Après installation :
- le bouton « Démarrer tout » lance le serveur [MySQL], sur le port 3306 ;
- l'utilisateur [root] n'a pas de mot de passe : ce sont les valeurs par défaut du fichier [.env.example] du serveur ;
- dans [HeidiSQL] (bouton « Base de données »), le menu Fichier / Exécuter un fichier SQL exécute le script [database/dbrdvmedecins2.sql].
Sous [Linux] ou [macOS], on installe [MySQL] ou [MariaDB] avec le gestionnaire de paquets du système, et l'on exécute le script avec le client en ligne de commande : [mysql -u root -p < database/dbrdvmedecins2.sql].
13.5. Installation de curl
[curl] est livré avec [Windows] 10 et 11, [macOS] et la plupart des distributions [Linux]. On vérifie sa version :
L'option [--json], utilisée dans ce document, existe depuis la version 7.82 (2022). Avec une version plus ancienne, on remplace [--json @fichier] par [-H "Content-Type: application/json" -d @fichier], ou l'on installe une version récente depuis curl.se.
Sous [PowerShell], il faut taper [curl.exe] et non [curl] : dans [PowerShell], [curl] est un alias d'une autre commande ([Invoke-WebRequest]), qui ne comprend pas les options de [curl]. L'invite de commandes ([cmd]) n'a pas ce problème.