React: JSX
Wofür braucht man JSX bei React?
Syntax
JSX ist eine Erweiterung von Javascript und ermöglicht
das Schreiben von HTML und Javascript in einem.
JSX erstellt elements.
Ein Beispiel ist immer
|
const element = <h1>Hello, world!</h1>;
|
Syntax Erweiterung für Javascript
Template language
Einbetten von Funktionen und Werten
In folgenden Beispiel wird name erstellt und in einem element
eingebettet durch die {name} Klammern
|
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
|
Dynamische Inline-Funktionen
Man kann auch Funktionen, Berechnungen, Methoden in den {
Klammern } übergeben.
Dadurch kann auch in einer if oder for loop der Wert zur
Laufzeit übergeben werden.
Child Elemente
Einbinden von Javascript Ausdrücken
Hier in der image Source src
|
const element = <img src={user.avatarUrl}></img>;
|
Mehrstufige JSX Tags
Hier mit ( runder Klammer ) eingefasst.
|
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
|
Verhinderung von Injection ' und Cross-Site-scripting
Alle Elemente von JSX werden vor dem Rendern in Strings
umgewandelt und dadurch Injection mit einfachem Hochkomma ' und Cross-Site
scripte verhindert.
|
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
|
Der Babel Compiler wandelt JSX elemente in React.createElement()
um
Wodurch dann Elemente erstellt werden
|
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello,
world!'
}
};
|
Quelle: https://reactjs.org/docs/introducing-jsx.html