Deine zweite Komponente

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

Lass uns eine Komponente auslagern. Du kannst so viele Komponenten in einer Datei definieren, wie du möchtest: kleinere weiter oben, App ganz unten:

function Welcome() {
    return <p>Glad you're here!</p>;
}

export default function App() {
    return (
        <div>
            <Welcome />
        </div>
    );
}

Nur App enthält export default: Es ist die Entry-Komponente, die main.jsx rendert. Die anderen sind interne Helper.

Aufgabe

Anfänger

Erstelle deine erste eigenständige Komponente.

Definiere eine Komponente namens Header (großgeschriebenes H!) oberhalb von App. Sie gibt ein <h1> mit id="page-title" und dem Text My Blog zurück.
Rendere sie innerhalb des <div> von App mit <Header />.

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>