Komponenten wiederverwenden

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

Hier machen sich Komponenten bezahlt: Verwende eine so oft du willst. Jede <Star /> unten ist eine frische Kopie:

function Star() {
    return <span>★</span>;
}

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

Drei Sterne auf dem Bildschirm, eine Definition im Code. Ändern Sie die Definition einmal. Jede Kopie wird aktualisiert. Das ist die Wiederverwendungs-Superkraft, die HTML nie hatte.

Aufgabe

Einfach

Erstelle eine Drei-Sterne-Bewertung.

Definiere eine Star-Komponente, die <span>★</span> zurückgibt.
Rendere innerhalb des bestehenden <div id="stars"> drei Sterne, indem du die Komponente dreimal verwendest.

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>