Regra do elemento pai único

Parte da seção Fundamentos do Journey de React da Coddy — lição 3 de 42.

Um componente pode retornar quanto JSX você quiser, com uma regra: tudo deve estar dentro de um único elemento pai. Isto está correto:

return (
    <div>
        <h1>My Page</h1>
        <p>Welcome!</p>
    </div>
);

Mas retornar dois elementos lado a lado sem um wrapper é um erro. Uma função só pode retornar uma coisa:

// BROKEN: dois elementos de nível superior
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

A solução comum é envolver tudo em uma <div>. Observe a visualização: se você quebrar a regra, o erro de build diz exatamente onde.

Desafio

Iniciante

Crie um pequeno cabeçalho de página: dois elementos dentro de um pai.

Mantenha o <div> externo.
Dentro dele adicione um <h1> com id="heading" e o texto My First App.
Abaixo do cabeçalho adicione um <p> com id="tagline" e o texto Built with React.

Experimente você mesmo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>