Chapitre 3 — Props (passer des données)

📦 Les Props

Les props (raccourci de properties) permettent de passer des données d''un composant parent à un composant enfant. C''est le mécanisme principal de communication descendante en React.

1. Définir et utiliser des props

// Composant enfant
function Salutation(props) {
return <h1>Bonjour {props.nom}, tu as {props.age} ans</h1>;
}

// Composant parent
function App() {
return <Salutation nom="Aminata" age={25} />;
}

2. Destructuring des props

Plus propre et plus lisible :

function Salutation({nom, age}) {
return <h1>Bonjour {nom}, tu as {age} ans</h1>;
}

3. Props par défaut

function Salutation({nom = "Inconnu", age = 0}) {
// ...
}

4. Children (passage de contenu)

Le contenu entre les balises devient automatiquement props.children :

function Carte({children}) {
return <div className="carte">{children}</div>;
}

// Usage:
<Carte><p>Contenu de la carte</p></Carte>

5. Règle d''or des props

🔒 Les props sont en lecture seule. Un composant enfant ne doit JAMAIS modifier les props reçues. Pour des données qui changent, on utilise le state (chapitre suivant).