Pourquoi React ?

1.1Le problème de la manipulation manuelle du DOM

En JavaScript Vanilla (classique), pour modifier ce qui s'affiche à l'écran, tu dois cibler manuellement le DOM. Tu écris du code impératif, c'est-à-dire que tu décris chaque étape technique au navigateur :

// JavaScript impératif : "Comment faire"
const bouton = document.getElementById("bouton-panier");
const badge = document.getElementById("badge-panier");

let articles = 0;

bouton.addEventListener("click", () => {
  articles++;
  // Étape manuelle 1 : Mettre à jour le texte
  badge.textContent = articles;
  
  // Étape manuelle 2 : Changer le style si panier vide ou plein
  if (articles > 0) {
    badge.classList.remove("hidden");
    badge.classList.add("bg-cyan-500");
  }
});

Sur un petit compteur, ça va. Mais imagine une application réelle : un e-commerce ou un dashboard de jeu. Si l'utilisateur ajoute un objet à son équipement, tu dois :

• Mettre à jour le poids de l'inventaire.
• Mettre à jour la force du personnage.
• Actualiser la liste visuelle des objets équipés.
• Vérifier s'il a assez d'or pour cet équipement (et désactiver le bouton d'achat si besoin).

1.2Le modèle déclaratif de React

React résout ce problème en introduisant le modèle déclaratif. Tu ne décris plus comment modifier l'interface étape par étape. Tu décris simplement ce que l'interface doit afficher en fonction de tes données (l'état) :

// React déclaratif : "Ce qu'on veut afficher"
import { useState } from "react";

function Panier() {
  const [articles, setArticles] = useState(0);

  // Tu décris le résultat final. React se charge de faire
  // les sélections et les modifications du DOM à ta place.
  return (
    <div>
      <button onClick={() => setArticles(articles + 1)}>
        Ajouter au panier
      </button>
      
      {/* Si articles > 0, on affiche le badge, sinon rien */}
      {articles > 0 && (
        <span className="bg-cyan-500 text-white px-2 py-1 rounded">
          {articles} articles
        </span>
      )}
    </div>
  );
}

1.3Le Virtual DOM : la vitesse sous le capot

Modifier le DOM du navigateur (la structure HTML de la page) est l'opération la plus lente et la plus coûteuse en performance pour le navigateur. Si tu le modifies trop souvent ou de manière désordonnée, ton site va ramer et saccader.

Pour éviter cela, React utilise une arme secrète : le Virtual DOM (DOM Virtuel).

Grâce au Virtual DOM, si tu as une liste de 10 000 monstres et que tu en modifies un seul, React ne va pas redessiner toute la liste. Il va cibler chirurgicalement la ligne modifiée et ne changer que celle-ci dans le navigateur. C'est transparent pour toi, et ultra rapide pour l'utilisateur.

1.4Démarrer un projet moderne avec Vite

Pour coder avec React aujourd'hui, on utilise Vite. C'est le compagnon de route indispensable qui remplace l'ancien outil obsolète Create React App. Vite configure tout ton projet en quelques secondes et offre un rechargement instantané quand tu modifies ton code.

# 1. Lancer la création du projet avec le template React + TypeScript
npm create vite@latest mon-app-hero -- --template react-ts

# 2. Entrer dans le dossier du projet
cd mon-app-hero

# 3. Installer les dépendances de base
npm install

# 4. Lancer le serveur de développement local
npm run dev

Ouvre ton navigateur sur l'adresse locale fournie par le terminal (généralement http://localhost:5173) : ton serveur de développement tourne et ton application React est prête !

1.5Pourquoi ton projet n'a qu'un seul fichier HTML ?

Si tu as l'habitude de créer un fichier HTML pour chaque page de ton site (comme index.html, contact.html, blog.html), tu risques d'être surpris en ouvrant un projet React. Ici, il n'y a qu'un seul et unique fichier HTML à la racine de ton projet.

C'est ce qu'on appelle une **Single Page Application** (ou SPA pour les intimes). Pas de panique devant ce mot technique : cela signifie simplement "Application sur une seule page". Au lieu de demander au navigateur de charger une toute nouvelle page à chaque clic (ce qui provoque un écran blanc frustrant de quelques secondes), React va simplement vider le contenu de l'écran et y injecter tes nouveaux composants à la volée. Pour ton utilisateur, la navigation devient instantanée, comme dans un jeu vidéo.

Si tu ouvres ce fichier index.html unique, tu verras qu'il est presque vide :

<!-- index.html (simplifié) -->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Mon App Hero</title>
  </head>
  <body>
    <!-- Le point d'ancrage unique de toute ton application -->
    <div id="root"></div>
    
    <!-- L'entrée de ton script React -->
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

C'est le fichier src/main.tsx qui va venir injecter dynamiquement tes composants React dans la div d'identifiant root :

// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; // Ton composant principal
import "./index.css";    // Tes styles globaux

// On cible le point d'ancrage et on y injecte notre composant racine <App />
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

À partir de ce moment, React prend le contrôle absolu de l'affichage. C'est lui qui va dessiner, supprimer et mettre à jour le HTML de ta page au fil de l'utilisation, sans que la page n'ait jamais besoin de se recharger.

1.6Quand utiliser React ?

React est un outil puissant, mais comme toute arme de haut niveau, elle n'est pas adaptée à tous les combats. Voici comment choisir :