Props React pour débutants : transformer des composants statiques en modèles

Diviser une interface React en composants n’est que la moitié du processus de réutilisation. Un composant qui affiche toujours le même texte n’est qu’une unité à copier-coller, et non un élément de construction. Les props sont le mécanisme qui permet à un composant d’afficher du contenu différent à chaque utilisation. Ce guide explique ce qu sont les props, comment les données se transmettent du parent au enfant, comment lire les props à l’intérieur d’un composant, ainsi que quels types de valeurs on peut transmettre, afin de transformer des composants codés manuellement en modèles réutilisables.

Lorsqu’un composant ne peut afficher qu’une seule chose

Une fois que vous savez comment construire des composants, une structure typique d’application ressemble à ceci, avec un élément racine App qui affiche plusieurs sections :

App
│
├── Navbar
├── Hero
├── Features
├── Footer

Imaginons maintenant une fiche produit pour un magasin en ligne. Elle affiche un nom, un prix, une note et un bouton d’achat :

-------------------------
📱 iPhone 16

₹79,999
⭐⭐⭐⭐⭐
Buy Now
-------------------------

Puis arrive l’exigence : afficher 500 produits. La carte telle qu’elle est conçue ne peut montrer que ce seul téléphone à ce seul prix, de sorte que les ordinateurs portables, les écouteurs et les montres nécessiteraient chacun un composant presque identique, ce qui annule l’intérêt même des composants. Il faut maintenir une structure fixe tout en fournissant des données différentes à chaque fois. C’est là que les props interviennent.

Qu’est-ce que les props ?

« Props » est l’abréviation de « properties ». Ce sont les valeurs que le composant parent transmet au composant enfant lorsqu’il le rend. Le composant définit la structure et le style ; les props fournissent les détails qui rendent chaque instance unique.

Une analogie culinaire aide à comprendre. Une pizzeria ne crée pas une nouvelle recette pour chaque commande. Elle dispose d’une seule recette et reçoit différentes instructions par commande : fromage supplémentaire, champignons, olives, maïs. La recette correspond au composant, et les garnitures représentent les props.

En d’autres termes, un composant agit comme un modèle, et les props remplissent les espaces vides. Au lieu de créer une carte distincte qui affiche toujours la même chose, comme ceci :

Product Card
iPhone

on crée une carte de produit générique et on lui transmet des données différentes là où on l’utilise.

Parents, enfants et flux de données unidirectionnel

Les props n’ont de sens que par rapport à la relation entre les composants. Chaque application React est un arbre dans lequel certains composants rendent d’autres visibles :

App
│
├── Navbar
├── Hero
├── ProductCard
└── Footer

Ici, App est le parent, tandis que Navbar, Hero, ProductCard et Footer en sont les enfants. Le parent décide quels enfants afficher, et il peut également fournir des informations à chacun d’eux. Ces informations constituent ses props.

React impose un flux de données unidirectionnel : les props se déplacent vers le bas, du parent vers l’enfant.

App
│
│   title
│   price
│   rating
▼
ProductCard

L’enfant reçoit title, price et rating, mais il ne peut pas envoyer de nouvelles valeurs vers le haut via ses props. Du point de vue de l’enfant, les props sont également en lecture seule. Un composant ne doit jamais modifier les props qu’il reçoit ; si quelque chose doit changer avec le temps, cela doit figurer dans l’état, généralement géré par le parent. Lorsqu’un enfant a besoin de signaler quelque chose vers le haut, comme un clic, le parent lui transmet une fonction en tant que prop et l’enfant l’appelle. Comme les données ne circulent qu’en une seule direction, on peut toujours retracer l’origine d’une valeur en remontant dans la hiérarchie, ce qui facilite grandement la détection des erreurs.

Votre premier composant avec des props

Commencez par un composant qui salue quelqu’un par son nom. Il accepte un paramètre appelé props et lit props.name à l’intérieur de son JSX :

function Welcome(props) {
  return (
    <h1>Hello, {props.name}</h1>
  );
}

export default Welcome;

Le composant parent le rend et fournit le nom en tant qu’attribut :

import Welcome from "./Welcome";

function App() {
  return (
    <>
      <Welcome name="Ayush" />
    </>
  );
}
export default App;

Le résultat rendu est :

Hello, Ayush

Fonction de chaque élément de la syntaxe

Passer une propriété revient à écrire un attribut HTML sur la balise du composant :

<Welcome name="Ayush" />

Il est utile d’y voir l’appel d’une fonction avec des arguments. Du côté récepteur, le composant est une fonction dont le premier paramètre correspond aux propriétés :

function Welcome(props)

React rassemble tous les attributs que vous avez écrits sur la balise en un seul objet simple et le transmet comme ce paramètre. Lire une valeur correspond à un accès normal aux propriétés :

props.name

Puisque le composant parent a transmis cet attribut :

name="Ayush"

le composant se rend comme suit :

Hello, Ayush

Le nom props n’est qu’une convention. De nombreux projets le déstructurent dans la liste des paramètres, comme dans function Welcome({ name }).

Transfert de plusieurs props en même temps

