Eine Seite erstellen

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

Eine typische Seite ist eine Komposition: App ordnet einfach benannte Blöcke an:

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

Lies diese return-Anweisung laut vor: Sie beschreibt die Seite buchstäblich von oben nach unten. Jeder Block verbirgt sein eigenes Markup, sodass Änderungen am Footer niemals Gefahr laufen, den Title zu beschädigen. Diese Struktur ist die Art und Weise, wie du von here an jede echte App bauen wirst.

Aufgabe

Einfach

Setze eine Seite aus zwei Komponenten zusammen.

Definiere Title: ein <h1> mit id="page-title", Text Coddy Cooking.
Definiere Footer: ein <p> mit id="page-footer", Text Made with React.
App rendert zuerst <Title />, dann <Footer />.

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>