Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Was ist eigentlich JSX und wofür braucht man das?

JSX verbindet HTML simpel mit Javascript.

JSX ist eine Javascript-Erweiterung, die zum Arbeiten mit React empfohlen wird. Aber was unterscheidet JSX von Javascript und was kann es besser?

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"
)
),

(...)

JSX bringt Javascript und HTML zusammen

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!

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Hans-Christian Althauss

Simpel auf den Punkt gebracht. Scheint nun doch langsam mal interessant zu sein sich React anzuschauen. Vielen Dank dafür!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.