Traditionell haben Entwickler Markup und Logik in separaten Dateien getrennt. Sie haben HTML für die Struktur und CSS für das Styling verwendet und dann JavaScript für die Interaktionen und die Datenmanipulation geschrieben.

Aber was wäre, wenn es eine Möglichkeit gäbe, diese Technologien zu kombinieren, um den Entwicklungsprozess zu vereinfachen und die Erstellung komplexer Benutzeroberflächen zu erleichtern? An dieser Stelle kommt JSX ins Spiel.

In diesem Artikel erfährst du, was JSX ist, wie es funktioniert und warum es für die Erstellung dynamischer Benutzeroberflächen in der Webentwicklung wichtig ist.

Lass uns diese revolutionäre Technologie genauer unter die Lupe nehmen.

Was ist JSX?

JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die es Entwicklern ermöglicht, HTML-ähnlichen Code innerhalb einer JavaScript-Datei zu schreiben. Sie wurde von Meta (früher Facebook) entwickelt.

Die Syntax von JSX ähnelt HTML, mit öffnenden und schließenden Tags, Attributen und verschachtelten Elementen.

Du könntest zum Beispiel den folgenden JSX-Code schreiben, um ein einfaches Überschriftenelement darzustellen:

const heading = <h1>Hello, JSX!</h1>;

Dieser Code sieht aus wie HTML, aber er ist JavaScript. Das Schlüsselwort const erstellt eine neue Variable namens heading, deren Wert das Ergebnis des JSX-Ausdrucks ist.

Wie funktioniert JSX?

JSX wird in normales JavaScript umgewandelt, bevor es im Browser ausgeführt wird. Diese Umwandlung erfolgt mit einem Tool, das Transpiler genannt wird. Der beliebteste Transpiler für JSX ist Babel.

Babel wandelt den JSX-Code in eine Reihe von Funktionsaufrufen um. Diese Funktionsaufrufe entsprechen dem HTML-ähnlichen Code, der in JSX geschrieben wurde. Der Browser kann dann den resultierenden JavaScript-Code ausführen.

Zum Beispiel der folgende JSX-Code:

const element = <h1>Hello, world!</h1>;

wird in den folgenden JavaScript-Code umgewandelt:

const element = React.createElement("h1", null, "Hello, world!");

Diese Umwandlung ermöglicht es Entwicklern, Code in einer Syntax zu schreiben, die vertraut und leicht zu lesen ist, und gleichzeitig die Leistungsfähigkeit und Flexibilität von JavaScript zu nutzen.

JSX und React

JSX ist ein integraler Bestandteil von React und ermöglicht es Entwicklern, das Markup und die Logik für diese Komponenten in einer einzigen Datei zu schreiben.

Hier ist ein einfaches Beispiel für JSX-Code in einer React-Komponente:

import React from 'react';

function Greet() {
  return <h1>Hello World!</h1>;
}

export default Greeting;

In diesem Beispiel hast du eine funktionale Komponente namens Greet, die ein h1 Element mit einer Begrüßungsnachricht darstellt.

Der React-Compiler wandelt diesen Code in optimierten JavaScript-Code um, der vom Browser ausgeführt werden kann, damit die Komponente auf dem Bildschirm dargestellt werden kann.

So würde der React-Compiler die Komponente Greet umwandeln:

import React from 'react'

function Greet() {
  return React.createElement("h1", {}, "Hello, World!")
}

In diesem Code wurde der JSX-Code in einen React.createElement -Aufruf umgewandelt, der die gleiche Struktur und den gleichen Inhalt wie der ursprüngliche JSX-Code erzeugt.

Das passiert hinter den Kulissen, wenn React JSX-Code kompiliert, damit er vom Browser ausgeführt werden kann. Allerdings kann der umgewandelte Code weniger gut lesbar sein als der ursprüngliche JSX-Code.

