JSX (JavaScript)

JSX steht für Javascript Syntax Extension oder Javascript XML und ist eine Erweiterung der gängigen Javascript-Syntax von React.

Syntax

In JSX ist jedes Tag ein „Funktionsaufruf“, der ein Element erzeugt. Wenn JSX in React "übersetzt" wird, sieht das Ergebnis so aus:

function createElement(elementType, props, ...children) {}

Dies liegt daran, dass jedes Tag mit der Funktion createElement() ein Element erstellt. Der folgende Beispielcode zeigt, wie man JSX in React einbetten kann:

const name = 'Max Mustermann';
const element = <h1>Hallo, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

In diesem Code werden 2 Konstanten erstellt und den Zeichenfolgenwert an den HTML-Code übergeben.

Danach wird ReactDOM.render() aufgerufen und den HTML-Code zusammen mit dem „root“-Element übergeben.

Attribute

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

const element = <a href="https://www.wikipedia.org"> link </a>;

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

const element = <img src={user.avatarUrl}></img>;

Sicherheit (XSS)

JSX verhindert Injection-Attacken wie XSS. Es ist sicher, Benutzereingaben wie diese einzubetten:

const title = response.potentiallyMaliciousInput;

// Dies ist sicher:

const element = <h1>{title}</h1>;

Standardmäßig entschlüsselt React DOM alle in JSX eingebetteten Werte, bevor sie gerendert werden. Alles wird in einen String konvertiert, bevor es gerendert wird. Dies hilft, XSS-Angriffe (Cross-Site-Scripting) zu verhindern.

Props in JSX

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

<MyComponent foo={1 + 2 + 3 + 4} />

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, daher können sie in JSX nicht direkt verwendet werden.

Siehe auch

• JavaScript
• React