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

JSX 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

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

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.[9][10]

Vue

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

TSX

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

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.