Tutoriel React — Chapitre 1

Plan du chapitre

• 1) React : définition simple (et correcte)
• 2) Le problème que React résout
• 3) Les 3 concepts à retenir
• 4) Ce que React n'est pas
• 5) Exemple concret : "sans React" puis "avec React"
• 6) Résumé (à retenir)
• 7) Exercice pratique (débutant)

1) React : définition simple (et correcte)

React est une bibliothèque JavaScript qui sert à construire des interfaces utilisateur. Une interface utilisateur, c'est tout ce que l'utilisateur voit et manipule : boutons, formulaires, menus, listes, pages, etc.

Pourquoi on dit "bibliothèque" et pas "framework" ?

Une bibliothèque se concentre sur un besoin précis (ici : l'interface). Un framework impose souvent une structure globale complète. React est plutôt "au milieu" : il peut être simple au départ, puis s'insérer dans un écosystème plus large (routing, gestion d'état, build, etc.).

2) Le problème que React résout

Quand un site devient interactif (ex : filtre, recherche, panier, profil, notifications), le code peut vite devenir difficile à maintenir. Le problème n'est pas "écrire du JavaScript", mais :

3) Les 3 concepts à retenir

A) Le composant

Un composant est un "morceau d'interface" réutilisable. Exemple : un bouton, une carte produit, une barre de navigation, une liste d'articles.

function CardProduit() {
  return (
    <div>
      <h3>Nom du produit</h3>
      <p>Prix : 12€</p>
    </div>
  );
}

B) Les données (props) et l'état (state)

Pour qu'une interface soit dynamique, elle dépend de données : un nom d'utilisateur, une liste, un compteur, un panier, etc.

• Props : données qu'un composant reçoit (comme des paramètres d'une fonction).
• State : données internes au composant, qui peuvent changer dans le temps.

C) Le rendu (render)

Le rendu, c'est le moment où React produit l'interface à afficher. Quand les données changent, React relance le rendu pour mettre à jour l'écran.

4) Ce que React n'est pas

Beaucoup de débutants confondent React avec d'autres notions. Clarifions :

5) Exemple concret : "sans React" puis "avec React"

Prenons un exemple très simple : un compteur (un nombre qui augmente quand on clique sur un bouton).

Sans React (JavaScript + DOM)

Ici, vous devez : (1) trouver l'élément dans la page, (2) changer son contenu, (3) gérer l'événement.

<button id="btn">+1</button>
<p>Compteur : <span id="count">0</span></p>

<script>
  let value = 0;
  const btn = document.getElementById("btn");
  const span = document.getElementById("count");

  btn.addEventListener("click", () => {
    value = value + 1;
    span.textContent = value; // on met à jour l'UI à la main
  });
</script>

Avec React (idée générale)

En React, vous exprimez l'UI en fonction de l'état. Quand l'état change, React met l'UI à jour. Vous ne manipulez pas le DOM "à la main" pour ce cas.

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) Résumé (à retenir)

• React est une bibliothèque JavaScript pour construire des interfaces utilisateur.
• React aide à organiser l'UI en composants réutilisables.
• React met à jour l'écran quand les données changent : UI = f(données).
• React n'est pas un langage, ni un back-end, ni une base de données.
• Vous comprendrez React plus vite si vous gardez cette idée : "Je décris l'UI, React la synchronise."

7) Exercice pratique (débutant)

Objectif : vérifier que vous avez bien compris les notions composant, données et UI. Pas besoin de coder React tout de suite : l'exercice est volontairement simple.

Consigne

1. Choisissez une interface que vous connaissez (ex : carte produit, carte profil, message, bouton).
2. Découpez-la en composants (3 à 6 maximum).
3. Pour chaque composant, notez :
   • ce qu'il affiche (UI),
   • les données dont il a besoin (props),
   • et si certaines données peuvent changer (state).

Exemple guidé : "Carte Profil"

App
 ├─ Header
 └─ ProfileCard
     ├─ Avatar
     ├─ ProfileInfo
     └─ FollowButton

Questions :

• Quelles props pour ProfileCard ? (ex : nom, métier, avatarUrl)
• Le bouton "Suivre" a-t-il un state ? (ex : suivi = true/false)
• Quand le state change, qu'est-ce qui doit changer dans l'UI ?