Pourquoi les pros utilisent React

Tu te souviens avoir copié ce menu ?

Au Niveau 1, tu avais un en-tête avec un menu sur chaque page. Et chaque fois que tu ajoutais une nouvelle page, tu devais copier le menu – et le corriger partout à chaque changement. Agaçant avec trois pages, un cauchemar avec trente. Et cette douleur est exactement où commence notre histoire.

Composants : écris une fois, utilise partout

Les pros se sont dit : et si le menu était un seul morceau de code qu’on « insère » sur chaque page ? Tu le changes à un endroit – il change partout. Un morceau comme ça s’appelle un composant.

Et ce n’est pas juste le menu. Regarde ton site web avec les yeux d’un jeu de construction :

• une carte de joueur (tu l’as 4× – et elle ne diffère que par le nom et la position),
• une photo dans la galerie (10× – seule l’image diffère),
• un bouton (partout – seul le texte diffère).

Le site web d’un pro n’est pas un tas de fichiers HTML. C’est une boîte de LEGO : une poignée de blocs personnalisés (composants) assemblés en une application complète.

C’est quoi React

React est un outil (une bibliothèque) pour JavaScript qui gère ce genre d’assemblage. Il a été inventé chez Facebook, c’est gratuit, et une énorme partie d’internet est construite dessus : Facebook, Instagram, Netflix, Airbnb… Un composant en React ressemble à ça – ne t’inquiète pas, on regarde juste pour l’instant :

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

Et on l’utilise comme une balise HTML personnalisée :

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Tu reconnais ça ? C’est une fonction (du Niveau 2) qui retourne du HTML. La carte est écrite une fois et utilisée avec des données différentes – comme un tampon en caoutchouc avec des lettres interchangeables.

Super-pouvoir numéro deux : React gère le redessinage

Au Niveau 2 tu as écrit : « trouve l’élément, change son texte, ajoute une classe… » Dans les grandes applications, il y a tellement de ce réarrangement manuel qu’on peut s’y perdre. React renverse ça :

Tu décris à quoi la page devrait ressembler pour des données données. Quand les données changent, React détermine tout seul quoi redessiner.

Le score passe de 0 à 1 ? Tu ne cherches aucun élément – tu changes juste le nombre, et React redessine ce qu’il faut. Tu le verras en action dans la leçon sur le state.

Ce qui t’attend dans ce niveau

1. Tu installeras les outils pro : le terminal et Node.js (prochaine leçon).
2. Tu configureras ta première app React avec Vite.
3. Tu apprendras les composants, les props et le state.
4. Tu reconstruiras ton site web du Niveau 1 en React.
5. Tu construiras ton propre serveur Node.js et y connecteras un livre d’or.

Ce que tu retiens de cette leçon

• Copier le même code à plusieurs endroits est un piège – tu l’as découvert toi-même au Niveau 1.
• Un composant est une fonction qui retourne un morceau de page. Écris-le une fois, utilise-le plusieurs fois avec des données différentes.
• React redessine la page pour toi : tu changes les données, il change l’écran.

© 2026 Ing. Martin Polak / AlgoRhino · Conditions d'utilisation du contenu