JSX zu JS: React-JSX in reines JavaScript kompilieren
JSX zu JS heißt: Die Tag-Syntax deiner React-Komponenten wird zu reinem JavaScript, das der Browser ausführen kann. Das Tool nutzt Babel, die Ausgabe entspricht also dem, was ein Babel-Build-Schritt schreiben würde. Du wählst zwischen den klassischen React.createElement-Aufrufen und der automatischen jsx()-Runtime und kopierst das Ergebnis. Dein Code wird im Browser kompiliert, nie hochgeladen und nie ausgeführt.
JSX zu JavaScript online: so geht's
Du brauchst weder eine Installation noch ein Konto:
- Füge deinen Code in das Feld JSX-Code ein. Solange es leer ist, steht dort „JSX hier einfügen…“. Erlaubt sind bis zu 1.000.000 Zeichen.
- Warte einen Moment. Das Tool kompiliert beim Tippen oder Einfügen etwa eine Drittelsekunde nach der letzten Änderung, einen Button zum Drücken gibt es nicht. Beim ersten Mal lädt Babel einmalig nach, das dauert etwas länger.
- Lies das Ergebnis unter der Überschrift JavaScript ab. Es erscheint als schreibgeschützter Code mit Syntaxhervorhebung.
- Wähle In die Zwischenablage kopieren. Die Schaltfläche zeigt danach Kopiert.
- Willst du ändern, wie das JSX kompiliert wird, nutze die Zahnrad-Schaltfläche daneben (JSX-Runtime-Einstellungen). Sie öffnet die Gruppe JSX-Runtime mit zwei Optionen, Klassisch und Automatisch. Nach einer Änderung wird der Code neu kompiliert.
Ist der Text kein gültiges JSX, siehst du eine Fehlermeldung mit Zeile und Spalte, dazu die betroffene Zeile mit einem ^ unter der Stelle, aber keine Ausgabe, bis der Fehler behoben ist. Steckt gar kein JSX im Code, bekommst du ihn als reines JavaScript zurück, mit dem Hinweis „In diesem Code wurde kein JSX gefunden, deshalb kommt er als reines JavaScript zurück.“
JSX zu React createElement: klassisch oder automatisch
Bei Klassisch, der Voreinstellung, wird jedes Element zu React.createElement(type, props, ...children) und ein Fragment zu React.Fragment. Es wird kein Import ergänzt, React muss also im Scope sein. Das passt, wenn dein Projekt oder Tutorial React noch in jeder Datei importiert oder du ein älteres Setup anpeilst.
Bei Automatisch entstehen jsx()- und jsxs()-Aufrufe, die Kinder wandern als children ins Props-Objekt, und ein Fragment heißt _Fragment. Der Import aus react/jsx-runtime kommt automatisch dazu, nur mit den Namen, die der Code braucht. Das setzt React 17 oder neuer voraus und liefert, was eine aktuelle React-Toolchain erzeugen würde.
Was der JSX Converter behält und was er ändert
- Importe und Exporte bleiben, wie du sie geschrieben hast.
- Kommentare bleiben an ihrer Stelle.
- Normales JavaScript rund um das JSX bleibt unverändert, abgesehen vom Layout von Babel.
- Die Formatierung stammt von Babel, nicht von Prettier: Deine Anführungszeichen und Zeilenumbrüche im JSX bleiben nicht erhalten. Zum Aufräumen schickst du das Ergebnis durch den Code-Formatierer.
- Vor Element-Aufrufen steht
/*#__PURE__*/. Das sagt Bundlern, dass der Aufruf keine Seiteneffekte hat.
Was nicht geht: TSX, TypeScript und mehr
Das Tool kompiliert nur JSX. TypeScript versteht es nicht, TSX mit Typannotationen ist also ein Syntaxfehler, und Flow liest es ebenfalls nicht. Es führt deinen Code nicht aus, prüft nicht, ob deine Komponenten funktionieren, und bündelt keine Dateien.
Für den umgekehrten Weg, von einfachem JavaScript zu typisiertem Code, gibt es das Tool JS in TS umwandeln. Minimierte oder verschleierte Skripte liest du mit dem JS-Deobfuskierer.
Warum alles im Browser läuft
Babel wird beim ersten Einfügen einmal geladen, danach läuft das Kompilieren in einem Web Worker auf deinem Gerät. Deine Komponente wird nirgendwohin gesendet und nie ausgeführt, deshalb kannst du auch eine Datei mit Seiteneffekten gefahrlos einfügen.
Häufige Fragen
Wie kann ich JSX zu JS online umwandeln?
Füge dein JSX in das Feld „JSX-Code“ ein. Etwa eine Drittelsekunde später erscheint das kompilierte JavaScript unter der Überschrift „JavaScript“. Es gibt keinen Umwandeln-Button, mit „In die Zwischenablage kopieren“ übernimmst du das Ergebnis. Babel wird beim ersten Einfügen einmal geladen, die erste Umwandlung dauert deshalb etwas länger.
Wandelt Babel JSX in JavaScript um?
Ja. Das React-Preset von Babel kompiliert JSX zu JavaScript, und genau das läuft hier in deinem Browser, die Ausgabe entspricht also einem Babel-Build-Schritt. Build-Tools erledigen dasselbe beim Bauen eines Projekts automatisch. Nutze diese Seite, wenn du das Ergebnis für eine einzelne Komponente oder ein Snippet sehen oder kopieren willst.
Was ist der Unterschied zwischen JS und JSX?
JSX ist JavaScript mit einer XML-ähnlichen Syntax zur Beschreibung von Oberflächen, zum Beispiel ein button-Tag mit einem onClick-Handler. Browser können es nicht ausführen, deshalb schreibt ein Compiler jeden Tag in einen normalen Funktionsaufruf um. Das Ergebnis ist gewöhnliches JavaScript. Die Endung .jsx ist nur eine Namenskonvention für Dateien, die JSX enthalten.
Was ist der Unterschied zwischen klassischer und automatischer Runtime?
Klassisch macht aus JSX React.createElement-Aufrufe, deshalb muss React in jeder Datei mit JSX im Scope sein. Automatisch macht daraus jsx()- und jsxs()-Aufrufe und ergänzt den Import aus react/jsx-runtime selbst, du importierst React also nicht nur, um JSX zu schreiben. Automatisch braucht React 17 oder neuer. Die Voreinstellung hier ist „Klassisch“.
Wie bekomme ich aus JSX React.createElement-Aufrufe?
Lass die JSX-Runtime auf „Klassisch“ stehen, das ist die Voreinstellung. Jedes Element wird zu einem React.createElement-Aufruf: zuerst der Tag-Name, dann das Props-Objekt (null, wenn es keine Props gibt), dann die Kinder. Ein Fragment wird zu React.Fragment.
Warum nutzt meine Ausgabe React, importiert es aber nie?
Die klassische Ausgabe ruft React.createElement und React.Fragment auf und ergänzt keinen Import, weil sie davon ausgeht, dass React schon im Scope ist. Beginnt deine Datei ohne import React from 'react', füge diese Zeile hinzu oder stelle die JSX-Runtime auf „Automatisch“, die den nötigen Import selbst schreibt.
Warum stehen /*#__PURE__*/-Kommentare in der Ausgabe?
Babel setzt /*#__PURE__*/ vor jeden Element-Aufruf. Das sagt Minifiern und Bundlern, dass der Aufruf keine Seiteneffekte hat, ein nie verwendetes Element kann also aus dem fertigen Bundle fallen. Du kannst die Kommentare stehen lassen oder löschen, am Verhalten des Codes ändern sie nichts.
Kann der Converter TSX oder TypeScript?
Nein. Er erwartet JSX in einfachem JavaScript, eine Typannotation wie props: Props ist deshalb ein Syntaxfehler. Entferne zuerst die Typen oder kompiliere TypeScript mit dem TypeScript-Compiler. Flow-Syntax wird ebenfalls nicht unterstützt.
Wird mein Code hochgeladen oder ausgeführt?
Nein. Babel kompiliert den Code in deinem Browser, in einem Web Worker, und nichts wird an einen Server gesendet. Der Code wird auch nie ausgeführt, du kannst also eine Komponente mit Seiteneffekten gefahrlos einfügen. Heruntergeladen wird nur Babel selbst, einmal.
Empfohlen
-
Magnetisches Tischwhiteboard mit StiftenZeichne den Komponentenbaum auf und sieh, welcher createElement-Aufruf in welchem steckt.
-
KYY Tragbarer Monitor 15,6"Lass das Tutorial oder die Doku auf einem zweiten Bildschirm laufen, während du dein JSX mit der Ausgabe vergleichst.
-
Quntis Monitor-LichtleisteBeleuchtet deinen Schreibtisch statt des Bildschirms bei nächtlichen Debugging-Sessions.
Hilft, die Tools kostenlos zu halten. ✨
Symbolbilder. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.
