Écrire du balisage avec JSX

JSXest une extension de syntaxe pour JavaScript qui vous permet d'écrire un balisage de type HTML à l'intérieur d'un fichier JavaScript. Bien qu'il existe d'autres façons d'écrire des composants, la plupart des développeurs React préfèrent la concision du JSX, et la plupart des bases de code l'utilisent.

JSX : Intégrer le balisage dans JavaScript

Le Web a été construit sur HTML, CSS et JavaScript. Pendant de nombreuses années, les développeurs web conservaient le contenu dans le HTML, le design dans le CSS et la logique dans le JavaScript — souvent dans des fichiers séparés ! Le contenu était balisé dans le HTML tandis que la logique de la page résidait séparément dans le JavaScript :

HTML

JavaScript

Mais à mesure que le Web devenait plus interactif, la logique déterminait de plus en plus le contenu. Le JavaScript était responsable du HTML ! C'est pourquoidans React, la logique de rendu et le balisage coexistent au même endroit — les composants.

Sidebar.jsComposant React

Form.jsComposant React

Garder ensemble la logique de rendu et le balisage d'un bouton garantit qu'ils restent synchronisés à chaque modification. Inversement, les détails qui ne sont pas liés, comme le balisage du bouton et celui de la barre latérale, sont isolés les uns des autres, ce qui rend plus sûr de modifier l'un ou l'autre indépendamment.

Chaque composant React est une fonction JavaScript qui peut contenir du balisage que React rend dans le navigateur. Les composants React utilisent une extension de syntaxe appelée JSX pour représenter ce balisage. Le JSX ressemble beaucoup au HTML, mais il est un peu plus strict et peut afficher des informations dynamiques. La meilleure façon de comprendre cela est de convertir du balisage HTML en balisage JSX.

Convertir du HTML en JSX

Supposons que vous ayez du HTML (parfaitement valide) :

Et vous voulez le placer dans votre composant :

Si vous le copiez-collez tel quel, cela ne fonctionnera pas :

C'est parce que le JSX est plus strict et a quelques règles supplémentaires par rapport au HTML ! Si vous lisez les messages d'erreur ci-dessus, ils vous guideront pour corriger le balisage, ou vous pouvez suivre le guide ci-dessous.

Les règles du JSX

1. Retourner un seul élément racine

Pour retourner plusieurs éléments depuis un composant,encadrez-les avec une seule balise parente.

Par exemple, vous pouvez utiliser un<div>:

Si vous ne voulez pas ajouter un<div>supplémentaire à votre balisage, vous pouvez écrire<>et</>à la place :

Cette balise vide est appelée unFragment.Les Fragments vous permettent de regrouper des éléments sans laisser de trace dans l'arbre HTML du navigateur.

2. Fermez toutes les balises

Le JSX exige que les balises soient explicitement fermées : les balises auto-fermantes comme<img>doivent devenir<img />, et les balises d'encapsulation comme<li>orangesdoivent être écrites comme<li>oranges</li>.

Voici comment l'image et les éléments de liste de Hedy Lamarr apparaissent une fois fermés :

3. Utilisez le camelCase pourla plupartdes choses !

Le JSX se transforme en JavaScript et les attributs écrits en JSX deviennent des clés d'objets JavaScript. Dans vos propres composants, vous voudrez souvent lire ces attributs dans des variables. Mais JavaScript a des limitations sur les noms de variables. Par exemple, leurs noms ne peuvent pas contenir de tirets ou être des mots réservés commeclass.

C'est pourquoi, dans React, de nombreux attributs HTML et SVG sont écrits en camelCase. Par exemple, au lieu destroke-widthvous utilisezstrokeWidth. Puisqueclassest un mot réservé, dans React vous écrivezclassNameà la place, nommé d'après lapropriété DOM correspondante:

Vous pouveztrouver tous ces attributs dans la liste des props des composants DOM.Si vous vous trompez, ne vous inquiétez pas—React affichera un message avec une correction possible dans laconsole du navigateur.

Astuce : Utilisez un convertisseur JSX

Convertir tous ces attributs dans un balisage existant peut être fastidieux ! Nous recommandons d'utiliser unconvertisseurpour traduire votre HTML et SVG existants en JSX. Les convertisseurs sont très utiles en pratique, mais il vaut toujours la peine de comprendre ce qui se passe pour que vous puissiez écrire du JSX confortablement par vous-même.

Voici votre résultat final :

Récapitulatif

Vous savez maintenant pourquoi le JSX existe et comment l'utiliser dans les composants :

• Les composants React regroupent la logique de rendu avec le balisage car ils sont liés.
• JSX est similaire au HTML, avec quelques différences. Vous pouvez utiliser unconvertisseursi nécessaire.
• Les messages d'erreur vous orienteront souvent dans la bonne direction pour corriger votre balisage.