Was ist eigentlich JSX / TSX?

Problem: Dateiendungen JSX / TSX in React / TypeScript

Jeder, der schon einmal mit React gearbeitet hat, wird die Dateiendung JSX (TSX bei TypeScript) und die HTML-ähnliche Syntax kennen. Doch was genau verbirgt sich eigentlich dahinter?

const profile = <div>
  <img src={u.avatar} className="profile" alt={`Pic of ${u.firstName}`} />
  <h3>{[u.firstName, u.lastName].join(' ')}</h3>
</div>;

Lösung: Umwandlung mit einem Transpiler

JSX/TSX wird von einem Transpiler (z. B. babel oder tsc) zu reinem JavaScript-Code gewandelt. Das obige Beispiel würde zu folgendem JS kompiliert werden:

const profile = React.createElement("div", null,
  React.createElement("img", { src: u.avatar, className: "profile", alt: `Pic of ${u.firstName}` }),
  React.createElement("h3", null, [u.firstName, u.lastName].join(" "))
);

Die Funktion React.createElement erhält als ersten Parameter entweder einen Tagnamen oder eine Komponente (Funktions- oder Klassenkomponente).
- Fängt der Tagname im JSX klein an, z. B. <button>, ist der Parameter ein String, andernfalls (z. B. <Button>) eine Funktion oder eine Klasse (welche so benannt im Scope vorhanden sein muss).

Der zweite Parameter ist ein Objekt mit allen Properties, die dem Tag zugewiesen wurden. Falls keine Properties zugewiesen wurden, ist dieser Parameter null.

Die restlichen Parameter sind die Kindelemente, welche im Tag eingefügt wurden.

Beispiel

Man kann sich also ganz einfach einen Ersatz für React schreiben, welcher, anstelle eines Virtual DOM, echte HTML Elemente mit document.createElement erzeugt:

function h(tag, props, ...children) {
    if (typeof tag === "function") return tag({ ...props, children });
    const element = document.createElement(tag);
    if (props) setAllAttributes(element, props);
    applyChildren(element, children);
    return element;
}

Diese Funktion könnte dann anstelle von React.createElement aufgerufen werden. Dieses sehr simple Beispiel unterstützt sogar Funktionskomponenten.