0 70

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?

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.