JSX

Eine Einführung in JSX

Wenn Sie schon einmal eine Web-App mit dem Framework „React.js“ implementiert haben, ist Ihnen vielleicht aufgefallen, dass die Syntax zum Schreiben von React.js-Komponenten etwas anders aussieht als Ihr anderer Javascript-Code. Obwohl meist gleich, werden React-Komponenten durch spezielle Klammern beschrieben, die linke und rechte spitze Klammer. Sie sehen aus wie die Syntax für XML, die „Extensible Markup Language“. In React.js wird diese Syntax ähnlich „JSX“ genannt, was „Javascript XML“ bedeutet.

Das Hauptziel dieser Syntax besteht darin, das Schreiben von React-Code zu vereinfachen. JSX-Code kann von JVMs nicht interpretiert werden, daher muss er vor der Verwendung zu echtem Javascript-Code kompiliert werden - eine Aufgabe, die typischerweise von Bundles wie Babel oder Webpack erledigt wird.

Der React-Code, den Sie wahrscheinlich noch nie geschrieben haben

Dies bedeutet effektiv, dass Sie sehr wahrscheinlich noch nie solche „echten“ React.js-Komponenten geschrieben haben, die aus Ihrem JSX-Code generiert werden. Aber keine Sorge, das geht ganz einfach und ohne großen Aufwand. Tatsächlich können Sie sogar eine vollständige React-Webanwendung schreiben, ohne jemals JSX zu verwenden. Der folgende Codeausschnitt zeigt, wie eine echte React.js-Komponente mit nur Javascript aussieht.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

Sie können dies sogar in Ihrem Browser ausprobieren, ohne eine Software zu installieren! Scrollen Sie einfach bis zum Ende dieser Seite, um den Link im Anhang zu verwenden.

Verwenden von JSX zur Vereinfachung Ihres Codes

Wie Sie sehen, besteht der Hauptvorteil der JSX-Syntax darin, dass Ihr UI-bezogener Code einfacher zu schreiben und von anderen Teilen Ihrer Anwendung zu unterscheiden ist, da die XML-ähnliche Syntax einen klaren Hinweis auf die Domäne des Codes bietet.

Ein weiteres großartiges Merkmal von JSX ist, dass es nach dem Kompilierungsschritt nur zu einem Ausdruck wird. Sie können es daher in if-else-Anweisungen verwenden oder sogar das Ergebnis in einer Variablen speichern. Und da React.js-Komponenten Ausdrücke als untergeordnete Elemente enthalten können, können Sie hochgradig zusammensetzbaren UI-Code schreiben!

Ein Standardimport für jede JSX-Datei

Sie haben vielleicht bemerkt, dass jede JSX-Datei in verschiedenen Tutorials, Anleitungen und höchstwahrscheinlich sogar Ihr eigener Code den Standardimport aus der React-Bibliothek enthält, auch wenn Sie diese importierte Variable möglicherweise nie direkt aufrufen. Der Grund dafür ist, dass nach dem Kompilierungsschritt jeder JSX-Ausdruck zu einem „React.createElement“-Aufruf wird, wie Sie im Codebeispiel zuvor gesehen haben. Daher ist es notwendig, dass die „React“-Variable aus dem Standardimport in jedem Dateiumfang enthalten ist.

Sieht aus wie HTML, ist es aber nicht

Eine wichtige Einschränkung beim Codieren in der JSX-Syntax ist die Notation des Namens Ihrer Komponente. Damit der Bundler Ihre Komponenten richtig erkennt, müssen sie sich von den Standard-HTML-Tags unterscheiden, da die Syntax gleich aussieht.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

Es ist daher erforderlich, JSX-Elemente immer in Groß-/Kleinschreibung zu codieren, was bedeutet, dass der erste Buchstabe groß geschrieben werden muss.

Die Typescript-Variante

Sie haben vielleicht bemerkt, dass viele Projekte auch TSX als Dateisuffix für ihre React.js-Komponentendateien verwenden. Dies ist nur eine Erweiterung des ursprünglichen JSX, um mit Typescript kompatibel zu sein. Mit TSX-Dateien können Sie Typescript-Code zusammen mit JSX-Notationskomponenten schreiben.

Nur der Anfang

Dieser Artikel bietet eine einfache Einführung in JSX zum Codieren von React-Komponenten. Der Hauptvorteil ist eine sehr prägnante Syntax, die sich in einer Webumgebung natürlich anfühlt. Sie können mit sehr wenig Code hochgradig zusammensetzbare Elemente schreiben, was zweifellos ein Schlüsselfaktor für den aktuellen berühmten und beliebten Zustand von React ist. Wenn Sie neugierig sind, gibt es auf ihrer Website noch viel mehr und ausgezeichnete detaillierte Anleitungen des React-Teams, die Links befinden sich im Anhang am Ende dieser Seite.