React Tutorial 4 – Wie verwende ich Variablen in JSX?

Um Variablen in JSX rendern und anzeigen zu können, müssen diese in geschweifte Klammern gesetzt werden.

Jetzt machen wir zuerst ein paar Anpassungen an unserem App.js Code.

Zuerst ersetzen wir die runden Klammern der Funktion mit geschweiften Klammern und fügen ein return mit hinzu, welches festlegt, was von der Funktion zurückgeliefert werden soll.

Die runden Klammern funktionierten nur, da wir nur diese eine einzige Zeile zurückgeliefert haben.

const App = () => {
    return (
        <h1>Hi, ich bin Deine vierte React-Headline!</h1>
    )
}

export default App

Nun sind wir in der Lage weitere Zeilen zu der Komponente hinzuzufügen.

Beginnen wir mit dem Begriff vierte und ersetzen ihn mit der Zahl 4, die wir vorher in einer Variablen festlegen.

const App = () => {
    let num = 4
    return (
        <h1>Hi, ich bin Deine {num}. React-Headline!</h1>
    )
}

export default App

Wir haben nun der Variablen num den Wert 4 gegeben und num mit den geschweiften Klammern dem JSX hinzugefügt.

Das war jetzt ziemlich einfach.

Bisherige React Tutorials:

1: Wie installiere ich React?

2: React Tutorial – Wie funktioniert das mit HTML? JSX Einführung

3: React Tutorial – Was ist eine Komponente?

Nächstes Tutorial:

5: React Tutorial – Props oder wie übergebe ich die Variablen an die Komponente?