jambit ToiletPaper #117

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.
What is JSX / TSX and how to convert it into pure JavaScript code

Wir verwenden Cookies, um unsere Webseite für Sie zu optimieren. Mit dem Besuch unserer Webseite erklären Sie sich damit einverstanden. // Our website is using cookies to improve your experience. By continuing to browse the site, you are agreeing to our use of cookies.

Weitere Informationen finden Sie in unserer Datenschutzerklärung. // For more information, please refer to our privacy policy.