JSX (JavaScript) - Versionsgeschichte

2003:DE:371F:DABE:603A:E0BD:BD3F:A182 am 12. September 2023 um 10:54 Uhr

2023-09-12T10:54:12Z

← Nächstältere Version		Version vom 12. September 2023, 12:54 Uhr
Zeile 5:		Zeile 5:
	}}		}}

	'''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.		'''JSX''' (''JavaScript Syntax Extension'' oder gelegentlich ''JavaScript XML'') ist eine [[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 ==

Invisigoth67: typo

2023-01-25T10:01:31Z

typo

← Nächstältere Version		Version vom 25. Januar 2023, 12:01 Uhr
Zeile 48:		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 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>		</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 ===

Simon04: erw.

2022-12-10T10:21:35Z

erw.

← Nächstältere Version		Version vom 10. Dezember 2022, 12:21 Uhr
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 ==

Aka: typografische Anführungszeichen, Kleinkram

2022-10-07T15:01:28Z

typografische Anführungszeichen, Kleinkram

M2k~dewiki: HC: Entferne Kategorie:Javascript; Ergänze Kategorie:JavaScript-Bibliothek

2022-06-10T07:46:44Z

HC: Entferne Kategorie:Javascript; Ergänze Kategorie:JavaScript-Bibliothek

← Nächstältere Version		Version vom 10. Juni 2022, 09:46 Uhr
Zeile 49:		Zeile 49:
	<references />		<references />

	[[Kategorie:~~Javascript~~]]		[[Kategorie:JavaScript-Bibliothek]]

M2k~dewiki: HC: Ergänze Kategorie:Javascript

2022-06-10T07:46:26Z

HC: Ergänze Kategorie:Javascript

← Nächstältere Version		Version vom 10. Juni 2022, 09:46 Uhr
Zeile 48:		Zeile 48:
	== Einzelnachweise ==		== Einzelnachweise ==
	<references />		<references />

			[[Kategorie:Javascript]]

Sky-Dean Dawid: Sky-Dean Dawid verschob die Seite Benutzer:Sky-Dean Dawid/JSX (JavaScript) nach JSX (JavaScript): Artikel vollständig

2022-06-10T06:35:10Z

Sky-Dean Dawid verschob die Seite Benutzer:Sky-Dean Dawid/JSX (JavaScript) nach JSX (JavaScript): Artikel vollständig

← Nächstältere Version	Version vom 10. Juni 2022, 08:35 Uhr
(kein Unterschied)

Sky-Dean Dawid: Artikel fertig.

2022-06-10T06:34:18Z

Artikel fertig.

Neue Seite

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

== Syntax ==
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) {}
</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">
const name = 'Max Mustermann';
const element = <h1>Hallo, {name}</h1>;

ReactDOM.render(
element,
document.getElementById('root')
);
</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 ===
Man benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:<syntaxhighlight lang="javascript">
const element = <a href="https://www.wikipedia.org"> link </a>;
</syntaxhighlight>Ebenfalls kann man geschweifte Klammern verwenden, um JavaScript-Ausdrücke in ein Attribut einzubinden:<syntaxhighlight lang="javascript">
const element = <img src={user.avatarUrl}></img>;
</syntaxhighlight>

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

// Dies ist sicher:

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>

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

''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 ==

* [[JavaScript]]
* [[React]]

== Einzelnachweise ==
<references />

← Nächstältere Version		Version vom 7. Oktober 2022, 17:01 Uhr
Zeile 2:		Zeile 2:

	== Syntax ==		== Syntax ==
	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">		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 ==