JSX (JavaScript)

constelement=<h1>HalloWelt!</h1>;

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

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

constuser="Max Mustermann";
constelement=(
<div>
<h1className="greeting">Hallo,{user}</h1>
<ahref="https://www.reactjs.org">link</a>
</div>
);

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

constuser="Max Mustermann";
constelement=React.createElement("div",{},[
React.createElement("h1",{className:"greeting"},["Hallo, ",user]),
React.createElement("a",{href:"https://www.reactjs.org"},["link"])
]);

Der folgende Beispielcode zeigt, wie man JSX in React mittels ReactDOM.render() einbetten kann.^{[5] [6] [7]}

constname='Max Mustermann';
constelement=<h1>Hallo,{name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

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

constelement=<ahref="https://www.wikipedia.org">link</a>;

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

constelement=<imgsrc={user.avatarUrl}></img>;

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

consttitle=response.potentiallyMaliciousInput;
// Dies ist sicher:
constelement=<h1>{title}</h1>;

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.^[8]

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

<MyComponentfoo={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 (sondern Anweisungen), daher können sie in JSX nicht direkt verwendet werden.^{[9] [10]}

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

Zur Verwendung von JSX mit TypeScript wird die Dateierweiterung .tsx verwendet.^[12]

• JavaScript und TypeScript
• React
• ECMAScript for XML

1. ↑ web.archive.org.
2. ↑ Einführung in JSX – React. Abgerufen am 10. Juni 2022 (englisch). 
3. ↑ JSX. In: facebook.github.io/jsx. 4. August 2022, abgerufen im Dezember 2022 (englisch). 
4. ↑ React.createElement
5. ↑ t3n – digital pioneers | Was ist JSX und wofür braucht man das? Abgerufen am 10. Juni 2022. 
6. ↑ What is JSX? How to use JavaScript with React? – Let's React. Abgerufen am 10. Juni 2022 (amerikanisches Englisch). 
7. ↑ Einführung in JSX – React. Abgerufen am 10. Juni 2022 (englisch). 
8. ↑ What is JSX and why to use it? Abgerufen am 10. Juni 2022 (englisch). 
9. ↑ Components and Props – React. Abgerufen am 10. Juni 2022 (englisch). 
10. ↑ JSX In Depth – React. Abgerufen am 10. Juni 2022 (englisch). 
11. ↑ Render Functions & JSX. In: Vue.js. Abgerufen im Dezember 2022 (englisch). 
12. ↑ JSX. In: TypeScript Handbook. Abgerufen im Dezember 2022 (englisch). 

• JavaScript-Bibliothek