JSX steht für Javascript XML oder Javascript Syntax Extension und ist eine Erweiterung der üblichen Javascript-Grammatik für React. XML wird dafür genutzt, Daten intern zu strukturieren und sinnvoll anzuordnen. Für deren Darstellung ist dann HTML zuständig. Javascript wird dann üblicherweise in Form von kleineren Scripten in HTML-Dateien eingesetzt. JSX dreht den Spieß hingegen um und setzt auf Javascript-Dateien, in die HTML eingebettet wird.

Das sieht in der jsx-Datei aus, wie man es sonst von HTML-Dateien kennt. Der Code kann beispielsweise eine Variable wie diese enthalten:

var nav = (

<ul id="nav">

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Clients</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

);

Damit diese allerdings dann auch in der Applikation auftaucht, ist ein Präprozessor notwendig. Dieser schaltet sich vor den Browser und wandelt den JSX-Code in simples Javascript um. Dabei wird aus jedem einzelnen Tag des HTML-Codes ein React.create-Element erzeugt, wodurch der Code problemlos lesbar wird. Das Beispiel dazu sei hier nur in einem Ausschnitt dargestellt, damit der Artikel nicht zu sehr in die Länge gezogen wird:

var nav = React.createElement(

"ul",

{ id: "nav" },

React.createElement(

"li",

null,

React.createElement(

"a",

{ href: "#" },

"Home"

)

),
(...)

Es ist also zu sehen, dass es potenziell auch möglich wäre, den gleichen Code direkt als JS-Datei anzulegen, allerdings wäre die Schreibarbeit weitaus höher. Im Grunde ersetzt JSX die Notwendigkeit HTML über ein React.create-Element aufzubauen und bietet eine komfortablere Lösung dafür an. Dafür müsst ihr in den HTML-Anweisungen wiederum Javascript-Elemente mit geschweiften Klammern markieren. Die dynamischen Typen von Javascript fallen weg, ihr müsst also bei dieser statischen Typisierung darauf achten, dass zugewiesene Werte den richtigen Typ haben. Ansonsten bietet JSX natürlich die gleichen Möglichkeiten wie Javascript, da es das ja nur erweitert.

Falls euch JSX für die Kombination mit HTML gut gefällt, ihr aber mit React gar nicht arbeiten wollt, gibt es dafür inzwischen tatsächlich Lösungen. Bibliotheken wie nativejs oder jsrender wollen die Funktionalität von JSX von React lösen. Wie sinnvoll das ist, muss jeder für sich entscheiden, es werden aber in jedem Fall Anstrengungen in die Richtung unternommen.

Insgesamt kommt es einmal mehr darauf an, aus welchem Bereich ihr kommt, wenn ihr auf JSX schaut. Wer bisher nur mit HTML und CSS zu tun hatte, wird vielleicht eher mit der Syntax von JSX zurecht kommen, weil sie vieles beinhaltet, was euch schon bekannt ist und neues darin integriert. Wer andererseits bisher mit Javascript zu tun hatte, muss eine recht neue Syntax lernen, die nicht immer ganz simpel ist und ein Umdenken erfordert.

Wie gefällt euch JSX? Schreibt uns in den Kommentaren!