Nel capitolo precedente, abbiamo esplorato le basi di JSX. Ora approfondiamo e impariamo a creare elementi JSX più complessi.

La regola di un singolo elemento genitore

Una regola importante quando si lavora con JSX annidato è che deve restituire un solo elemento genitore. Questo elemento genitore racchiude tutti gli altri livelli di elementi annidati. Questa regola garantisce che React possa rendere e gestire correttamente la struttura del tuo JSX. Ecco un esempio pratico per illustrare questa regola:

JSX valido:

<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 non valido (Non verrà transpileato):

<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>

Nota

Quando si renderizzano più elementi in questo modo, è possibile racchiuderli tra parentesi () per maggiore chiarezza, anche se non è strettamente necessario. Ricorda inoltre che questo concetto si applica quando si restituiscono elementi JSX nei componenti React.

Esempio

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>
);