In het vorige hoofdstuk hebben we de basis van JSX onderzocht. Nu gaan we dieper in op het maken van meer complexe JSX-elementen.

De regel van één enkel ouder-element

Een belangrijke regel bij het werken met geneste JSX is dat het één enkel ouder-element moet retourneren. Dit ouder-element omhult alle andere niveaus van geneste elementen. Deze regel zorgt ervoor dat React de structuur van je JSX correct kan weergeven en beheren. Hier is een praktisch voorbeeld om deze regel te illustreren:

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

Ongeldige JSX (Wordt niet getranspiled):

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

Opmerking

Bij het renderen van meerdere elementen zoals dit, kunnen we ze allemaal tussen haakjes () plaatsen voor duidelijkheid, maar dit is niet strikt noodzakelijk. Houd er ook rekening mee dat dit concept van toepassing is wanneer we JSX-elementen retourneren in React-componenten.

Voorbeeld

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