Les composants réels ont généralement besoin de plus d’une valeur. Vous pouvez ajouter autant d’attributs que vous le souhaitez. Notez que les chaînes de caractères peuvent être écrites entre guillemets, tandis que les nombres et les autres valeurs JavaScript doivent être placés entre accolades. Le fragment ci-dessous manque d’un espace entre le nom du composant et le premier attribut ; il devrait se lire <Welcome name=...:

<Welcomename="Ayush"
    company="OpenAI"
    experience={6}
/>

Le composant lit chaque prop par son nom :

function Welcome(props) {

return (
    <>
      <h2>{props.name}</h2>
      <p>{props.company}</p>
      <p>{props.experience} Years</p>
    </>
  );
}

Et affiche :

Ayush
OpenAI
6 Years

En changeant les props, le même composant affiche des informations complètement différentes.

Carte de produit réutilisable

Retour au magasin. La carte lit désormais son titre, son prix et sa note à partir de props plutôt que de les coder directement :

function ProductCard(props) {
return (
    <div>
      <h2>{props.title}</h2>
      <p>₹ {props.price}</p>
      <p>{props.rating}</p>
    </div>
  );
}
export default ProductCard;

Le composant parent peut afficher autant de cartes qu’il le souhaite, chacune avec ses propres données. Le prix est transmis sous forme de nombre entre accolades, tandis que le titre et la note sont des chaînes de caractères :

<ProductCard
title="iPhone 16"
price={79999}
rating="⭐⭐⭐⭐⭐"
/>
<ProductCard
title="Samsung S25"
price={68999}
rating="⭐⭐⭐⭐"
/>
<ProductCard
title="MacBook Air"
price={99999}
rating="⭐⭐⭐⭐⭐"
/>

Un seul composant, trois produits différents, sans marquage dupliqué. Pour 500 produits, vous n’écrieriez pas non plus 500 balises à la main : les données proviendraient d’un tableau, et vous afficheriez les cartes à l’aide de products.map(...), en transmettant les champs de chaque élément comme props et en attribuant à chaque carte une key unique.

Pourquoi les props permettent la réutilisation

Sans props, un magasin a besoin d’un composant distinct pour chaque produit :

ProductCard1
ProductCard2
ProductCard3
ProductCard4
ProductCard5

Cela signifie de nombreux fichiers contenant des codes presque identiques, où tout changement de conception doit être répété partout. Avec les props, le flux consiste en un composant alimenté par des données variables :

ProductCard
↓
Different Product Data
↓
Multiple Cards

Un seul fichier définit la carte ; les instances diffèrent uniquement par leurs données. C’est le modèle de base des grandes applications React et des systèmes de conception.

Pensez à un formulaire standard : tout le monde remplit les mêmes champs, tels que le nom, l’âge et l’adresse, avec des détails différents. Le formulaire vierge est le composant ; les informations saisies sont les props.

Quels types de valeurs pouvez-vous passer

Les props ne sont pas limités au texte. N’importe quelle valeur JavaScript peut être transmise. Les chaînes de caractères peuvent utiliser des guillemets :

name="Ayush"

Les nombres se placent entre des accolades, afin que React reçoive un véritable nombre plutôt que la chaîne "26" :

age={26}

Les booléens utilisent également des accolades :

isAdmin={true}

Vous pouvez passer la valeur d’une variable :

name={username}

Ou le résultat de n’importe quelle expression, qui est évaluée avant que l’enfant ne la reçoive :

price={500 + 200}

Les tableaux, les objets et les fonctions peuvent être passés de la même manière, à l’intérieur de crochets. Les fonctions en tant que props permettent aux enfants d’informer les parents des événements, et une prop spéciale appelée children permet à un composant d’encadrer tout markup placé entre ses balises d’ouverture et de fermeture.

Valeurs codées en dur versus props

Comparez un titre codé en dur :

<h2>iPhone 16</h2>

avec un titre déterminé par une prop :

<h2>{props.title}</h2>

Le premier ne peut afficher qu’un seul produit ; le second en peut afficher un nombre quelconque. Chaque fois que vous vous surprenez à saisir du contenu spécifique dans un composant conçu pour être réutilisé, demandez-vous si ce contenu ne devrait pas plutôt être une propriété. Évitez simplement l’extrême opposé : transformer chaque petit détail en propriété rend les composants plus difficiles à utiliser, exposez donc uniquement ce qui varie réellement d’une utilisation à l’autre.

Pour un rappel sur la structure des composants eux-mêmes, consultez React components 101.

Points clés

• Les propriétés, abrégé de props, sont des valeurs que le parent transmet à l’enfant lors de sa rendu.
• Les données circulent dans une seule direction, du parent à l’enfant, et les enfants traitent les propriétés comme étant en lecture seule.

React rassemble tous les attributs d’une balise de composant en un objet props qui est transmis comme premier argument de la fonction.

Les chaînes de caractères peuvent utiliser des guillemets ; les nombres, les booléens, les variables et les expressions sont placés entre des accolades.

Un seul composant avec différents props remplace de nombreux composants presque identiques.

Les étapes suivantes naturelles consistent à déstructurer les props, à transmettre des objets, des tableaux et des fonctions de rappel, des valeurs par défaut, ainsi que le prop children.