Votre premier composant

Les composants : les blocs de construction de l’UI

Sur le Web, HTML nous permet de créer des documents riches et structurés grâce à son vaste jeu de balises telles que <h1> et <li> :

<article>
  <h1>Mon premier composant</h1>
  <ol>
    <li>Les composants : les blocs de construction de l’UI</li>
    <li>Définir un composant</li>
    <li>Utiliser un composant</li>
  </ol>
</article>

Ce balisage représente cet article <article>, son en-tête <h1>, et une table des matières (abrégée) au moyen d’une liste ordonnée <ol>. Ce type de balisage, combiné à CSS pour en contrôler l’apparence et à JavaScript pour gérer son interactivité, constitue le socle de toute barre latérale, avatar, boîte de dialogue, liste déroulante… en fait absolument tout morceau d’UI que vous voyez sur le Web.

React vous permet de combiner votre balisage et ses codes CSS et JavaScript associés pour en faire des « composants » personnalisés, des éléments d’UI réutilisables pour votre appli. Le code de la table des matières que vous avez vu ci-dessus pourrait devenir un composant <TableOfContents /> que vous pourriez afficher sur chaque page. Sous le capot, il utiliserait toujours les mêmes balises HTML telles que <article>, <h1>, <ol>, etc.

Tout comme avec les balises HTML, vous pouvez composer, ordonner et imbriquer les composants pour concevoir des pages entières. Par exemple, la page de documentation que vous êtes en train de lire est constituée de composants React :

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Au fil de la croissance de votre projet, vous remarquerez que nombre de vos blocs visuels peuvent être assemblés en réutilisant des composants que vous avez déjà écrits, ce qui accélère votre développement. Notre table des matières ci-dessus pourrait être ajoutée à n’importe quel écran avec un <TableOfContents /> ! Vous pouvez même démarrer un projet avec des milliers de composants partagés par la communauté open source de React, tels que Chakra UI et Material UI.

Définir un composant

Traditionnellement, lorsqu’ils créent des pages web, les développeurs web écrivent le balisage de leur contenu puis ajoutent de l’interactivité en le saupoudrant de JavaScript. Ça fonctionnait très bien lorsque l’interactivité n’était qu’un bonus appréciable sur le Web. Aujourd’hui, c’est une exigence de base pour de nombreux sites et pour toutes les applis. React met l’interactivité à l’honneur tout en utilisant les mêmes technologies de fond : un composant React est une fonction JavaScript que vous pouvez saupoudrer de balisage. Voici à quoi ça ressemble (l’exemple ci-dessous est modifiable).

Et voici comment construire un composant :

Étape 1 : exporter le composant

Le préfixe export default est une syntaxe JavaScript standard (elle n’a rien de spécifique à React). Elle vous permet d’indiquer la fonction principale dans un fichier, de façon à ce qu’elle puisse aisément être importée par la suite depuis d’autres fichiers. (Explorez ce sujet plus en détails dans Importer et exporter des composants !)

Étape 2 : définir la fonction

Avec function Profile() { }, vous définissez une fonction JavaScript dont le nom est Profile.

Étape 3 : ajouter le balisage

Le composant renvoie une balise <img /> avec des attributs src et alt. <img /> s’écrit comme en HTML, mais il s’agit en fait de JavaScript sous le capot ! Cette syntaxe s’appelle JSX, et elle vous permet d’incorporer du balisage dans JavaScript.

Vous pouvez écrire votre renvoi de valeur en une seule ligne, comme dans ce composant :

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Mais si votre balisage n’est pas entièrement sur la même ligne que le mot-clé return, vous aurez intérêt à l’enrober de parenthèses :

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Utiliser un composant

À présent que vous avez défini votre composant Profile, vous pouvez l’imbriquer dans d’autres composants. Par exemple, vous pouvez exporter un composant Gallery qui utilise plusieurs composants Profile :

Ce que voit le navigateur

Remarquez les différences de casse :

• <section> est en minuscules : React comprend qu’il s’agit d’une balise HTML.
• <Profile /> démarre par un P majuscule : React comprend que nous souhaitons utiliser notre composant appelé Profile.

Et Profile contient lui-même du HTML : <img />. Au final, voici ce que voit le navigateur :

<section>
  <h1>Scientifiques de renom</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Imbriquer et organiser les composants

Les composants sont des fonctions JavaScript classiques, de sorte que vous pouvez définir plusieurs composants dans un même fichier. C’est pratique lorsque les composants sont relativement petits ou étroitement liés les uns aux autres. Si ce fichier devient trop encombré, vous pouvez toujours déplacer Profile dans un fichier à part. Vous apprendrez comment procéder très bientôt dans la page sur les imports.

Puisque les composants Profile sont affichés au sein de Gallery (et même plusieurs fois !), on peut dire que Gallery est un composant parent, qui affiche chaque Profile en tant que composant « enfant ». Ça fait partie de la magie de React : vous pouvez définir un composant une seule fois, puis l’utiliser à autant d’endroits et autant de fois que vous le souhaitez.

export default function Gallery() {
  // 🔴 Ne définissez jamais un composant au sein d’un autre composant !
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Déclarez les composants au niveau racine
function Profile() {
  // ...
}