Règle du parent unique

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 3 sur 42.

Un composant peut retourner autant de JSX que vous le souhaitez, avec une seule règle : tout doit se trouver à l'intérieur d'un seul élément parent. Ceci est correct :

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

Mais retourner deux elements côte à côte sans conteneur est une erreur. Une function ne peut retourner qu'une seule chose :

// BROKEN: deux éléments de premier niveau
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

La solution habituelle consiste à tout envelopper dans un <div>. Regardez l'aperçu : si vous enfreignez la règle, l'erreur de build vous indique exactement où.

Défi

Débutant

Créez un en-tête de page simple : deux éléments sous un même parent.

Conservez le <div> extérieur.
À l'intérieur, ajoutez un <h1> avec id="heading" et le texte My First App.
En dessous du titre, ajoutez un <p> avec id="tagline" et le texte Built with React.

Essayez vous-même

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