Deine erste Komponente

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

Zeit, Ihre erste Komponente zu schreiben. Schauen Sie sich App.jsx an. Es ist eine Funktion, die JSX zurückgibt:

export default function App() {
    return (
        <div>

        </div>
    );
}

Im Moment gibt es ein leeres <div> zurück, sodass die Vorschau leer ist. Was auch immer du an JSX hineinsetzt, wird gerendert (Überschriften, Absätze, Schaltflächen, alles):

<h1 id="title">Hello, React!</h1>

Beachten Sie das id-Attribut: Es funktioniert genau wie in HTML, und unsere Tests verwenden IDs, um Ihre Elemente zu finden. Die anderen beiden Dateien sind die Infrastruktur der App: index.html hostet die App und main.jsx bindet App in die Seite ein. Sie sind gesperrt. In App.jsx arbeiten Sie.

Aufgabe

Anfänger

Lass deine App die Welt begrüßen.

Füge innerhalb des <div>s in App.jsx ein <h1> mit id="title" hinzu.
Der Text muss exakt Hello, React! lauten.

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>