Décrire l'interface utilisateur

React est une bibliothèque JavaScript pour afficher des interfaces utilisateur (UI). Une interface utilisateur est construite à partir de petites unités comme des boutons, du texte et des images. React vous permet de les combiner encomposantsréutilisables et imbriquables. Des sites web aux applications mobiles, tout ce qui est à l'écran peut être décomposé en composants. Dans ce chapitre, vous apprendrez à créer, personnaliser et afficher conditionnellement des composants React.

Votre premier composant

Les applications React sont construites à partir de morceaux isolés d'interface utilisateur appeléscomposants. Un composant React est une fonction JavaScript que vous pouvez saupoudrer de balisage. Les composants peuvent être aussi petits qu'un bouton, ou aussi grands qu'une page entière. Voici un composantGalleryqui affiche trois composantsProfile :

Importer et exporter des composants

Vous pouvez déclarer plusieurs composants dans un seul fichier, mais les fichiers volumineux peuvent devenir difficiles à naviguer. Pour résoudre ce problème, vous pouvezexporterun composant dans son propre fichier, puisimporterce composant depuis un autre fichier :

Écrire du balisage avec JSX

Chaque composant React est une fonction JavaScript qui peut contenir du balisage que React affiche dans le navigateur. Les composants React utilisent une extension de syntaxe appelée JSX pour représenter ce balisage. JSX ressemble beaucoup au HTML, mais il est un peu plus strict et peut afficher des informations dynamiques.

Si nous collons un balisage HTML existant dans un composant React, cela ne fonctionnera pas toujours :

Si vous avez du HTML existant comme celui-ci, vous pouvez le corriger en utilisant unconvertisseur:

JavaScript dans JSX avec des accolades

JSX vous permet d'écrire un balisage de type HTML dans un fichier JavaScript, en gardant la logique de rendu et le contenu au même endroit. Parfois, vous voudrez ajouter un peu de logique JavaScript ou référencer une propriété dynamique à l'intérieur de ce balisage. Dans ce cas, vous pouvez utiliser des accolades dans votre JSX pour « ouvrir une fenêtre » vers JavaScript :

Passer des props à un composant

Les composants React utilisent despropspour communiquer entre eux. Chaque composant parent peut transmettre des informations à ses composants enfants en leur donnant des props. Les props peuvent vous rappeler les attributs HTML, mais vous pouvez leur passer n'importe quelle valeur JavaScript, y compris des objets, des tableaux, des fonctions et même du JSX !

Rendu conditionnel

Vos composants devront souvent afficher des choses différentes selon différentes conditions. Dans React, vous pouvez rendre du JSX conditionnellement en utilisant la syntaxe JavaScript comme les instructionsif, les opérateurs&&et? :.

Dans cet exemple, l'opérateur JavaScript&&est utilisé pour afficher conditionnellement une coche :

Rendu de listes

Vous voudrez souvent afficher plusieurs composants similaires à partir d'une collection de données. Vous pouvez utiliser les méthodes JavaScriptfilter()etmap()avec React pour filtrer et transformer votre tableau de données en un tableau de composants.

Pour chaque élément du tableau, vous devrez spécifier unekey. En général, vous voudrez utiliser un ID provenant de la base de données commekey. Les clés permettent à React de suivre la position de chaque élément dans la liste même si celle-ci change.

Garder les composants purs

Certaines fonctions JavaScript sontpures.Une fonction pure :

• Ne s’occupe que de ses affaires.Elle ne modifie aucun objet ou variable qui existait avant son appel.
• Mêmes entrées, mêmes sorties.Pour les mêmes entrées, une fonction pure doit toujours retourner le même résultat.

En écrivant strictement vos composants comme des fonctions pures, vous pouvez éviter toute une catégorie de bugs déroutants et de comportements imprévisibles à mesure que votre base de code grandit. Voici un exemple de composant impur :

Vous pouvez rendre ce composant pur en passant une prop au lieu de modifier une variable préexistante :

Votre interface utilisateur sous forme d’arbre

React utilise des arbres pour modéliser les relations entre les composants et les modules.

Un arbre de rendu React est une représentation de la relation parent-enfant entre les composants.

Exemple d’arbre de rendu React.

Les composants proches du sommet de l’arbre, près du composant racine, sont considérés comme des composants de niveau supérieur. Les composants sans composants enfants sont des composants feuilles. Cette catégorisation des composants est utile pour comprendre le flux de données et les performances de rendu.

Modéliser la relation entre les modules JavaScript est une autre façon utile de comprendre votre application. Nous l’appelons un arbre de dépendances de modules.

Exemple d’arbre de dépendances de modules.

Un arbre de dépendances est souvent utilisé par les outils de build pour regrouper tout le code JavaScript pertinent que le client doit télécharger et afficher. Une taille de bundle importante dégrade l’expérience utilisateur pour les applications React. Comprendre l’arbre de dépendances des modules est utile pour déboguer de tels problèmes.

Et ensuite ?

Rendez-vous surVotre premier composantpour commencer à lire ce chapitre page par page !

Ou, si vous êtes déjà familier avec ces sujets, pourquoi ne pas lire à propos deAjouter de l'interactivité?