JSX (JavaScript)
# JSX (JavaScript)

JSX (JavaScript Syntax Extension oder gelegentlich JavaScript XML) ist eine Syntax-Erweiterung für JavaScript (Syntaktischer Zucker). JSX wurde für das Framework React entwickelt und wird als Auszeichnungssprache für Komponenten verwendet.

## Syntax

JSX ist in seiner Syntax ähnlich zu Hypertext Markup Language, wie das folgende Beispiel zeigt:

Beim Übersetzen von JSX wird daraus der folgende React-JavaScript-Code mit erzeugt:

Der folgende Beispielcode zeigt, wie man JSX in React mittels ReactDOM.render einbetten kann.

### Attribute

Man benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:

Ebenfalls kann man geschweifte Klammern verwenden, um JavaScript-Ausdrücke in ein Attribut einzubinden:

### Sicherheit (XSS)

JSX verhindert Injection-Attacken wie Cross-Site-Scripting (XSS). Es ist sicher, Benutzereingaben wie diese einzubetten:

Standardmäßig entschlüsselt React DOM alle in JSX eingebetteten Werte, bevor sie gerendert werden. Alles wird in eine Zeichenkette konvertiert, bevor es gerendert wird.

### Props in JSX

Man kann einen beliebigen JavaScript-Ausdruck als Prop übergeben, indem man ihn mit umgibt. Zum Beispiel in diesem Code:

Für MyComponent wird der Wert von props.foo 10 sein, weil der Ausdruck 1 + 2 + 3 + 4 ausgewertet wird.

if-Anweisungen und for-Schleifen sind in JavaScript keine Ausdrücke (sondern Anweisungen), daher können sie in JSX nicht direkt verwendet werden.

## Vue

Das Framework Vue.js verwendet eine eigene Auszeichnungssprache, kann aber auf Wunsch mit JSX verwendet werden.

## TSX

Zur Verwendung von JSX mit TypeScript wird die Dateierweiterung .tsx verwendet.

