Tutoriel React — Chapitre 2

Comment fonctionne une application React

Sommaire Alt+S Plan Alt+1 Exercice Alt+3

Chapitre 2 — Comment fonctionne une application React

Dans ce chapitre, on comprend ce qui se passe “sous le capot” : une application React est une SPA , elle affiche une arborescence de composants , et elle met à jour l’écran via un mécanisme de rendu (render) et de mise à jour (re-render).

Objectif : comprendre (pas apprendre par cœur) Niveau : débutant absolu Pratique : mini-exercice à la fin

Plan du chapitre

1) C’est quoi une SPA (Single Page Application) ?

Une SPA (application “page unique”) est une application web qui charge une page principale, puis met à jour l’interface sans recharger toute la page à chaque action.

Site “classique” (multi-pages)

Quand vous cliquez sur un lien, le navigateur demande une nouvelle page HTML au serveur. Le serveur renvoie une nouvelle page et le navigateur remplace tout l’écran.

SPA (souvent avec React)

Vous chargez une page de base, puis l’application récupère des données et change l’affichage en JavaScript. Vous avez l’impression de naviguer “comme une app”.

Important : “SPA” ne veut pas dire “une seule URL”. On peut avoir plusieurs pages (routes), mais la navigation se fait sans rechargement complet grâce au JavaScript.

2) Les fichiers clés d’une app React (vue d’ensemble)

Quand vous créez un projet React (Vite, Create React App, etc.), vous obtenez une structure similaire. Dans ce chapitre, on se concentre sur l’idée, pas sur l’outil (l’installation arrive au chapitre 3).

Les 3 éléments à repérer

  • index.html : la page “coquille” qui contient un élément racine (souvent #root).
  • main.jsx / index.jsx : le point d’entrée JavaScript, là où React démarre.
  • App.jsx : votre composant principal, qui contient l’UI (ou une partie de l’UI).
Projet React (idée générale)
├─ index.html         → contient #root
├─ src/
│  ├─ main.jsx        → démarre React, rend <App />
│  └─ App.jsx         → composant principal
└─ package.json       → dépendances, scripts

3) Le point d’entrée : “on rend <App /> dans #root”

Le scénario de base d’une app React est presque toujours celui-ci :

  1. Le navigateur charge index.html.
  2. index.html contient un conteneur (ex : <div id="root"></div>).
  3. Le JavaScript démarre React et “injecte” l’interface dans ce conteneur.

A) Dans index.html : le conteneur racine

<!doctype html>
<html lang="fr">
  <head>...</head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

B) Dans main.jsx : on rend <App />

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

L’idée à retenir : React ne remplace pas la page HTML entière. Il gère surtout ce qui se trouve à l’intérieur de #root.

4) L’arbre de composants : votre UI en “blocs”

Une application React est une arborescence de composants. Le composant App est souvent la racine, puis il “contient” d’autres composants. 

<App />
 ├─ <Header />
 ├─ <Main />
 │   ├─ <Sidebar />
 │   └─ <Content />
 └─ <Footer />

Avantage : chaque morceau d’interface devient un fichier / une fonction claire. Vous évitez les énormes pages monolithiques.

5) Render / Re-render : quand et pourquoi l’UI se met à jour

En React, on doit comprendre une règle simple : quand les données changent, React relance le rendu pour mettre à jour l’écran.

Ce qui déclenche un re-render (au niveau débutant)

  • Un state change (avec useState)
  • Des props reçues par un composant changent

Exemple mental : si value change, alors {value} affiché à l’écran doit changer aussi. React refait le calcul et met l’UI à jour.

Exemple minimal (on verra les détails au chapitre 10)

import { useState } from "react";

function Compteur() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <p>Compteur : {value}</p>
    </div>
  );
}

6) Virtual DOM : l’idée (sans jargon inutile)

Le DOM (Document Object Model) représente la page HTML sous forme d’objets. Modifier le DOM trop souvent, à la main, peut devenir complexe.

React utilise une idée pratique : il garde une représentation “virtuelle” de l’UI, compare l’ancienne et la nouvelle, puis applique uniquement les changements nécessaires à l’écran.

À retenir : vous ne codez pas “la comparaison”. Vous décrivez l’UI, React optimise la mise à jour pour vous.

Image mentale

  • Vous décrivez une nouvelle version de l’UI.
  • React repère ce qui a changé.
  • React applique les changements dans la page.

7) Résumé (à retenir)

  • Une app React est souvent une SPA : navigation sans rechargement complet.
  • index.html contient un conteneur (#root), React gère l’UI à l’intérieur.
  • main.jsx rend <App /> dans #root.
  • L’UI est une arborescence de composants.
  • Quand le state ou les props changent, React fait un re-render.
  • Le “Virtual DOM” est une idée d’optimisation : React applique seulement les changements nécessaires.
Aller au chapitre 3 Faire l’exercice Retour au sommaire

8) Exercice pratique (débutant)

Objectif : vérifier que vous comprenez la structure d’une app React et le rôle de #root. Cet exercice peut se faire sur papier, ou directement dans un projet (si vous en avez un).

Consigne

  1. Écrivez l’arbre de composants d’une mini-app “Blog” (simple) avec 5 composants max.
  2. Indiquez quel composant est la racine (souvent App).
  3. Pour deux composants, notez une prop utile (ex : Article reçoit title).
  4. Ajoutez un state possible (ex : isLoggedIn dans App).

Exemple possible (à adapter)

<App />
 ├─ <Header />
 ├─ <ArticleList />
 │   ├─ <Article /> (props : title, author)
 │   └─ <Article />
 └─ <Footer />

Prochaine étape (chapitre 3) : on installe l’environnement et on crée notre première application React.

Continuer : Chapitre 3 Retour au sommaire