Skip to main content

Chapitre 3 : Props et composition

Props, Réutilisabilité des composants, Communication composant parent / enfant

Concepts clés abordés​

  • Props
  • Réutilisabilité des composants
  • Communication composant parent / enfant

Props​

Les props sont des données passées d’un composant parent à un composant enfant. Elles permettent de rendre les composants dynamiques et configurables. Les props sont en lecture seule : un composant ne doit jamais les modifier directement. Elles constituent le principal moyen de communication entre composants.

Attention à la valeur par défaut d’une props. Par exemple, une props qui est initialisée à tableau vide. Si on lui réassigne un tableau vide, alors React va considérer que la valeur a changé alors que ce n’est pas le cas (car [ ] !== [ ]).

Réutilisabilité des composants​

Grâce aux props, un même composant peut être réutilisé dans différents contextes avec des valeurs différentes. Cela évite la duplication de code et améliore la maintenabilité. Les composants deviennent ainsi plus génériques et plus flexibles. Cette réutilisabilité est un des grands avantages de React.

Communication composant parent / enfant​

Dans React, la communication se fait du parent vers l’enfant via les props. Lorsqu’un enfant doit provoquer un changement, il utilise une fonction fournie par le parent (callback). Ce mécanisme respecte le flux de données unidirectionnel. Il permet de garder un contrôle clair sur l’état de l’application.

Interactions utilisateur​

Les interactions utilisateur, comme les clics ou les saisies, sont gérées via des événements. Ces événements déclenchent des mises à jour de l’état. React met alors automatiquement à jour l’interface. Ce mécanisme est au cœur de l’interactivité des applications React.

Questions clés (validation des acquis du chapitre)​

  • Qu’est-ce qu’une prop en React et à quoi sert-elle ? Une prop est une donnée transmise d’un composant parent à un composant enfant. Elle sert à rendre les composants dynamiques et configurables en leur fournissant des valeurs depuis l’extérieur.
  • Comment s’effectue la communication entre un composant parent et un composant enfant en React ? La communication se fait du parent vers l’enfant via les props. Si l’enfant doit déclencher une action, le parent lui transmet une fonction (callback) que l’enfant peut appeler.
  • En quoi les props permettent-elles de rendre les composants réutilisables ?
    Les props permettent d’utiliser un même composant dans différents contextes en lui passant des valeurs différentes, ce qui évite la duplication de code et améliore la maintenabilité de l’application.

Exercices :​

Exercice - Passer de la donnée via une props​

  1. Le titre affiché par le composant “Title” doit être reçu via les props.

Pour approfondir: https://alexsidorenko.com/blog/react-prop-drilling-composition

Liens utiles :
https://react.dev/learn/adding-interactivity#responding-to-events