JSX (JavaScript)
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 | |
|---|---|
const element = <h1>Hallo Welt!</h1>;
| |
| Basisdaten | |
| Erscheinungsjahr: | 2013[1] |
| Beeinflusst von: | JavaScript, HTML |
| facebook.github.io/jsx/ | |
Syntax
BearbeitenJSX ist in seiner Syntax ähnlich zu Hypertext Markup Language, wie das folgende Beispiel zeigt:[3]
const user = "Max Mustermann";
const element = (
<div>
<h1 className="greeting">Hallo, {user}</h1>
<a href="https://www.reactjs.org">link</a>
</div>
);
Beim Übersetzen von JSX wird daraus der folgende React-JavaScript-Code mit erzeugt:[4]
const user = "Max Mustermann";
const element = 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]
const name = 'Max Mustermann';
const element = <h1>Hallo, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
Attribute
BearbeitenMan benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:
const element = <a href="https://www.wiki.x.io"> 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)
BearbeitenJSX verhindert Injection-Attacken wie Cross-Site-Scripting (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 eine Zeichenkette konvertiert, bevor es gerendert wird.[8]
Props in JSX
Bearbeiten
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 (sondern Anweisungen), daher können sie in JSX nicht direkt verwendet werden.[9][10]
Vue
BearbeitenDas Framework Vue.js verwendet eine eigene Auszeichnungssprache, kann aber auf Wunsch mit JSX verwendet werden.[11]
TSX
BearbeitenZur Verwendung von JSX mit TypeScript wird die Dateierweiterung .tsx verwendet.[12]
Siehe auch
BearbeitenEinzelnachweise
Bearbeiten- ↑ web.archive.org.
- ↑ Einführung in JSX – React. Abgerufen am 10. Juni 2022 (englisch).
- ↑ JSX. In: facebook.github.io/jsx. 4. August 2022, abgerufen im Dezember 2022 (englisch).
- ↑
React.createElement - ↑ t3n – digital pioneers | Was ist JSX und wofür braucht man das? Abgerufen am 10. Juni 2022.
- ↑ What is JSX? How to use JavaScript with React? – Let's React. Abgerufen am 10. Juni 2022 (amerikanisches Englisch).
- ↑ Einführung in JSX – React. Abgerufen am 10. Juni 2022 (englisch).
- ↑ What is JSX and why to use it? Abgerufen am 10. Juni 2022 (englisch).
- ↑ Components and Props – React. Abgerufen am 10. Juni 2022 (englisch).
- ↑ JSX In Depth – React. Abgerufen am 10. Juni 2022 (englisch).
- ↑ Render Functions & JSX. In: Vue.js. Abgerufen im Dezember 2022 (englisch).
- ↑ JSX. In: TypeScript Handbook. Abgerufen im Dezember 2022 (englisch).