In React Version 17 wurde eine neue JSX-Transformationsfunktion eingeführt, die automatisch spezielle Funktionen aus den neuen Einstiegspunkten des React-Pakets importiert und es Entwicklern ermöglicht, JSX zu verwenden, ohne React am Anfang ihrer Dateien importieren zu müssen.

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

Verwendung von JavaScript-Ausdrücken mit JSX

In JSX können JavaScript-Ausdrücke direkt in das Markup eingebettet werden, um Inhalte dynamisch zu generieren. So können Entwickler/innen JavaScript-Code verwenden, um Werte zu berechnen, Operationen durchzuführen und Inhalte in ihren JSX-Komponenten bedingt darzustellen.

Dieses Beispiel zeigt, wie man zwei JavaScript-Ausdrücke in JSX verwendet:

import React from 'react';

const MyComponent = () => {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Next year, you will be {age + 1} years old.</p>
      {age >= 18 && <p>You are an adult.</p>}
    </div>
  );
};

export default MyComponent;

In diesem Beispiel werden JavaScript-Ausdrücke wie {name}, {age}, {age + 1} und {age >= 18 && <p>You are an adult.</p>} verwendet, um Inhalte basierend auf den Werten der Variablen Name und Alter dynamisch darzustellen.

Verwendung von CSS mit JSX

CSS kann auf verschiedene Arten auf JSX-Komponenten angewendet werden, z. B. als Inline-Stile, separate CSS-Dateien oder CSS-in-JS-Bibliotheken. Inline-Stile werden direkt im JSX-Markup mithilfe von JavaScript-Objekten definiert, während separate CSS-Dateien oder CSS-in-JS-Bibliotheken ein externes und modulares Styling von Komponenten ermöglichen.

In diesem Beispiel wird gezeigt, wie man Inline-Stile, die mit einem JavaScript-Objekt definiert wurden, mit dem Attribut style in JSX auf Elemente anwendet:

import React from 'react';

const MyComponent = () => {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px'
  };

  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
      <p>This is a component with inline styles.</p>
    </div>
  );
};

export default MyComponent;

In diesem Beispiel werden CSS-Eigenschaften wie backgroundColor, color und padding als Schlüssel-Wert-Paare im styles-Objekt festgelegt, und ihre Werte sind Strings, die die CSS-Werte darstellen.

Hinweis: Inline-Stile bieten zwar Flexibilität und Einfachheit, aber für komplexere oder wiederverwendbare Stile in größeren Anwendungen empfiehlt es sich, CSS-Klassen oder CSS-in-JS-Bibliotheken zu verwenden.

6 Wichtige JSX-Regeln

Wenn du JSX-Code schreibst, solltest du bestimmte Regeln befolgen, um sicherzustellen, dass der Code gültig und leicht zu lesen ist.

1. Gib immer ein einzelnes Wurzelelement zurück

In JSX musst du immer ein einzelnes Root-Element zurückgeben. Das bedeutet, dass dein gesamter JSX-Code in einem einzigen, äußersten Element enthalten sein muss. Das ist zum Beispiel ein gültiges JSX:

return (
  <div>
    <h1>Hello World!</h1>
    <p>This is my first React component.</p>
  </div>
)

Das ist es aber nicht, weil es zwei Elemente statt einem zurückgibt:

return (
  <h1>Hello World!</h1>
  <p>This is my first React component.</p>
)

Das ist wichtig zu beachten, wenn du HTML-Code in JSX umwandelst.

2. ClassName statt Class verwenden

In HTML würdest du das Attribut class verwenden, um eine CSS-Klasse für ein Element anzugeben. In JSX musst du jedoch stattdessen das Attribut className verwenden. Zum Beispiel:

// Good
<div className="my-class">This element has a CSS class.</div>

// Bad
<div class="my-class">This element has a CSS class.</div>

Die Verwendung von className anstelle von class ist wichtig, um Namenskonflikte zu vermeiden, denn class ist ein reserviertes Schlüsselwort in JavaScript.

3. Geschweifte Klammern für JavaScript-Ausdrücke verwenden

