React: Up & Running, 2. Auflage

Kapitel 5. JSX

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Du hast JSX bereits in den vorherigen Kapiteln in Aktion gesehen. Du weißt, dass es darum geht, JavaScript-Ausdrücke zu schreiben, die XML enthalten, das HTML sehr ähnlich sieht. Ein Beispiel:

const hi = <h1>Hello</h1>;

Und du weißt, dass du den XML-Fluss jederzeit "unterbrechen" kannst, indem du weitere JavaScript-Ausdrücke in geschweiften Klammern einfügst:

const planet = 'Earth';
const hi = <h1>Hello people of <em>{planet}</em>!</h1>;

Das gilt auch dann, wenn es sich bei den Ausdrücken um Bedingungen, Schleifen oder weitere JSX handelt:

const rock = 3;
const planet = <em>{rock === 3 ? 'Earth' : 'Some other place'}</em>;
const hi = <h1>Hello people of {planet}!</h1>;

In diesem Kapitel erfährst du mehr über JSX und lernst einige Funktionen kennen, die dich überraschen und/oder begeistern werden.

Hinweis

Um die obigen Beispiele in Aktion zu sehen, lade 05.01.hellojsx.html aus dem Repo des Buches. Die Datei ist auch eine Illustration dafür, wie du mehrere React-Anwendungen auf einer Seite haben kannst.

Ein paar Tools

Um zu experimentieren und mit den JSX-Transformationen vertraut zu machen, kannst du mit dem Live-Editor auf https://babeljs.io/repl spielen (siehe Abbildung 5-1). Achte darauf, dass du die Option "Aufhübschen" aktivierst, damit das Ergebnis besser lesbar ist.

Abbildung 5-1. Babel als Live-Tool zur JSX-Transformation ...