Kostenloser HTML-zu-JSX/React-Konverter

Funktionsweise

1. HTML einfügen: Geben Sie ein beliebiges Standard-HTML-Snippet (divs, Formulare, Tabellen oder ganze Blöcke) in den Eingabebereich ein.
2. Optionen wählen: Schalten Sie React-Fragment-Wrapping und Pretty-Print-Formatierung nach Bedarf um.
3. JSX sofort erhalten: Der Konverter transformiert automatisch class → className, for → htmlFor, Inline-style-Strings → style-Objekte und selbstschließende Tags.
4. In Ihr Projekt kopieren: Kopieren Sie das Ausgabe-JSX direkt in Ihre React-Komponenten.

Warum HTML zu JSX nutzen?

Bei der Migration von HTML-Vorlagen zu React ist die manuelle Konvertierung fehleranfällig. Ein einzelnes vergessenes className oder ein nicht geschlossener Tag kann den Build kaputtmachen. Dieser Konverter behandelt jede erforderliche Änderung automatisch, einschließlich der Konvertierung von CSS-Eigenschaftsnamen wie background-color in CamelCase backgroundColor in style-Attributen, der Umwandlung von Event-Handler-Strings in Funktionsreferenzen und dem korrekten Selbst-Schließen von Void-Elementen. Es beschleunigt Prototyping, Code-Migration und hilft Entwicklern, die mit den JSX-Syntax-Unterschieden nicht vertraut sind.

Wichtige Konvertierungen

• class → className: in React-Komponenten erforderlich
• for → htmlFor: für label-Elemente
• style-Strings → Objekte: z. B. "color:red" → {color:'red'}
• Selbstschließende Tags: <br> → <br />
• Fragment-Wrapping: optionales äußeres <>...

Was JSX eigentlich ist

JSX steht für „JavaScript XML“. Es ist eine syntaktische Erweiterung von JavaScript, erfunden von Jordan Walke bei Facebook im Jahr 2013 als Teil der ursprünglichen React-Ankündigung auf der JSConf US. JSX ermöglicht es, XML-ähnliches Markup direkt in JavaScript-Code zu schreiben, <div className="hello">World</div>: und ein Transpiler (heute fast immer Babel) kompiliert es zu einfachen Funktionsaufrufen: React.createElement('div', {className: 'hello'}, 'World'). Der Browser sieht JSX nie direkt; ausgeliefert wird reguläres JavaScript.

Walkes ursprüngliche Motivation war, dass Template-Sprachen (Mustache, Handlebars, Angulars alte Direktiven) Bürger zweiter Klasse der Wirtssprache waren, sie konnten JavaScripts Schleifen, Bedingungen oder Variablen nicht nativ nutzen, sodass jede ihre eigenen neu erfand. JSX kehrte das Verhältnis um: statt Templates, die gelegentlich JavaScript ausführen, gab es Ihnen JavaScript, das gelegentlich Markup erzeugt. Dass {condition && <Item />} ein normaler JS-Ausdruck ist, der ein React-Element zurückgibt, ist die tragende Idee.

Seit React 17 (Oktober 2020) bedeutet die automatische JSX-Laufzeitumgebung, dass Sie nicht mehr in jeder Datei, die JSX nutzt, import React from 'react' schreiben müssen, Babel fügt die Laufzeit-Importe automatisch ein. JSX wurde auch weit über React selbst hinaus übernommen: Preact, Solid, Qwik, Hono JSX, Million, Lit und TypeScripts .tsx verarbeiten alle dieselbe Syntax. Die JSX-Entwurfsspezifikation unter facebook.github.io/jsx ist bewusst Framework-unabhängig.

Die vollständige Liste der HTML→JSX-Unterschiede

