Die Regel des einen Eltern-Elements

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 3 von 42.

Eine Komponente kann so viel JSX zurückgeben, wie Sie möchten, mit einer Regel: Alles muss sich innerhalb eines Elternelements befinden. Das hier ist in Ordnung:

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

Aber das Zurückgeben von zwei Elementen nebeneinander ohne Wrapper ist ein Fehler. Eine Funktion kann nur eine Sache zurückgeben:

// BROKEN: zwei Top-Level-Elemente
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

Die übliche Lösung besteht darin, alles in ein <div> zu hüllen. Achte auf die Vorschau: Wenn du gegen die Regel verstößt, sagt dir der Build-Fehler genau, wo.

Aufgabe

Anfänger

Erstelle einen kleinen Seiten-Header: zwei Elemente unter einem Eltern-Element.

Behalte das äußere <div> bei.
Füge darin ein <h1> mit id="heading" und dem Text My First App hinzu.
Füge unter der Überschrift ein <p> mit id="tagline" und dem Text Built with React hinzu.

Probier es selbst

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