Technopedia Center
PMB University Brochure
Faculty of Engineering and Computer Science
S1 Informatics S1 Information Systems S1 Information Technology S1 Computer Engineering S1 Electrical Engineering S1 Civil Engineering

faculty of Economics and Business
S1 Management S1 Accountancy

Faculty of Letters and Educational Sciences
S1 English literature S1 English language education S1 Mathematics education S1 Sports Education
teknopedia

teknopedia

teknopedia

teknopedia

teknopedia
  • Registerasi
  • Brosur UTI
  • Kip Scholarship Information
  • Performance
  1. Weltenzyklopädie
  2. JSX (JavaScript) – Wikipedia
JSX (JavaScript) – Wikipedia
aus Wikipedia, der freien Enzyklopädie
JSX
const element = <h1>Hallo Welt!</h1>;
Basisdaten
Erscheinungsjahr: 2013[1]
Beeinflusst von: JavaScript, Hypertext Markup Language
facebook.github.io/jsx/

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.

Syntax

[Bearbeiten | Quelltext bearbeiten]

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

[Bearbeiten | Quelltext bearbeiten]

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)

[Bearbeiten | Quelltext bearbeiten]

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

[Bearbeiten | Quelltext bearbeiten]

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

[Bearbeiten | Quelltext bearbeiten]

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

TSX

[Bearbeiten | Quelltext bearbeiten]

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

Siehe auch

[Bearbeiten | Quelltext bearbeiten]
  • JavaScript und TypeScript
  • React
  • ECMAScript for XML

Einzelnachweise

[Bearbeiten | Quelltext bearbeiten]
  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.teknopedia.teknokrat.ac.id/w/index.php?title=JSX_(JavaScript)&oldid=237259537“
Kategorie:
  • JavaScript-Bibliothek

  • indonesia
  • Polski
  • العربية
  • Deutsch
  • English
  • Español
  • Français
  • Italiano
  • مصرى
  • Nederlands
  • 日本語
  • Português
  • Sinugboanong Binisaya
  • Svenska
  • Українська
  • Tiếng Việt
  • Winaray
  • 中文
  • Русский
Sunting pranala
Pusat Layanan

UNIVERSITAS TEKNOKRAT INDONESIA | ASEAN's Best Private University
Jl. ZA. Pagar Alam No.9 -11, Labuhan Ratu, Kec. Kedaton, Kota Bandar Lampung, Lampung 35132
Phone: (0721) 702022
Email: pmb@teknokrat.ac.id