Geschweifte Klammern

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

JSX wird in dem Moment interessant, in dem Sie JavaScript einmischen. Geschweifte Klammern { } öffnen ein Fenster aus Ihrem Markup zurück zu JavaScript:

const name = 'Ada';

return <p>Hello, {name}!</p>;

Alles innerhalb der geschweiften Klammern wird als JavaScript ausgewertet, und das Ergebnis landet auf der Seite: Hier rendert der Absatz Hello, Ada!.

Ohne geschweifte Klammern behandelt JSX das, was Sie eingeben, als einfachen Text. <p>Hello, name!</p> zeigt buchstäblich das Wort name an, was wahrscheinlich nicht das ist, was Sie meinten.

Dies ist das am häufigsten verwendete Stück JSX: Definieren Sie Ihre Daten als Variablen und fügen Sie sie dann mit { } in das Markup ein.

Aufgabe

Anfänger

Die Komponente definiert const name = 'Ada', aber die Begrüßung zeigt das wörtliche Wort name.

Korrigiere den Absatztext, sodass er die Variable verwendet: Er sollte Hello, Ada! rendern.
Ändere die Variable selbst nicht.

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>