Zum Inhalt springen

„JSX (JavaScript)“ – Versionsunterschied

aus Wikipedia, der freien Enzyklopädie
Versionsgeschichte interaktiv durchsuchen
[gesichtete Version][gesichtete Version]
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Inhalt gelöscht Inhalt hinzugefügt
VisuellWikitext
K typografische Anführungszeichen, Kleinkram
erw.
Zeile 1: Zeile 1:

⚫
'''JSX''' steht für ''Javascript Syntax Extension'' oder ''Javascript XML'' und ist eine [[Erweiterung]] der gängigen Javascript-[[Syntax]] von [[React]].<ref>{{Internetquelle |url=https://de.reactjs.org/docs/introducing-jsx.html |titel=Einführung in JSX – React |sprache=en |abruf=2022-06-10}}</ref>
{{Infobox Programmiersprache
| Logo = <syntaxhighlight lang="javascript">const element = <h1>Hallo Welt!</h1>;
</syntaxhighlight>
}}

⚫
'''JSX''' (''JavaScript Syntax Extension'' oder gelegentlich ''JavaScript XML'') ist ein [[Syntax]]-Erweiterung für [[JavaScript]] ([[Syntaktischer Zucker]]).<ref>{{Internetquelle |url=https://de.reactjs.org/docs/introducing-jsx.html |titel=Einführung in JSX – React |sprache=en |abruf=2022-06-10}}</ref> JSX wurde für das Framework [[React]] entwickelt und wird als [[Auszeichnungssprache]] für [[Steuerelement|Komponenten]] verwendet.


== Syntax ==
== Syntax ==
JSX ist in seiner Syntax ähnlich zu [[Hypertext Markup Language]], wie das folgende Beispiel zeigt:<ref>{{Internetquelle |url=https://facebook.github.io/jsx/ |titel=JSX |werk=facebook.github.io/jsx |datum=2022-08-04 |sprache=en |abruf=2022-12}}</ref><syntaxhighlight lang="javascript">
In ''JSX'' ist jedes Tag ein „[[Funktion (Programmierung)|Funktionsaufruf]]“, der ein Element erzeugt. Wenn JSX in [[React]] „übersetzt“ wird, sieht das Ergebnis so aus: <syntaxhighlight lang="javascript">
const user = "Max Mustermann";
function createElement(elementType, props, ...children) {}
const element = (
</syntaxhighlight>Dies liegt daran, dass jedes Tag mit der Funktion <code>createElement()</code> ein Element erstellt.
<div>
<h1 className="greeting">Hallo, {user}</h1>
<a href="https://www.reactjs.org">link</a>
</div>
);
</syntaxhighlight>
Beim [[Compiler|Übersetzen]] von JSX wird daraus der folgende React-JavaScript-Code mit erzeugt:<ref><code>[https://reactjs.org/docs/react-api.html#createelement React.createElement]</code></ref> <syntaxhighlight lang="javascript">
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"])
]);


</syntaxhighlight>
Der folgende Beispielcode zeigt, wie man JSX in [[React]] einbetten kann:<syntaxhighlight lang="javascript">
⚫
Der folgende Beispielcode zeigt, wie man JSX in React mittels <code>ReactDOM.render()</code> einbetten kann.<ref>{{Internetquelle |url=https://t3n.de/consent?redirecturl=%2Fnews%2Feigentlich-jsx-wofuer-das-867296%2F |titel=t3n – digital pioneers {{!}} Was ist JSX und wofür braucht man das? |sprache=de |abruf=2022-06-10}}</ref><ref>{{Internetquelle |url=https://www.letsreact.org/what-is-jsx/ |titel=What is JSX? How to use JavaScript with React? – Let's React |sprache=en-US |abruf=2022-06-10}}</ref><ref>{{Internetquelle |url=https://de.reactjs.org/docs/introducing-jsx.html |titel=Einführung in JSX – React |sprache=en |abruf=2022-06-10}}</ref> <syntaxhighlight lang="javascript">
const name = 'Max Mustermann';
const name = 'Max Mustermann';
const element = <h1>Hallo, {name}</h1>;
const element = <h1>Hallo, {name}</h1>;
Zeile 14: Zeile 33:
document.getElementById('root')
document.getElementById('root')
);
);
</syntaxhighlight>
</syntaxhighlight>In diesem Code werden 2 Konstanten erstellt und den Zeichenfolgenwert an den [[Hypertext Markup Language|HTML-Code]] übergeben.

⚫
Danach wird <code>ReactDOM.render()</code> aufgerufen und den HTML-Code zusammen mit dem „root“-Element übergeben.<ref>{{Internetquelle |url=https://t3n.de/consent?redirecturl=%2Fnews%2Feigentlich-jsx-wofuer-das-867296%2F |titel=t3n – digital pioneers {{!}} Was ist JSX und wofür braucht man das? |sprache=de |abruf=2022-06-10}}</ref><ref>{{Internetquelle |url=https://www.letsreact.org/what-is-jsx/ |titel=What is JSX? How to use JavaScript with React? – Let's React |sprache=en-US |abruf=2022-06-10}}</ref><ref>{{Internetquelle |url=https://de.reactjs.org/docs/introducing-jsx.html |titel=Einführung in JSX – React |sprache=en |abruf=2022-06-10}}</ref>

=== Attribute ===
=== Attribute ===
Man benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:<syntaxhighlight lang="javascript">
Man benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:<syntaxhighlight lang="javascript">
Zeile 26: Zeile 42:


=== Sicherheit (XSS) ===
=== Sicherheit (XSS) ===
JSX verhindert ''Injection-Attacken'' wie XSS. Es ist sicher, Benutzereingaben wie diese einzubetten:<syntaxhighlight lang="javascript">
JSX verhindert ''Injection-Attacken'' wie [[Cross-Site-Scripting]] (XSS). Es ist sicher, Benutzereingaben wie diese einzubetten:<syntaxhighlight lang="javascript">
const title = response.potentiallyMaliciousInput;
const title = response.potentiallyMaliciousInput;


Zeile 32: Zeile 48:


const element = <h1>{title}</h1>;
const element = <h1>{title}</h1>;
</syntaxhighlight>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.<ref>{{Internetquelle |url=https://www.mariokandut.com/what-is-jsx-in-react/ |titel=What is JSX and why to use it? |sprache=en |abruf=2022-06-10}}</ref>
</syntaxhighlight>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..<ref>{{Internetquelle |url=https://www.mariokandut.com/what-is-jsx-in-react/ |titel=What is JSX and why to use it? |sprache=en |abruf=2022-06-10}}</ref>


=== Props in JSX ===
=== Props in JSX ===
Man kann einen beliebigen JavaScript-Ausdruck als ''Prop'' übergeben, indem man ihn mit {} umgibt. Zum Beispiel in diesem Code:<syntaxhighlight lang="javascript">
Man kann einen beliebigen JavaScript-Ausdruck als ''Prop'' übergeben, indem man ihn mit <code>{}</code> umgibt. Zum Beispiel in diesem Code:<syntaxhighlight lang="javascript">
<MyComponent foo={1 + 2 + 3 + 4} />
<MyComponent foo={1 + 2 + 3 + 4} />
</syntaxhighlight>Für <code>MyComponent</code> wird der Wert von <code>props.foo</code> 10 sein, weil der Ausdruck 1 + 2 + 3 + 4 ausgewertet wird.
</syntaxhighlight>Für <code>MyComponent</code> wird der Wert von <code>props.foo</code> 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.<ref>{{Internetquelle |url=https://reactjs.org/docs/components-and-props.html |titel=Components and Props – React |sprache=en |abruf=2022-06-10}}</ref><ref>{{Internetquelle |url=https://reactjs.org/docs/jsx-in-depth.html |titel=JSX In Depth – React |sprache=en |abruf=2022-06-10}}</ref>
''if-Anweisungen'' und ''for-Schleifen'' sind in [[JavaScript]] keine Ausdrücke (sondern Anweisungen), daher können sie in JSX nicht direkt verwendet werden.<ref>{{Internetquelle |url=https://reactjs.org/docs/components-and-props.html |titel=Components and Props – React |sprache=en |abruf=2022-06-10}}</ref><ref>{{Internetquelle |url=https://reactjs.org/docs/jsx-in-depth.html |titel=JSX In Depth – React |sprache=en |abruf=2022-06-10}}</ref>

== Vue ==
Das Framework [[Vue.js]] verwendet eine eigene Auszeichnungssprache, kann aber auf Wunsch mit JSX verwendet werden.<ref>{{Internetquelle |url=https://vuejs.org/guide/extras/render-function.html#jsx-tsx |titel=Render Functions & JSX |werk=Vue.js |sprache=en |abruf=2022-12}}</ref>

== TSX ==
Zur Verwendung von JSX mit [[TypeScript]] wird die [[Dateierweiterung]] <code>.tsx</code> verwendet.<ref>{{Internetquelle |url=https://www.typescriptlang.org/docs/handbook/jsx.html |titel=JSX |werk=TypeScript Handbook |sprache=en |abruf=2022-12}}</ref>


== Siehe auch ==
== Siehe auch ==


* [[JavaScript]]
* [[JavaScript]] und [[TypeScript]]
* [[React]]
* [[React]]
* [[ECMAScript for XML]]


== Einzelnachweise ==
== Einzelnachweise ==

Version vom 10. Dezember 2022, 12:21 Uhr

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

JSX (JavaScript Syntax Extension oder gelegentlich JavaScript XML) ist ein Syntax-Erweiterung für JavaScript (Syntaktischer Zucker).[2] 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:[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).
Abgerufen von „https://de.wikipedia.org/w/index.php?title=JSX_(JavaScript)&oldid=228725539“