Communication parent-enfant avec les props

Introduction

Jusqu'à présent, nos composants ont été des entités autonomes. Ils gèrent leur propre état avec useState, exécutent des effets secondaires avec useEffect et gardent des références avec useRef. Mais une véritable application est un assemblage de composants qui collaborent. La question est donc : comment les faire communiquer ?

Cette leçon aborde le concept le plus fondamental de la communication dans React : les props. L'objectif est d'apprendre à passer des données entre composants parents et enfants à l'aide des props.

Les props sont le ciment qui lie vos composants. C'est le mécanisme par lequel un composant parent peut configurer et transmettre des informations à ses enfants.

Pour notre objectif de créer des scènes 3D, maîtriser les props est indispensable. Imaginez créer un composant <Planete />. Grâce aux props, vous pourrez le réutiliser partout en lui passant simplement des données différentes : <Planete nom="Terre" taille={1} couleur="bleu" /> ou <Planete nom="Mars" taille={0.5} couleur="rouge" />.

À la fin de cette leçon, vous serez capable de construire des interfaces modulaires et dynamiques en faisant circuler l'information dans votre arbre de composants.

1. Que sont les props et comment les utiliser ?

En React, "props" est l'abréviation de "properties" (propriétés). Si vous avez déjà écrit du HTML, vous les connaissez déjà intuitivement. Dans <img src="mon-image.jpg" alt="une description">, src et alt sont des attributs. Les props sont l'équivalent pour vos propres composants React.

Un composant parent passe des props à un composant enfant en les ajoutant comme des attributs dans le JSX. Le composant enfant reçoit alors ces props sous la forme d'un unique objet, qui est le premier argument de sa fonction.

La vidéo suivante est une excellente introduction qui vous montrera concrètement comment cela fonctionne.

Comme vous l'avez vu, le composant enfant reçoit un objet props. Pour accéder à une prop spécifique, on utilise la notation props.nomDeLaProp.

Pour une référence écrite, la documentation officielle de React est parfaite.

Un principe fondamental des props est qu'elles sont en lecture seule (immuables) du point de vue du composant enfant. Un enfant ne doit jamais essayer de modifier les props qu'il reçoit. Si une donnée doit changer, c'est au composant parent de la modifier (via son état) et de passer une nouvelle version des props à l'enfant, ce qui provoquera un nouveau rendu.

2. Passer différents types de données

Les props ne se limitent pas aux chaînes de caractères. Vous pouvez passer n'importe quelle valeur JavaScript : nombres, booléens, tableaux, objets et même d'autres composants ou des fonctions.

La règle est simple :

• Pour les chaînes de caractères, vous pouvez utiliser des guillemets : titre="Mon Titre".
• Pour tout le reste (nombres, variables, objets...), vous devez utiliser des accolades {} pour "entrer en mode JavaScript" : age={30}.

La vidéo que nous avons commencée aborde également ce point, ainsi qu'une prop très spéciale : children.

La prop children est extrêmement utile pour créer des composants de "mise en page" ou des "conteneurs" génériques (comme des cartes, des panneaux, des boîtes de dialogue) qui ne se soucient pas de ce qu'ils contiennent.

3. Bonnes pratiques : Déstructuration, valeurs par défaut et fonctions

Pour rendre notre code plus lisible et robuste, nous utilisons quelques techniques courantes.

1. Déstructuration des props : Au lieu d'écrire props.nom et props.age partout, on peut extraire les propriétés directement dans la signature de la fonction : function MonComposant({ nom, age }). C'est plus propre et plus clair.
2. Valeurs par défaut : On peut assigner une valeur par défaut à une prop au cas où le parent ne la fournirait pas : function Avatar({ size = 100 }).
3. Passer des fonctions : C'est le principal moyen pour un enfant de communiquer avec son parent. Le parent passe une fonction en prop, et l'enfant l'appelle en réponse à un événement (ex: un clic).

La suite de la vidéo illustre parfaitement ces points.

4. Cas pratique : Afficher une liste de données

L'un des cas d'usage les plus courants pour les props est d'afficher une liste dynamique de données. Le schéma est toujours le même :

1. Le composant parent détient un tableau de données (par exemple, une liste de tâches ou de produits).
2. Il utilise la méthode .map() pour transformer chaque élément du tableau en une instance d'un composant enfant.
3. Il passe les données de chaque élément (nom, id, etc.) en props au composant enfant.
4. Il n'oublie pas de passer une prop spéciale et unique, key, à chaque élément de la liste pour aider React à optimiser les rendus.

Le guide du MDN propose un excellent exemple de cette approche en construisant une liste de tâches.

5. Exercice : Extraire un composant

Maintenant, à vous de jouer ! L'exercice suivant consiste à prendre un composant qui contient du code répétitif et à en extraire un sous-composant réutilisable. C'est l'essence même de l'utilisation des props.

// Le nouveau composant Profile
function Profile({ person, size, imageId, profession, awards, discovered }) {
  return (
    <section className="profile">
      <h2>{person.name}</h2>
      <img
        className="avatar"
        src={getImageUrl({ imageId })} // Utilise une fonction helper fournie
        alt={person.name}
        width={size}
        height={size}
      />
      <ul>
        <li>
          <b>Profession: </b> 
          {profession}
        </li>
        <li>
          <b>Awards: {awards.count} </b> 
          ({awards.list})
        </li>
        <li>
          <b>Discovered: </b>
          {discovered}
        </li>
      </ul>
    </section>
  );
}

// Le composant Gallery refactorisé
export default function Gallery() {
  return (
    <div>
      <h1>Notable Scientists</h1>
      <Profile 
        person={{ name: 'Maria Skłodowska-Curie' }}
        imageId="szV5sdG"
        size={70}
        profession="physicist and chemist"
        awards={{ count: 4, list: 'Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal' }}
        discovered="polonium (element)"
      />
      <Profile 
        person={{ name: 'Katsuko Saruhashi' }}
        imageId="YfeOqp2"
        size={70}
        profession="geochemist"
        awards={{ count: 2, list: 'Miyake Prize for geochemistry, Tanaka Prize' }}
        discovered="a method for measuring carbon dioxide in seawater"
      />
    </div>
  );
}

Conclusion

Félicitations ! Vous avez maîtrisé le concept le plus essentiel pour construire des applications React structurées. Le passage de props est le mécanisme qui transforme une collection de composants isolés en une application cohérente et fonctionnelle.

Points clés à retenir :

• Les props sont des données passées d'un composant parent à un composant enfant.
• Elles sont en lecture seule pour l'enfant.
• On utilise des {} en JSX pour passer des valeurs non-string (nombres, objets, fonctions...).
• La déstructuration (function C({ prop1, prop2 })) rend le code plus propre.
• Le contenu imbriqué est accessible via la prop spéciale children.
• Passer des fonctions en props est une technique clé pour permettre à un enfant de communiquer en retour avec son parent.

Aperçu de la prochaine leçon :
Nous avons terminé les fondamentaux de React ! Vous avez maintenant tous les outils nécessaires (useState, useEffect, useRef et les props) pour commencer à construire des choses intéressantes. Dans la prochaine leçon, nous ferons un grand pas en avant : nous allons configurer un projet web moderne avec Three.js et Vite. Ce sera le point de départ de notre aventure dans la 3D. Préparez-vous à installer vos premiers outils et à voir apparaître votre première "scène" vide