• Umbenennungen reservierter Wörter. class → className (weil class in JS reserviert ist). for → htmlFor (aus demselben Grund, for ist das Schleifen-Schlüsselwort). Das sind die beiden, an denen sich zuerst jeder die Finger verbrennt.
• Alle anderen Attribute werden in camelCase geschrieben. tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, contenteditable → contentEditable.
• Zwei wichtige Ausnahmen bleiben in kebab-case. aria-*-Attribute (aria-label, aria-hidden) und data-*-Attribute (data-testid) behalten ihre HTML-Form. Dasselbe gilt für xmlns.
• Selbstschließende Tags sind Pflicht für void-Elemente: <br> wird zu <br />, <img> wird zu <img />, <input> wird zu <input />. JSX ist XML-streng, wo HTML nachsichtig ist.
• Inline-Styles nehmen ein Objekt, keinen String. style="color: red; background-color: blue" wird zu style={{ color: 'red', backgroundColor: 'blue' }}. Beachten Sie drei Dinge: doppelte geschweifte Klammern (eine für den JSX-Ausdruck, eine für das Objektliteral), Eigenschaftsnamen in camelCase, String-Werte in Anführungszeichen. Numerische Pixelwerte lassen die Einheit weg: marginTop: 16, nicht '16px'.
• Event-Handler werden in camelCase geschrieben und nehmen Funktionsreferenzen. onclick="handleClick()" wird zu onClick={handleClick}: beachten Sie die fehlenden Klammern. onClick={handleClick()} würde handleClick zur Renderzeit aufrufen und seinen Rückgabewert als Handler zuweisen, was fast immer ein Fehler ist.
• Kommentare verwenden {/* … */} innerhalb von JSX, nicht <!-- … -->. Die HTML-Kommentarsyntax hat innerhalb von JSX keine Bedeutung.
• Fragmente umschließen mehrere Geschwister. Eine Komponente muss eine einzige Wurzel zurückgeben, daher müssen mehrere Top-Level-Elemente mit <>…</> (oder dem längeren <React.Fragment>…</React.Fragment>) umschlossen werden.
• Bedingtes Rendern verwendet JS-Ausdrücke. {isVisible && <Item />} rendert das Element nur, wenn die Bedingung truthy ist; {condition ? <A /> : <B />} wählt eines von zweien.
• Geschweifte Klammern im Text müssen maskiert werden. Die wörtliche { innerhalb von JSX-Textinhalt wird als Beginn eines Ausdrucks interpretiert. Verwenden Sie {'{'} oder ein entsprechendes HTML-Entity.

SVG, Barrierefreiheit und der Rest

SVG funktioniert innerhalb von JSX mit derselben camelCase-Regel für die meisten Attribute, viewBox, strokeWidth, fillOpacity. Die bemerkenswerten Ausnahmen: xlink:href verwendet die spezielle Schreibweise xlinkHref (inzwischen zugunsten des einfachen href veraltet), und xmlns bleibt unverändert. Barrierefreiheits-Attribute folgen ausnahmsweise ARIAs eigener kebab-case-Konvention: aria-label, aria-describedby, role bleiben alle wie geschrieben.

Für CSS ist das Inline-style-Objekt von JSX eine Option. Die meisten Produktiv-Codebasen verwenden eine von drei reichhaltigeren Alternativen: CSS Modules (pro Datei lokal begrenzte Klassennamen, vom Bundler kompiliert), Tailwind CSS (Utility-Klassen, die über className sauber durchgereicht werden) oder CSS-in-JS-Bibliotheken wie styled-components, Emotion oder Vanilla Extract. Tailwind ist seit 2022 die häufigste Wahl in neuen Projekten; Tailwind-Klassen benötigen beim Wechsel von HTML zu JSX überhaupt keine Konvertierung, sie werden als gewöhnliche className-Strings durchgereicht.

Häufige Konvertierungsfallen

• Inline-Event-Handler, die die Funktion aufrufen. onclick="alert(1)" in HTML wird in JSX üblicherweise zu onClick={() => alert(1)}, eingehüllt in eine Pfeilfunktion, damit der Alert beim Klick auslöst, nicht beim Rendern. Ein naiver Konverter, der onClick={alert(1)} erzeugt, lässt den Alert zur Renderzeit erscheinen statt beim Klick des Nutzers. Dieser Konverter behandelt die häufigen Fälle, aber es lohnt sich, die Ausgabe in Augenschein zu nehmen.
• HTML-Kommentare werden verworfen. Die meisten JSX-Konverter entfernen HTML-Kommentare, anstatt sie in die {/* */}-Form zu übersetzen, weil Letztere nur an bestimmten Positionen innerhalb von JSX funktioniert. Fügen Sie Kommentare manuell dort wieder ein, wo Sie sie haben möchten.
• Umbenennungen von SVG-Attributen werden von automatisierten Konvertern nicht immer behandelt. stroke-width, fill-rule, clip-path, text-anchor benötigen alle camelCase-Formen, prüfen Sie die Ausgabe sorgfältig, wenn Sie SVG aus einem Icon-Set wie Heroicons oder Lucide einfügen.
• Boolesche Attribute. <input disabled> in HTML wird in JSX zu <input disabled />. <input disabled="false"> in HTML ist tatsächlich deaktiviert (jeder Wert aktiviert es), aber in JSX ist disabled={false} korrekt aus, die JSX-Semantik ist sinnvoller als die von HTML.
• HTML-Entities. © funktioniert in JSX-Textinhalt, aber die Verwendung des wörtlichen Unicode-Zeichens (©) wird bevorzugt.   funktioniert genauso.
• Der Fall tabindex. Sollte tabIndex sein. Leicht zu vergessen, weil der Wert oft 0 oder -1 ist und numerisch aussieht, aber der Attributname benötigt trotzdem camelCase.

Wann Sie dazu greifen

• Serverseitig gerenderte Templates zu React migrieren. Einen Teil des HTML einer bestehenden Website einzufügen und JSX herauszubekommen, ist der kanonische Anwendungsfall.
• Symbole, Badges oder Exporte aus Designwerkzeugen einbinden. Heroicons, Lucide, Figmas „Copy as SVG“ liefern Ihnen alle rohes HTML/SVG, das den Umbenennungs-Durchlauf benötigt.
• Tailwind-UI-/Flowbite-/DaisyUI-Snippets konvertieren aus ihren HTML-Beispielen zu JSX für ein React-Projekt. Die Tailwind-Klassen werden unverändert durchgereicht; nur die strukturellen Attribute müssen konvertiert werden.
• Entwickler einarbeiten, die HTML kennen, aber kein JSX: die mechanischen Regeln automatisch angewendet zu sehen, ist schneller, als eine Liste von Unterschieden zu lesen.
• Schnelles Prototyping, wenn Sie Markup zum Skizzieren in einfachem HTML entworfen haben und es in einer React-Komponente haben möchten.

Die Ausgabe funktioniert für jeden JSX-Konsumenten, React, Preact, Solid, Qwik, Hono JSX, Million, Lits html-Template-Literal (mit kleineren Anpassungen). Sie funktioniert nicht für React Native, das native primitive Komponenten wie <View> und <Text> statt HTML-Elementen verwendet.

Weitere Fragen

Was ist der Unterschied zwischen JSX und HTML?

HTML ist eine Auszeichnungssprache, die der Browser direkt parst. JSX ist eine JavaScript-Ausdruckssyntax, die zu React.createElement-Aufrufen kompiliert wird, sie erreicht den Browser nie als JSX. JSX wirkt XML-streng (jedes Tag muss schließen, Attribute verwenden camelCase), weil es als JavaScript-Ausdrücke geparst wird, nicht als nachsichtiges HTML. Die optische Ähnlichkeit ist beabsichtigt, aber die zugrunde liegende Semantik ist recht unterschiedlich.

Muss ich React noch in jeder JSX-Datei importieren?

Nicht mehr seit React 17 (Oktober 2020), das die automatische JSX-Laufzeitumgebung einführte. Damit fügt Babel die nötigen Laufzeit-Importe für Sie ein, sodass Dateien, die nur JSX verwenden, kein import React from 'react' am Dateianfang benötigen. Die klassische Laufzeitumgebung ist für ältere Toolchains weiterhin verfügbar. Die meisten neuen Projekte verwenden die automatische Laufzeitumgebung.

Kann ich JSX ohne React verwenden?

Ja. JSX ist eine generische Syntax mit einer Entwurfsspezifikation unter facebook.github.io/jsx, und viele Frameworks verarbeiten sie: Preact, Solid, Qwik, Hono JSX, Million, Lit und die Tagged-Template-Variante htm. Die Frameworks unterscheiden sich darin, wozu JSX kompiliert wird (Preact verwendet h(…), Solid kompiliert zu feingranularen reaktiven Primitiven usw.), aber die Syntax ist gemeinsam.

Warum nimmt style ein Objekt statt eines Strings?

Weil die JSX-Ausdruckssyntax bereits geschweifte Klammern zum Einbetten von JavaScript-Werten bereitstellt und ein Objektliteral die natürlichste JS-Darstellung eines Eigenschaftenbündels ist. Das style-Objekt erlaubt außerdem Zahlen (die meisten erhalten automatisch px) und JS-Ausdrücke, was ein String nicht kann. Der Kompromiss ist die etwas umständliche Doppelklammer-Syntax style={{ … }}, äußere Klammern für „dies ist ein JSX-Ausdruck“, innere Klammern für das Objektliteral.

Werden Daten an einen Server gesendet?

Nein. Die Konvertierungslogik ist reines JavaScript, das Ihren HTML-String durchläuft und Attribute umschreibt, alles in Ihrem Browser. Das HTML, das Sie einfügen, verlässt niemals die Seite, nützlich beim Migrieren proprietärer interner Templates oder von Komponenten-Markup mit fest eingebauten API-Endpunkten.