La grande reconstruction : ton site web en React

Réécris ton site web du Niveau 1 en React. Le même site web, pour la troisième fois – cette fois comme un pro.

Ta mission

Tu vas prendre ton site web des Niveaux 1–2 et le reconstruire en React. Ça ressemble à un pas en arrière ? Ce n’en est pas un – c’est le meilleur entraînement : tu as déjà le contenu et le design, donc tu peux te concentrer purement sur la nouvelle technique. Et à la fin, tu verras noir sur blanc pourquoi les pros trouvent ça utile.

Le plan de reconstruction

Découpe le site web en composants. Prends du papier et un crayon (sérieusement !) et esquisse ton site web en boîtes : Header, Gallery, Quiz, Footer… Chaque boîte = un fichier dans src/.
Déplace le HTML dans les composants. Copie morceau par morceau depuis tes anciens fichiers .html vers le JSX. Attention aux différences familières : class → className, chaque composant retourne un élément enveloppant. Copie tes images dans le dossier public/ du projet Vite – alors les chemins comme /images/team.jpg fonctionnent sans changement.
Déplace le CSS. Copie le contenu de ton style.css dans src/App.css. Ça devrait fonctionner presque sans changement – le CSS reste du CSS.
Extrais les données dans des tableaux. Cartes, résultats, photos de galerie – tout ce qui se répète, transforme-le en tableau d’objets + .map(), comme tu l’as appris dans la leçon composants.

Réécris les sorts du Niveau 2 en state. Voici un tableau de conversion :

Niveau 2 (JavaScript simple)	React
`getElementById` + `textContent`	state + `{value}` dans le JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	state booléen + `{condition && (...)}`
un compteur avec une variable	`useState` avec un nombre

Montre-moi : le mode sombre à la manière React

Réécrivons un sort ensemble, pour voir la conversion en action :

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

Et dans Header.jsx, le bouton reçoit une fonction comme prop :

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

Une dernière nouveauté : une prop peut aussi être une fonction. App possède le state et prête à son enfant un bouton pour le basculer. Ça s’appelle « le state vit en haut », et c’est le pattern le plus courant en React.

Checklist de reconstruction

Le site web est découpé en au moins 4 composants dans des fichiers séparés
Les éléments répétitifs (cartes, photos…) naissent d’un tableau via .map()
Au moins deux endroits interactifs tournent sur useState
Le mode sombre fonctionne et est mémorisé (localStorage)
Aucune erreur dans la console
Il n’y a nulle part de getElementById dans le code 😉

💡

Se bloquer fait partie du jeu. Cette leçon est un marathon, pas un sprint – n’hésite pas à la répartir sur plusieurs jours. Quand tu es bloqué(e) : la console (F12), le message d’erreur de Vite, et comparer avec les exemples des leçons précédentes. C’est exactement comme un pro débogue.

✅

Vérifie : Ton site web tourne sur localhost et a (presque) le même look qu’avant – mais à l’intérieur, il est fait de composants, de données et de state. Maintenant essaie d’ajouter une carte au tableau de données et regarde comme c’est peu de travail. C’est toute la raison d’être de React.

Ce que tu retiens de cette leçon

La reconstruction : découper en composants → déplacer le HTML et le CSS → données dans des tableaux → sorts en state.
Une prop peut aussi être une fonction – un parent prête à ses enfants des boutons pour contrôler son propre state.
Même résultat, structure plus propre : moins de copie, changements plus faciles. C’est du progrès qu’on voit vraiment.