Votre premier composant

Les composantssont l'un des concepts fondamentaux de React. Ils constituent la base sur laquelle vous construisez des interfaces utilisateur (UI), ce qui en fait l'endroit parfait pour commencer votre parcours React !

Composants : les briques de l'interface utilisateur

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

Ce balisage représente cet article<article>, son titre<h1>, et une table des matières (abrégée) sous forme de liste ordonnée<ol>. Un balisage comme celui-ci, combiné au CSS pour le style et au JavaScript pour l'interactivité, se cache derrière chaque barre latérale, avatar, fenêtre modale, menu déroulant—chaque élément d'interface utilisateur que vous voyez sur le Web.

React vous permet de combiner votre balisage, votre CSS et votre JavaScript en « composants » personnalisés,des éléments d'interface utilisateur réutilisables pour votre application.Le code de la table des matières que vous avez vu ci-dessus pourrait être transformé en un composant<TableOfContents />que vous pourriez afficher sur chaque page. En interne, il utilise toujours les mêmes balises HTML comme<article>,<h1>, etc.

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

À mesure que votre projet grandit, vous remarquerez que de nombreuses conceptions peuvent être réalisées en réutilisant des composants que vous avez déjà écrits, accélérant ainsi votre développement. Notre table des matières ci-dessus pourrait être ajoutée à n'importe quel écran avec<TableOfContents />! Vous pouvez même démarrer votre projet avec les milliers de composants partagés par la communauté open source de React commeChakra UIetMaterial UI.

Définir un composant

Traditionnellement, lors de la création de pages web, les développeurs web balisaient leur contenu puis ajoutaient de l'interactivité en saupoudrant un peu de JavaScript. Cela fonctionnait très bien lorsque l'interactivité était un plus sur le web. Maintenant, elle est attendue pour de nombreux sites et toutes les applications. React place l'interactivité au premier plan tout en utilisant la même technologie :un composant React est une fonction JavaScript que vous pouvezsaupoudrer de balisage.Voici à quoi cela ressemble (vous pouvez modifier l'exemple ci-dessous) :

Et voici comment construire un composant :

Étape 1 : Exporter le composant

Le préfixeexport defaultest unesyntaxe JavaScript standard(pas spécifique à React). Il vous permet de marquer la fonction principale dans un fichier afin de pouvoir l'importer plus tard depuis d'autres fichiers. (Plus d'informations sur l'importation dansImportation et exportation de composants!)

Étape 2 : Définir la fonction

Avecfunction Profile() { }, vous définissez une fonction JavaScript nomméeProfile.

Étape 3 : Ajouter du balisage

Le composant retourne une balise<img />avec les attributssrcetalt. <img />est écrit comme du HTML, mais c'est en réalité du JavaScript en dessous ! Cette syntaxe s'appelleJSX, et elle vous permet d'intégrer du balisage dans du JavaScript.

Les instructions return peuvent être écrites entièrement sur une seule ligne, comme dans ce composant :

Mais si votre balisage n'est pas sur la même ligne que le mot-cléreturn, vous devez l'encadrer par une paire de parenthèses :

Utiliser un composant

Maintenant que vous avez défini votre composantProfile, vous pouvez l'imbriquer dans d'autres composants. Par exemple, vous pouvez exporter un composantGalleryqui utilise plusieurs composantsProfile :

Ce que voit le navigateur

Remarquez la différence de casse :

• <section>est en minuscules, donc React sait que nous faisons référence à une balise HTML.
• <Profile />commence par unPmajuscule, donc React sait que nous voulons utiliser notre composant nomméProfile.

EtProfilecontient encore plus de HTML :<img />. Au final, voici ce que le navigateur voit :

Imbrication et organisation des composants

Les composants sont des fonctions JavaScript ordinaires, vous pouvez donc garder plusieurs composants dans le même fichier. C'est pratique lorsque les composants sont relativement petits ou étroitement liés les uns aux autres. Si ce fichier devient encombré, vous pouvez toujours déplacerProfilevers un fichier séparé. Vous apprendrez comment faire cela bientôt sur lapage concernant les imports.

Comme les composantsProfilesont rendus à l'intérieur deGallery—et même plusieurs fois !—nous pouvons dire queGalleryest uncomposant parent,rendant chaqueProfilecomme un « enfant ». C'est une partie de la magie de React : vous pouvez définir un composant une fois, puis l'utiliser dans autant d'endroits et autant de fois que vous le souhaitez.

Récapitulatif

Vous venez de goûter à React pour la première fois ! Récapitulons quelques points clés.

• React vous permet de créer des composants,des éléments d'interface utilisateur réutilisables pour votre application.
• Dans une application React, chaque élément de l'interface utilisateur est un composant.
• Les composants React sont des fonctions JavaScript ordinaires, à l'exception des points suivants :
  1. Leur nom commence toujours par une lettre majuscule.
  2. Ils renvoient du balisage JSX.