La regola dell’unico elemento genitore

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 3 di 42.

Un componente può restituire tutto il JSX che vuoi, con una regola: tutto deve trovarsi all'interno di un unico elemento genitore. Questo va bene:

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

Ma restituire due elementi affiancati senza un contenitore è un errore. Una funzione può restituire solo una cosa:

// BROKEN: due elementi di primo livello
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

La soluzione abituale è racchiudere tutto in un <div>. Osserva l’anteprima: se infrangi la regola, l’errore di compilazione ti indica esattamente dove.

Sfida

Principiante

Crea una piccola intestazione di pagina: due elementi sotto un unico elemento genitore.

Mantieni il <div> esterno.
Al suo interno aggiungi un <h1> con id="heading" e il testo My First App.
Sotto l'intestazione aggiungi un <p> con id="tagline" e il testo Built with React.

Provalo tu

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