No capítulo anterior, exploramos os conceitos básicos de JSX. Agora, vamos nos aprofundar e aprender como criar elementos JSX mais complexos.

A Regra de um Único Elemento Pai

Uma regra importante ao trabalhar com JSX aninhado é que ele deve retornar um único elemento pai. Esse elemento pai envolve todos os outros níveis de elementos aninhados. Essa regra garante que o React possa renderizar e gerenciar corretamente a estrutura do seu JSX. Veja um exemplo prático para ilustrar essa regra:

JSX válido:

<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 inválido (Não será transpilado):

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

Observação

Ao renderizar múltiplos elementos dessa forma, é possível envolvê-los entre parênteses () para maior clareza, embora não seja estritamente necessário. Além disso, lembre-se de que esse conceito se aplica ao retornar elementos JSX em componentes React.

Exemplo

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