Dans React, les composants sont les éléments fondamentaux de la construction d'une interface utilisateur. Ils permettent aux développeurs de créer des parties indépendantes et réutilisables de l'interface utilisateur, qui peuvent être combinées pour former des éléments d'interface plus importants.

On peut considérer une application React comme un arbre de composants, avec le composant de plus haut niveau comme racine. Chaque composant est responsable du rendu du balisage JSX, définissant la structure HTML souhaitée affichée dans le DOM du navigateur.

Composants fonctionnels

Les composants fonctionnels sont des fonctions JavaScript qui renvoient du JSX pour définir la structure et le contenu d’un élément d’interface utilisateur. Ils représentent la méthode moderne pour construire des applications React et sont nommés avec des lettres majuscules, comme Product ou User, afin de les différencier des éléments HTML standards tels que div ou span.

Les composants fonctionnels offrent plusieurs avantages :

• Moins de code répétitif : Les composants fonctionnels réduisent le code répétitif, les rendant plus concis et plus simples à utiliser ;
• Plus facile à appréhender : Ils sont plus simples à comprendre, notamment pour les développeurs débutant avec React ;
• Plus facile à tester : Les composants fonctionnels facilitent les tests grâce à leur nature directe ;
• Pas de contexte (this) : Contrairement aux composants de classe, les composants fonctionnels n’utilisent pas le contexte (this), ce qui simplifie le code. Voici un exemple de composant fonctionnel :

const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

Dans cet exemple, Product est un composant fonctionnel représentant une carte produit.

Les composants fonctionnels constituent la majorité de la structure d'une application React, servant d'éléments essentiels pour la création d'interfaces utilisateur.