Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

5.2. Les Props

Comme vu dans le schéma précédent concernant les composants en React, il est possible de passer des valeurs d’entrées à vos composants.

En effet, votre application sera découpée en plusieurs composants différents, et les props sont le moyen le plus simple pour faire communiquer les composants entre eux. Par exemple, imaginez que vous avez un composant qui gère l’affichage d’un pokémon (oui oui, vous avez bien lu 🤓). Eh bien, vous pourriez passer une variable pokemon à ce composant, depuis un composant « parent », et ensuite le composant « fils » sera chargé d’afficher le pokémon :

<PokemonDetail pokemon={pokemon} />

Dans ce code, PokemonDetail est votre composant React, qui affiche un pokémon.

Le premier pokemon est une prop, qui indique que le composant pokemon-detail a besoin d’un pokémon pour pouvoir fonctionner correctement.

Enfin, {pokemon} est la syntaxe JSX permettant d’écrire du code JavaScript dans du HTML (nous verrons cela bientôt). Dans notre cas, cela permet de passer la valeur du pokémon à afficher à la prop du composant.

De plus, ce système vous permet de mieux séparer le rôle de chaque composant.

Par contre, retenez que les props sont facultatives. Vous pouvez tout à fait développer des composants qui n’ont aucune props en entrée, c’est tout à fait courant et cela ne doit pas vous gêner.

Pour retenir ce que sont les props, vous pouvez utiliser le moyen mémo-technique suivant : Les props d’un composant React sont l’équivalent des attributs pour une balise HTML.