1. L’importance des props

Comme nous l’avons déjà vu, il est possible de passer des données à un composant React via les props.

Pour rappel, les props sont facultatives, car un composant peut très bien fonctionner sans. On peut également passer une ou plusieurs props à un composant. Dans l’exemple ci-dessous, on passe une props qui est un pokémon, au composant PokemonCard :

{/* La syntaxe des props ressemble aux attributs HTML. */}
<PokemonCard pokemon={pokemon} />

Tout cela, nous l’avons déjà abordé brièvement. La vraie question que nous nous posons, c’est d’où vient cette prop de pokémon ? Comme faut-il faire pour la récupérer, et comment la passer au bon composant. La réponse est courte mais a de nombreuses implications :

On passe des props à un composant depuis un composant parent.

L’intérêt principal des props est qu’elles permettent de mieux découper votre application. En effet, lorsque notre application va commencer à devenir plus importante, nous ne pourrons pas mettre tout le code de l’application dans un seul composant. Imaginez que notre composant App.tsx fasse deux milles lignes de code, ce serait impossible de travailler sereinement par la suite !

En fait, les props sont le moyen le plus simple de faire communiquer les composants de notre application entre eux, afin qu’ils « travaillent » ensemble.

Il va donc falloir découper notre application en plusieurs composants plus petit. Afin d’avoir un exemple concret, nous allons imaginer deux composants : PokemonsList et PokemonCard. Le premier a pour mission de récupérer une liste de pokémons, et ensuite de passer chaque pokémon au composant PokemonCard sous la forme d’une prop. La mission du composant PokemonCard sera d’afficher le pokémon à proprement parler. Notre application ressemblera alors à un arbre de composants comme ceci :

Les « props » permettent de mieux découper son application en plusieurs petits composants.

En vert sur le schéma ci-dessus, on retrouve plusieurs composants, avec chacun un rôle précis.

En bleu, on représente le state du composant « parent » de la liste des pokémons, qui contiendra toute les pokémons à afficher.

Enfin en orange, il s’agit de la prop que chaque composant « fils » recevra. Via cette prop, le composant sera chargé d’afficher le pokémon correspondant. Dans notre schéma ci-dessus, le premier composant PokemonCard à gauche est chargé d’afficher les informations du pokémon Bulbizarre, et ainsi de suite pour les autres.

Attend, mais pourquoi créer autant de composants pour afficher simplement une liste de pokémons… est-ce vraiment utile ?

Et bien, je peux vous assurer que oui. Pour le moment, cela peut vous sembler inutile, et que l’on se complique l’existence pour rien.

En fait, c’est tout le contraire, nous sommes entrain de grandement nous simplifier la vie… pour après ! Nous ne construisons pas une application pour demain ou après-demain, mais pour le long terme. Si on est amené à travailler sur cette application dans 3 mois, il faut que nous puissions comprendre notre code rapidement, afin de pouvoir intervenir là où il y en a besoin. De plus, si nous ajoutons de nouvelles fonctionnalités, et donc du code supplémentaire, nous pourrons organiser tout ça de la bonne façon.

Donc faites-moi confiance pour le moment, vous vous remercierez par la suite.

Bon, après, tout cela paraît assez simple sur le papier, mais on se demande bien comment mettre tout ça en place en terme de code.

Pas d’inquiétudes, c’est l’objectif de ce chapitre, et nous allons mettre tout cela en place ensemble. Ce sera beaucoup plus claire ensuite ! 😉