JSX
const element = <h1>Hallo Welt!</h1>;
Basisdaten
Erscheinungsjahr: 2013
Beeinflusst von: JavaScript, HTML
facebook.github.io/jsx/

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:

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: 

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. 

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

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

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 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.

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 (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.

Siehe auch

Einzelnachweise

  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).
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.