C'est quoi React ? Créer un projet avec Vite

React est une bibliothèque JavaScript qui sert à construire des interfaces utilisateur à partir de composants : des fonctions qui décrivent un morceau d'écran à partir de données. Quand les données changent, React met lui-même la page à jour. Ce chapitre explique ce que React change par rapport au JavaScript « à la main », ce qu'est une application monopage, puis crée le projet AppliFrais avec Vite et TypeScript.

Le problème : synchroniser les données et la page

Avec le JavaScript du cours JavaScript, tu modifies la page en manipulant le DOM : tu cherches un élément, tu changes son texte, tu ajoutes une ligne. Voici l'ajout d'un frais dans un tableau, écrit à la main :

// JavaScript sans bibliothèque : tu dis au navigateur COMMENT modifier la page
const corps = document.querySelector('#frais tbody');
const total = document.querySelector('#total');
let somme = 35.5;

function ajouterFrais(frais) {
  const ligne = document.createElement('tr');
  ligne.innerHTML = `<td>${frais.libelle}</td><td>${frais.montant} €</td>`;   // dangereux, voir plus bas
  corps.append(ligne);
  somme += frais.montant;
  total.textContent = `${somme} €`;   // ne pas oublier le total…
}

Ce code marche sur un écran. Sur une application de vingt écrans, il devient ingérable :

• Chaque modification de données doit être répercutée partout à la main. Tu ajoutes un frais : il faut mettre à jour le tableau, le total, le compteur dans l'en-tête, le bouton « Clôturer » qui devient actif. Un oubli, et la page affiche des informations contradictoires.
• L'état est éparpillé entre des variables JavaScript et le DOM lui-même. Pour savoir combien de frais il y a, tu comptes des <tr> ou tu fais confiance à une variable : laquelle a raison ?
• Le code est fragile : renommer une classe CSS casse un querySelector ailleurs.
• innerHTML avec une saisie de l'utilisateur ouvre une faille XSS : un libellé qui contient du HTML est interprété par le navigateur (la faille XSS).

La réponse de React : décrire le résultat

React inverse la logique. Tu ne dis plus comment modifier la page : tu décris à quoi elle doit ressembler pour des données, et React s'occupe des modifications. C'est la programmation déclarative, par opposition à la programmation impérative du code précédent.

// React : tu décris CE QUE la page doit afficher pour ces données
function TableauFrais({ frais }: { frais: Frais[] }) {
  const total = frais.reduce((somme, f) => somme + f.montant, 0);
  return (
    <table>
      <tbody>
        {frais.map((f) => (
          <tr key={f.id}><td>{f.libelle}</td><td>{f.montant} €</td></tr>
        ))}
      </tbody>
      <tfoot><tr><td>Total</td><td>{total} €</td></tr></tfoot>
    </table>
  );
}

Le total est calculé à partir de la liste à chaque affichage : il ne peut pas être faux. Quand la liste change, React rappelle la fonction, obtient la nouvelle description de l'écran, la compare à l'ancienne et ne touche dans le DOM qu'aux éléments qui ont changé. Et il insère f.libelle comme du texte : un libellé qui contient <script> s'affiche tel quel, sans s'exécuter.

Ce mécanisme porte plusieurs noms qu'il faut savoir reconnaître :

Bibliothèque ou framework ?

React se présente comme une bibliothèque : il ne s'occupe que de l'interface. La navigation entre les pages, le chargement des données ou les formulaires complexes viennent d'autres bibliothèques que tu choisis : React Router (chapitre 10), TanStack Query (chapitre 9). Un framework comme Angular impose au contraire une structure complète et fournit tout.

Dans la pratique, on parle souvent de « framework front » pour React, Vue et Angular. Retiens la nuance pour l'oral : React seul est une bibliothèque d'interface ; des frameworks comme Next.js ou React Router en mode framework sont construits par-dessus.

React est le plus répandu dans les offres d'emploi et de stage, et ses idées (composants, état, rendu déclaratif) se retrouvent dans les deux autres. Il sert aussi de base au développement mobile avec React Native : les composants, les props, l'état et les hooks de ce cours s'y écrivent de la même façon.

L'application monopage (SPA)

Un site PHP classique renvoie une page HTML complète à chaque clic : le serveur fabrique la page, le navigateur la remplace entièrement. Une application React est le plus souvent une application monopage (Single Page Application, SPA) :

1. Au premier accès, le serveur envoie une page HTML presque vide et un fichier JavaScript.
2. Ce JavaScript construit toute l'interface dans le navigateur.
3. Ensuite, les données arrivent d'une API en JSON (cours API REST) et la navigation entre les « pages » se fait sans recharger.

AppliFrais est une application métier réservée à des utilisateurs connectés : le référencement ne compte pas, l'interactivité si. La SPA est le bon choix. Pour un site public qui doit être bien référencé, on ajoute du rendu côté serveur avec un framework comme Next.js ou React Router en mode framework : React fabrique alors le HTML sur le serveur. Ce n'est pas l'objet de ce cours.

