Edellisessä luvussa perehdyttiin JSX:n perusteisiin. Nyt syvennymme aiheeseen ja opimme, kuinka luodaan monimutkaisempia JSX-elementtejä.

Yhden juurielementin sääntö

Tärkeä sääntö sisäkkäisten JSX-elementtien kanssa työskenneltäessä on, että niiden tulee palauttaa yksi juurielementti. Tämä juurielementti ympäröi kaikki muut sisäkkäiset elementit. Sääntö varmistaa, että React pystyy renderöimään ja hallitsemaan JSX:n rakennetta oikein. Seuraava käytännön esimerkki havainnollistaa tätä sääntöä:

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

Virheellinen JSX (Ei käänny):

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

Huomio

Kun renderöidään useita elementtejä näin, ne voidaan kääriä sulkuihin () selkeyden vuoksi, mutta se ei ole ehdottoman välttämätöntä. Muista myös, että tämä koskee JSX-elementtien palauttamista React-komponenteissa.

Esimerkki

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