Zasada jednego rodzica

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 3 z 42.

Komponent może zwracać dowolną ilość JSX, pod warunkiem że wszystko znajduje się wewnątrz jednego elementu nadrzędnego. To jest w porządku:

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

Jednak zwrócenie dwóch elementów obok siebie bez opakowania ich we wspólny element jest błędem. Funkcja może zwrócić tylko jedną rzecz:

// BROKEN: dwa elementy najwyższego poziomu
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

Typowym rozwiązaniem jest opakowanie wszystkiego w <div>. Obserwuj podgląd: jeśli złamiesz tę zasadę, błąd kompilacji dokładnie wskaże Ci, gdzie.

Wyzwanie

Początkujący

Zbuduj mały nagłówek strony: dwa elementy wewnątrz jednego elementu nadrzędnego.

Zachowaj zewnętrzny element <div>.
Dodaj w nim element <h1> z id="heading" i tekstem My First App.
Poniżej nagłówka dodaj element <p> z id="tagline" i tekstem Built with React.

Spróbuj swoich sił

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