Le fil rouge : le front d'AppliFrais

Tout le cours construit une seule application, le front web d'AppliFrais. Les visiteurs médicaux du laboratoire GSB y saisissent leurs frais : chaque mois, une fiche de frais regroupe leurs frais hors forfait (un repas, un parking, un taxi) ; ils la complètent tant qu'elle est en cours (CR), puis elle est clôturée (CL), validée par un comptable (VA) et mise en paiement (MP).

Le front ne parle jamais à la base de données : il appelle l'API REST d'AppliFrais, celle que tu construis dans le cours Node.js et Express. À la fin du cours, l'application sait :

• connecter un utilisateur et protéger ses pages ;
• afficher ses fiches, filtrées par état ;
• afficher le détail d'une fiche, ajouter et supprimer des frais hors forfait ;
• gérer le chargement, les erreurs et l'accessibilité ;
• se tester automatiquement et se déployer.

Les outils et leurs versions en 2026

Créer le projet avec Vite

Vite est l'outil qui sert ton application pendant le développement (avec rechargement instantané quand tu enregistres un fichier) et qui la construit pour la production. Vérifie d'abord ta version de Node.js :

node --version    # v24.x attendu (React Router 8 exige au moins Node.js 22.22)

Puis crée le projet avec le modèle React et TypeScript :

npm create vite@latest appli-frais -- --template react-ts
cd appli-frais
npm install
npm run dev

La dernière commande affiche une adresse, http://localhost:5173. Ouvre-la : la page d'accueil de Vite s'affiche. Modifie un texte dans src/App.tsx et enregistre : la page se met à jour sans recharger. C'est le remplacement de module à chaud (Hot Module Replacement, HMR).

La structure du projet

appli-frais/
├── index.html            la seule page HTML, avec <div id="root"></div>
├── package.json          dépendances et scripts
├── vite.config.ts        configuration de Vite
├── tsconfig.json         configuration de TypeScript (et tsconfig.app.json, tsconfig.node.json)
├── public/               fichiers copiés tels quels (favicon…)
└── src/
    ├── main.tsx          point d'entrée : monte l'application dans #root
    ├── App.tsx           le composant racine
    └── index.css         les styles globaux

Le fichier index.html contient une <div id="root"> vide et charge src/main.tsx. Ce dernier monte l'application React dans cette div :

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

• createRoot crée la racine React dans l'élément #root ; render y affiche le composant App.
• Le ! après getElementById(...) dit à TypeScript : « je sais que cet élément existe ». Sans lui, TypeScript signale que la fonction peut renvoyer null.
• StrictMode n'affiche rien. En développement seulement, il exécute certaines fonctions deux fois pour révéler les bogues (chapitre 6). Il n'a aucun effet en production.

Remplace le contenu de src/App.tsx par le premier composant d'AppliFrais, et supprime src/App.css et le dossier src/assets dont tu n'as plus besoin :

// src/App.tsx
export default function App() {
  return (
    <main>
      <h1>AppliFrais</h1>
      <p>Bienvenue, Lucas. Ta fiche d'octobre 2026 est en cours de saisie.</p>
    </main>
  );
}

Pourquoi TypeScript dès le début

Le modèle react-ts crée des fichiers .tsx : du JSX (le balisage dans le JavaScript, chapitre 2) écrit en TypeScript. TypeScript est du JavaScript auquel on ajoute des types : il vérifie, avant l'exécution, que tu passes les bonnes données aux bonnes fonctions.

type Frais = { id: number; libelle: string; montant: number };

const taxi: Frais = { id: 60, libelle: 'Taxi', montant: '18,40' };
//                                               ~~~~~~~
// Erreur : le type 'string' n'est pas assignable au type 'number'.

Ton éditeur souligne l'erreur pendant que tu tapes, et npm run build refuse de construire le projet tant qu'elle existe. Sur une application React, où des données circulent de composant en composant, ce filet de sécurité évite une grande partie des bogues d'affichage (undefined à l'écran, montant concaténé au lieu d'être additionné).

Tu n'as pas besoin de connaître TypeScript pour commencer : la plupart des types sont déduits automatiquement. Ce cours introduit les annotations quand elles deviennent utiles : les types des props au chapitre 3, ceux de l'état au chapitre 4, ceux des événements et des formulaires au chapitre 8, ceux des données de l'API au chapitre 7.

Les outils du navigateur

Installe l'extension React Developer Tools (Chrome, Firefox, Edge). Elle ajoute deux onglets aux outils de développement (F12) :

• Components : l'arbre de tes composants, avec leurs props et leur état, modifiables en direct ;
• Profiler : ce qui a été rendu et combien de temps cela a pris.

Garde aussi l'onglet Console ouvert : React y écrit ses avertissements en clair (clé manquante dans une liste, hook mal appelé…). La moitié des blocages d'un débutant se résolvent en lisant ce qu'il y a dans la console.

Exercices