Dans le chapitre précédent, nous avons exploré les bases de JSX. À présent, approfondissons et apprenons à créer des éléments JSX plus complexes.

La règle d’un seul élément parent

Une règle importante lors de l’utilisation de JSX imbriqué est qu’il doit retourner un seul élément parent. Cet élément parent englobe tous les autres niveaux d’éléments imbriqués. Cette règle garantit que React peut correctement afficher et gérer la structure de votre JSX. Voici un exemple pratique pour illustrer cette règle :

JSX valide :

<div>
  <h1>Welcome to My Website</h1>
  <p>Explore amazing content:</p>
  <ul>
    <li>Article 1</li>
    <li>Article 2</li>
    <li>Article 3</li>
  </ul>
</div>

JSX invalide (ne sera pas transpilé) :

<h1>Welcome to My Website</h1>
<p>Explore amazing content:</p>
<ul>
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
</ul>

Remarque

Lors de l'affichage de plusieurs éléments de cette manière, il est possible de tous les envelopper entre parenthèses () pour plus de clarté, mais cela n'est pas strictement nécessaire. De plus, il est important de se rappeler que ce concept s'applique lors du retour d'éléments JSX dans les composants React.

Exemple

const JSX = (
  <div>
    <h1>Welcome to My Website</h1>
    <p>Explore amazing content:</p>
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
  </div>
);