„JSX (JavaScript)“ – Versionsunterschied
| [gesichtete Version] | [gesichtete Version] |
K HC: Entferne Kategorie:Javascript; Ergänze Kategorie:JavaScript-Bibliothek |
Aka (Diskussion | Beiträge) K typografische Anführungszeichen, Kleinkram |
||
| Zeile 2: | Zeile 2: | ||
== Syntax == |
== Syntax == |
||
In ''JSX'' ist jedes Tag ein „[[Funktion (Programmierung)|Funktionsaufruf]]“, der ein Element erzeugt. Wenn JSX in [[React]] |
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"> |
||
function createElement(elementType, props, ...children) {} |
function createElement(elementType, props, ...children) {} |
||
</syntaxhighlight>Dies liegt daran, dass jedes Tag mit der Funktion <code>createElement()</code> ein Element erstellt. |
</syntaxhighlight>Dies liegt daran, dass jedes Tag mit der Funktion <code>createElement()</code> ein Element erstellt. |
||
Der folgende Beispielcode zeigt, wie man JSX in [[React]] einbetten kann:<syntaxhighlight lang="javascript"> |
Der folgende Beispielcode zeigt, wie man JSX in [[React]] einbetten kann:<syntaxhighlight lang="javascript"> |
||
| Zeile 14: | Zeile 14: | ||
document.getElementById('root') |
document.getElementById('root') |
||
); |
); |
||
</syntaxhighlight>In diesem Code werden 2 Konstanten erstellt und den Zeichenfolgenwert an den [[Hypertext Markup Language|HTML-Code]] übergeben. |
</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> |
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> |
||
| Zeile 39: | Zeile 39: | ||
</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, 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> |
||
== Siehe auch == |
== Siehe auch == |
||
Version vom 7. Oktober 2022, 17:01 Uhr
JSX steht für Javascript Syntax Extension oder Javascript XML und ist eine Erweiterung der gängigen Javascript-Syntax von React.[1]
Syntax
In JSX ist jedes Tag ein „Funktionsaufruf“, der ein Element erzeugt. Wenn JSX in React „übersetzt“ wird, sieht das Ergebnis so aus:
function createElement(elementType, props, ...children) {}
Dies liegt daran, dass jedes Tag mit der Funktion createElement() ein Element erstellt.
Der folgende Beispielcode zeigt, wie man JSX in React einbetten kann:
const name = 'Max Mustermann';
const element = <h1>Hallo, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
In diesem Code werden 2 Konstanten erstellt und den Zeichenfolgenwert an den HTML-Code übergeben.
Danach wird ReactDOM.render() aufgerufen und den HTML-Code zusammen mit dem „root“-Element übergeben.[2][3][4]
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 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 einen String konvertiert, bevor es gerendert wird. Dies hilft, XSS-Angriffe (Cross-Site-Scripting) zu verhindern.[5]
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, daher können sie in JSX nicht direkt verwendet werden.[6][7]
Siehe auch
Einzelnachweise
- ↑ Einführung in JSX – React. Abgerufen am 10. Juni 2022 (englisch).
- ↑ 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).