Wenn du einen JavaScript-Ausdruck in deinen JSX-Code einfügen willst, musst du ihn in geschweifte Klammern {} einschließen. Dies kann für alles verwendet werden, von der Anzeige dynamischer Daten bis zum bedingten Rendering von Komponenten. Hier ist ein Beispiel:

// Good
<div>{myVariable}</div>

// Bad
<div>myVariable</div>

Du kannst innerhalb der geschweiften Klammern auch mathematische Operationen ausführen, wie z. B.:

<p>The total cost is {25*10}</p>

Außerdem kannst du innerhalb der geschweiften Klammern mit Hilfe von ternären Operatoren bedingte Anweisungen formulieren:

<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>

Hier ist ein besseres Beispiel mit einer React-Komponente:

function Greeting() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

In diesem Beispiel definieren wir eine Grußkomponente. Die Komponente verwendet den ternären Operator, um abhängig vom Wert von isLoggedIn eine Begrüßung darzustellen. Wenn isLoggedIn gleich true ist, stellt die Komponente ein h1 Element mit dem Text „Welcome back!“ dar. Wenn isLoggedIn false ist, zeigt die Komponente ein h1 Element mit dem Text „Bitte loggen Sie sich ein.“ an.

4. Verwende camelCase für die meisten Dinge in JSX

In JSX verwendest du für die meisten Dinge camelCase, auch für Attribute, Event-Handler und Variablennamen. Diese Konvention entspricht den JavaScript-Namenskonventionen und trägt zur besseren Lesbarkeit bei.

Verwende zum Beispiel code>onClick anstelle von onclick und className anstelle von class.

// Good
<button onClick={handleClick} className="btn">Click me!</button>

// Bad
<button onclick={handle_click} class="btn">Click me!</button>

5. Tags immer schließen

In JSX musst du deine Tags immer schließen, auch wenn sie keinen Inhalt haben. Zum Beispiel:

// Good
<div></div>

// Bad
<div/>

6. Selbstschließende Tags für leere Elemente verwenden

Wenn du ein Element hast, das keinen Inhalt hat, kannst du ein selbstschließendes Tag anstelle eines öffnenden und schließenden Tags verwenden. Zum Beispiel:

// Good
<img src="my-image.jpg" alt="My Image"/>

// Bad
<img src="my-image.jpg" alt="My Image"></img>

Warum ist JSX wichtig für die Webentwicklung?

JSX ist wichtig für die Webentwicklung, weil:

  1. Es ermöglicht Entwicklern, Benutzeroberflächen auf eine intuitivere und vertrautere Weise zu erstellen.
  1. Anstatt das DOM direkt zu manipulieren, können Entwickler JSX verwenden, um die Struktur ihrer Benutzeroberfläche auf eine Weise zu beschreiben, die dem Schreiben von HTML ähnlicher ist.
  1. Das ermöglicht eine effizientere und flexiblere Entwicklung. Da JSX nur JavaScript ist, können Entwickler alle Funktionen von JavaScript nutzen, um komplexere und dynamischere Benutzeroberflächen zu erstellen.
  1. JSX ist ein wichtiger Bestandteil der React-Bibliothek, die eine der beliebtesten Optionen für die Erstellung von Benutzeroberflächen in der modernen Webentwicklung ist. Wenn du React nutzen willst, musst du JSX lernen.

Zusammenfassung

JSX ist eine Syntaxerweiterung für JavaScript, die es Entwicklern ermöglicht, HTML-ähnliches Markup innerhalb einer JavaScript-Datei zu schreiben. Das macht es einfacher, dynamische und interaktive Benutzeroberflächen für Webanwendungen zu erstellen.

Du hast einige Regeln gelernt, die du bei der Verwendung von JSX beachten solltest. Wenn du diese Regeln befolgst, kannst du sauberen, lesbaren und wartbaren Code schreiben, der mit den JavaScript-Namenskonventionen übereinstimmt.