Tutoriel React — Chapitre 11

Plan du chapitre

• 1) Vision globale d’une mini‑app
• 2) Découper l’interface en composants
• 3) Où placer le state ? (règle essentielle)
• 4) Faire circuler les données (props)
• 5) Faire remonter des actions (events)
• 6) Organisation des dossiers
• 7) Exemple complet guidé
• 8) Erreurs fréquentes
• 9) Résumé (à retenir)
• 10) Exercice pratique

1) Vision globale d’une mini‑app

Une application React n’est pas une page HTML unique. C’est un arbre de composants.

App
├─ Header
├─ Counter
├─ UserForm
└─ Footer

2) Découper l’interface en composants

Règle simple :

• si une partie de l’UI se répète → composant
• si une partie a une responsabilité claire → composant

Exemple

• Header : titre de l’application
• Counter : compteur avec boutons
• UserForm : formulaire utilisateur
• Footer : pied de page

3) Où placer le state ? (règle essentielle)

Le state doit être placé dans le composant le plus haut qui en a besoin.

Si deux composants ont besoin de la même donnée, le state doit être remonté dans leur parent commun.

4) Faire circuler les données (props)

Les données circulent toujours dans un sens :

• du parent vers l’enfant via les props

function Counter({ value }) {
  return <p>Compteur : {value}</p>;
}

export default function App() {
  const [count, setCount] = useState(0);

  return <Counter value={count} />;
}

5) Faire remonter des actions (events)

Un enfant ne modifie pas directement le state du parent. Il déclenche une fonction fournie par le parent.

function Counter({ value, onIncrement }) {
  return (
    <div>
      <p>{value}</p>
      <button onClick={onIncrement}>+1</button>
    </div>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => setCount((c) => c + 1);

  return <Counter value={count} onIncrement={handleIncrement} />;
}

6) Organisation des dossiers

Une structure simple et efficace pour débuter :

src/
├─ App.jsx
├─ main.jsx
└─ components/
   ├─ Header.jsx
   ├─ Counter.jsx
   ├─ UserForm.jsx
   └─ Footer.jsx

• 1 composant = 1 fichier
• Noms clairs, en majuscule
• Pas de logique complexe dans App

7) Exemple complet guidé

App gère le state, les composants enfants affichent et déclenchent des actions.

function Header() {
  return <h1>Mini‑app React</h1>;
}

function Counter({ value, onIncrement }) {
  return (
    <div>
      <p>Compteur : {value}</p>
      <button onClick={onIncrement}>+1</button>
    </div>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Header />
      <Counter value={count} onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

8) Erreurs fréquentes

9) Résumé (à retenir)

• Une app React = un arbre de composants
• Le state est placé le plus haut possible
• Données ↓ via props, actions ↑ via fonctions
• Une structure claire évite 80% des bugs débutants

10) Exercice pratique

Créez une mini‑application avec :

• Un composant Header
• Un composant Counter (+ / -)
• Un composant UserForm (champ prénom)

Le state doit être centralisé dans App.