📘 Chapitre – Utiliser les props et JSX

1. 🎯 Objectif pédagogique

Comprendre comment utiliser les props pour passer des données aux composants et maîtriser les bases du JSX pour créer des interfaces dynamiques.

2. 📚 Concepts abordés

• Qu’est-ce qu’un prop (propriété de composant)
• Passer des données d’un composant parent à un enfant
• Syntaxe JSX (balises, expressions {})
• Valeurs dynamiques dans le JSX
• Valeurs par défaut avec defaultProps ou arguments par défaut

3. 🧠 Explication théorique

Les props permettent aux composants de recevoir des données externes pour être plus réutilisables.

Exemple de props :

function Bonjour(props) {
  return <h2>Bonjour {props.nom} !</h2>;
}

Appel dans un parent :

<Bonjour nom="Alice" />

Le JSX ressemble à du HTML, mais permet d’évaluer des expressions JavaScript en utilisant {} :

const age = 25;
<p>J’ai {age} ans.</p>

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un composant Bonjour recevant un nom et un message via des props.

Arborescence projet :

react-demo/
 ├── src/
 │   ├── App.jsx
 │   └── Bonjour.jsx

Étape 1 : Modifier Bonjour.jsx

function Bonjour({ nom, message }) {
  return <h2>Bonjour {nom}, {message}</h2>;
}

export default Bonjour;

Étape 2 : Passer des props dans App.jsx

import Bonjour from './Bonjour';

function App() {
  return (
    <div>
      <h1>Page principale</h1>
      <Bonjour nom="Alice" message="bienvenue sur notre site React !" />
      <Bonjour nom="Bob" message="content de te voir ici." />
    </div>
  );
}

export default App;

Étape 3 : Valeurs par défaut

On peut définir des valeurs par défaut dans le composant :

Bonjour.defaultProps = {
  message: "ravie de vous voir !"
};

Étape 4 : Expressions dans le JSX

const articles = 5;
<p>Vous avez {articles} articles non lus.</p>

5. 🧾 Résumé et points-clés

• Les props permettent de personnaliser les composants.
• Le JSX accepte des expressions JavaScript avec {}.
• defaultProps ou les valeurs par défaut dans les arguments rendent les composants plus robustes.
• Les composants React sont purs : ils ne modifient pas les props reçus.