JSX: JavaScript-Erweiterung und Anwendungsbeispiele

Was ist JSX?

JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die erstmals 2013 in React eingeführt wurde. Sie ermöglicht Entwicklern, die Struktur einer Benutzeroberfläche deklarativ zu beschreiben, indem sie Markup und Logik in einer Datei kombinieren.

Vor JSX verwendeten Entwickler String-Templates (Mustache, Handlebars) oder erstellten DOM-Elemente manuell per document.createElement. Beide Ansätze hatten Nachteile: String-Templates wurden nicht auf Typen geprüft, und die manuelle DOM-Erstellung war umständlich und fehleranfällig.

React wählte einen anderen Weg – Markup direkt in den Code einzubetten. Diese Entscheidung löste in der Community Diskussionen aus, wurde aber im Laufe der Zeit zum Standard. Heute wird JSX nicht nur in React verwendet, sondern auch in SolidJS, Preact, Qwik und sogar in Vue durch Plugins.

Grundlegende JSX-Syntax

Ein JSX-Element sieht wie ein HTML-Tag aus, wird aber direkt in JavaScript eingebettet. Jedes Element wird in einen React.createElement-Aufruf mit drei Argumenten transpiliert: Elementtyp, Props-Objekt und Kinder. Ein Wurzelelement ist eine zwingende Regel: Ein JSX-Ausdruck muss ein Eltern-Element oder Fragment zurückgeben.

import React from 'react';

// Basis-JSX - einzelnes Wurzelelement
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragmente zur Gruppierung

Wenn kein zusätzlicher DOM-Knoten benötigt wird, verwenden Sie React.Fragment oder die Kurzsyntax <></>. Fragmente erstellen kein echtes DOM-Element, sondern gruppieren nur Kindknoten. Dies ist besonders nützlich in Tabellen und Listen, wo ein zusätzlicher Wrapper die HTML-Struktur zerstören würde.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Ausdrücke und Variablen in JSX

Jeder JavaScript-Ausdruck wird über geschweifte Klammern { } in JSX eingebettet. Darin können Sie Variablen, Funktionsaufrufe, ternäre Operatoren und Array-Methoden verwenden. Bedingtes Rendern erfolgt über den ternären Operator oder logisches UND.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Eine wesentliche Einschränkung – innerhalb von geschweiften Klammern können nur Ausdrücke verwendet werden, keine Anweisungen. Sie können if/else, for, switch nicht verwenden – nur den ternären Operator, logische Operatoren und Array-Methoden. Funktionsaufrufe sind erlaubt, einschließlich Pfeilfunktionen.

Unterschiede zwischen JSX und HTML

JSX sieht HTML ähnlich, hat aber grundlegende Unterschiede. Attribute werden in camelCase geschrieben – className statt class, onClick statt onclick, tabIndex statt tabindex. Dies liegt daran, dass JSX in JavaScript transpiliert wird, wo Bindestriche in Eigenschaftsnamen nicht erlaubt sind.

Ein weiterer wichtiger Unterschied – Self-Closing-Tags. In HTML können einige Tags (br, hr, input) ungeschlossen bleiben. In JSX müssen alle Self-Closing-Tags einen Schrägstrich am Ende haben: <br />, <input />. SVG-Attributnamen werden ebenfalls in camelCase konvertiert: strokeWidth, fillOpacity.

Wie JSX in JavaScript transpiliert wird

Browser verstehen JSX nicht direkt. Vor der Ausführung durchläuft JSX-Code einen Transpiler – Babel, TypeScript oder esbuild. Jedes JSX-Element wird in einen createElement- oder jsx/runtime-Aufruf umgewandelt.

Transformation mit Babel

// Original-JSX
const element = <h1 className="title">Hello</h1>;

// Nach der Transpilierung
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Mit React 17 kam eine neue JSX-Transformation, die kein Importieren von React erfordert. Der automatische Import von jsx-runtime ermöglicht das Schreiben von Komponenten ohne import React from ‘react’. Babel und TypeScript unterstützen diese Transformation über die Konfiguration {"runtime": "automatic"}.

JSX außerhalb von React: Solid, Preact, Vue

Obwohl JSX mit React assoziiert wird, verwenden es auch andere Frameworks. SolidJS verwendet JSX mit Kompilierung in echte DOM-Knoten, ohne Virtual DOM. Preact ist eine leichte Alternative zu React mit voller JSX-Unterstützung. Vue unterstützt JSX über @vue/babel-plugin-jsx, obwohl seine Hauptvorlage template ist.

Ein Hauptunterschied ist die Ausdruckssemantik. In React werden JSX-Ausdrücke bei jedem Rendern ausgeführt. In SolidJS wird JSX einmal kompiliert und Aktualisierungen werden über Signale verfolgt. Dies beeinflusst die Leistung: SolidJS benötigt kein Virtual DOM und keine Reconciliation, was JSX-Rendering schneller macht.

In TypeScript wird JSX auf Sprachebene unterstützt. Dateien mit der Erweiterung .tsx verarbeiten JSX-Syntax automatisch. Die Props-Typisierung ist einer der Hauptvorteile von TypeScript + JSX: Die IDE schlägt erwartete Attribute, Callback-Typen und Props-Erforderlichkeit vor.

Bewährte Methoden mit JSX

Schreiben Sie JSX-Code, der leicht zu lesen und zu warten ist. Extrahieren Sie komplexe Ausdrücke in separate Variablen oder Funktionen – dies verbessert die Lesbarkeit und ermöglicht das Testen der Logik getrennt vom Markup. Verwenden Sie Fragmente anstelle unnötiger Div-Wrapper.

Die Einrückungsregel – halten Sie Einrückungen für verschachtelte Elemente ein. Jede Verschachtelungsebene ist eine Einrückungsebene. Das schließende Tag sollte auf derselben Ebene wie das öffnende Tag sein. Verwenden Sie Zeilenumbrüche für lange Attribute.

Vermeiden Sie Inline-Pfeilfunktionen in Props, wenn sie bei jedem Rendern erstellt werden. Wickeln Sie in solchen Fällen den Callback in useCallback oder verschieben Sie die Funktion außerhalb der Komponente. Teilen Sie komplexe Komponenten in kleinere auf – jede Komponente sollte eine logische Einheit der Schnittstelle behandeln.