Skip to main content

HTML-zu-JSX-Konverter

HTML in JSX umwandeln mit automatischer Attribut-Konvertierung.

Geprüft von · Zuletzt geprüft

So verwendest du den HTML-zu-JSX-Konverter

  1. HTML einfügen in den Eingabebereich. Marketing-Seiten-Hero-Bereiche, CodePen-Snippets, HTML-E-Mail-Templates oder die Ausgabe eines Figma-zu-HTML-Exporteurs funktionieren alle.
  2. JSX lesen im Ausgabebereich - er aktualisiert sich beim Tippen. Jedes Attribut, das React umbenennt (class, for, Event-Handler, Boolean-Attribute) wurde bereits umgeschrieben.
  3. JSX kopieren und direkt in eine React-Komponente einfügen. Die Ausgabe ist ein gültiger Rückgabewert für eine Funktionskomponente oder ein JSX-Ausdruck in einer Variablen.
  4. Ergebnis einschließen in ein einzelnes Wurzelelement oder ein <>...</>-Fragment, wenn deine Quelle mehrere Geschwister hat. React erfordert genau ein Wurzelelement pro Komponenten-Rückgabe.

Was transformiert wird

Der Konverter verarbeitet jeden Unterschied zwischen HTML5-Syntax und dem JSX-Dialekt, den React parst. Attribut-Umbenennungen umfassen class zu className, for zu htmlFor, tabindex zu tabIndex, readonly zu readOnly, maxlength zu maxLength, colspan zu colSpan und alle in den React-Dokumenten definierten SVG-Attribut-Umbenennungen (über 150). Jeder Inline-Event-Handler wird camelCase: onclick wird onClick, onmouseenter wird onMouseEnter, oninput wird onInput.

Style-Strings werden in Style-Objekte umgewandelt. style="background-color: red; font-size: 14px" wird zu style={{ backgroundColor: "red", fontSize: "14px" }} - CSS-Eigenschaftsnamen werden camelCase und numerische Pixel-Werte können optional in Zahlen umgewandelt werden. Void-Elemente (<br>, <img>, <input>, <hr>, <meta>, <link>) erhalten den schließenden Schrägstrich, den JSX erfordert. HTML-Kommentare <!-- Kommentar --> werden zu JSX-Kommentaren {/* Kommentar */} konvertiert, damit sie im Quellcode der Komponente erhalten bleiben. Boolean-Attribute wie disabled und checked behalten den Attributnamen und erhalten ={true} nur, wenn sie ursprünglich keinen Wert hatten.

Warum und wann

  • Übertragung eines statischen HTML-Mocks oder Tailwind-UI-Snippets in eine React-Komponente ohne manuelle Umbenennung von 30 Attributen.
  • Konvertierung einer Design-System-Referenz (Bootstrap, Material, Tailwind UI) in ein React-natives JSX-Template.
  • Übernahme eines Prototyps aus einem CodePen, wo HTML der Standard ist, in ein Vite + React-Setup.
  • Migration eines Legacy-Rails- oder Django-Template-Fragments in eine React Server Component.
  • Erstellung des Inhalts einer wiederverwendbaren React-Komponente aus einem in HTML handcodierten E-Mail-Template.
  • Veranschaulichung der Unterschiede zwischen HTML und JSX durch Einfügen einer vollständigen Seite und Beobachten jeder Transformation.

Stolperfallen, die du kennen solltest

  • Mehrere Wurzelelemente. JSX erfordert eine einzelne Wurzel. Wenn du ein Snippet mit Geschwistern auf oberster Ebene einfügst, musst du sie in ein Fragment einschließen. Der Konverter belässt sie getrennt; schließe sie ein, bevor du sie verwendest.
  • JavaScript-reservierte Wörter. HTML-class wird JSX-className; for bei Labels wird htmlFor. Jedes Attribut, das du nach der Konvertierung manuell hinzufügst, muss denselben Regeln folgen.
  • Boolean-Attribute. HTML-<input disabled> steht für disabled="", was React als leeren String (trotzdem truthy) interpretieren würde. Der Konverter gibt disabled={true} aus, um explizit zu sein, was auch der TypeScript-Typisierung für Booleans entspricht.
  • Kommentare innerhalb von <head>. JSX-Fragmente rendern keine HTML-Kommentare im DOM - sie sind JavaScript-Kommentare, die zur Kompilierzeit entfernt werden. Wenn du einen echten HTML-Kommentar zur Laufzeit benötigst, rendere ihn über eine Raw-HTML-Escape-Hatch oder belasse ihn serverseitig.
  • Inline-Event-Handler-Code. HTML-Event-Handler verwenden String-Inhalte: onclick="alert(1)". Der Konverter schreibt den Attributnamen um, behält aber den Inhalt als String, den React nicht ausführen wird. Schreibe den Inhalt in einen echten Funktionsverweis um.

Warum JSX sich von HTML unterscheidet

JSX ist eine Syntaxerweiterung zu ECMAScript, die von Facebook für React definiert wurde. Die Spezifikation ist bewusst JavaScript-zentriert: Attributnamen, die mit JavaScript-reservierten Wörtern kollidieren (class, for), müssen umbenannt werden, und Attributwerte, die JavaScript-Ausdrücke sind, kommen in geschweifte Klammern statt in String-Anführungszeichen. Void-Elemente müssen selbstschließend sein, weil JSX als Baum geparst wird, nicht durch HTMLs nachsichtigen Parser. Die Style-Objekt-Form existiert, weil React eine Möglichkeit benötigt, Per-Schlüssel-Updates zu übergeben statt Style-Strings zeichenweise zu vergleichen. All diese Unterschiede wurzeln darin, dass JSX zu React.createElement()-Aufrufen kompiliert wird und Attributnamen auf Objekt-Eigenschaftsnamen abgebildet werden.

Alternativen

In VS Code führt die Erweiterung "HTML to JSX" von Riazxrazor dieselben Transformationen durch. In der IDE eingebettete Konverter sind praktisch, weil sie auf Auswahlen statt auf eine ganze Einfügung angewendet werden. Für Massenkonvertierungen einer großen Template-Bibliothek können html-react-parser oder html-to-jsx auf npm den Prozess in einem Build-Skript automatisieren. React DevTools bietet auch ein "Als JSX kopieren"-Kontextmenü bei inspizierten DOM-Knoten, was der schnellste Weg ist, um eine bestehende Komponente zu entnehmen. Dieses In-Browser-Tool eignet sich am besten für einmalige Snippets und für Lernende, die die Transformationen explizit sehen möchten statt einem Build-Schritt zu vertrauen.

Häufig gestellte Fragen

Gibt der Konverter React- oder Preact-kompatibles JSX aus?

Beides. Der JSX-Dialekt ist eine Syntaxerweiterung, kein bibliotheksspezifisches Format - jede Bibliothek, die JSX über Babel oder esbuild kompiliert (React, Preact, Inferno, Hyperapp), akzeptiert dieselbe Ausgabe. Eine Handvoll Attribute unterscheidet sich (<code>className</code> in React bleibt in Preact <code>class</code>, obwohl Preact beides akzeptiert), aber dieser Konverter verwendet die React-Schreibweise für maximale Kompatibilität. Preact-Alias-Pakete erlauben es außerdem, React-Namen unverändert zu nutzen.

Werden Inline-Styles in Style-Objekte umgewandelt?

Ja. Ein <code>style</code>-Attribut-String wird in Schlüssel-Wert-Paare zerlegt und als JavaScript-Objekt mit camelCase-Schlüsseln ausgegeben. <code>background-color</code> wird zu <code>backgroundColor</code>, Vendor-Prefixes wie <code>-webkit-transform</code> werden zu <code>WebkitTransform</code> (der Großbuchstabe ist bei Vendor-Prefixes in React beabsichtigt). Werte bleiben Strings, was dem Format entspricht, das React erwartet; numerische einheitenlose Werte wie <code>lineHeight: 1.5</code> funktionieren auch als Zahlen, aber der Konverter behält sie als Strings bei.

Wird mein HTML je an einen Server gesendet?

Nein. Der Konverter ist eine Preact-Komponente im Seiten-Bundle, die vollständig auf deinem Haupt-Thread läuft. Klicken auf "Konvertieren" ruft lokales JavaScript auf; kein fetch oder WebSocket wird ausgelöst. Du kannst die DevTools-Netzwerkregisterkarte beobachten, um das zu bestätigen. Das ist wichtig bei HTML aus internen Dashboards oder kundenseitigen Templates, die du keiner dritten Partei zeigen möchtest.

Was passiert mit benutzerdefinierten data-Attributen?

Sie werden unverändert durchgereicht. React bewahrt <code>data-*</code>- und <code>aria-*</code>-Attribute wörtlich, da sie in der spezifikationserlaubten Liste bindesstrichgetrennter Attributnamen stehen, die in HTML und JSX gültig sind. Benutzerdefinierte Attribute ohne Prefix (wie <code>custom-thing</code>) werden ebenfalls durchgereicht, erzeugen jedoch eine DOM-Warnung in React, wenn das Zielelement kein Custom Element ist.

Werden SVG-Attribute verarbeitet?

Ja. SVG in React hat eine eigene Liste von Umbenennungen - am häufigsten <code>stroke-width</code> zu <code>strokeWidth</code>, <code>fill-opacity</code> zu <code>fillOpacity</code>, <code>clip-path</code> zu <code>clipPath</code> und <code>xlink:href</code> zu <code>xlinkHref</code> (obwohl React 19 auch <code>href</code> direkt für SVG akzeptiert). Der Konverter wendet alle davon an. Das Einfügen eines vollständigen <code>&lt;svg&gt;</code>- Elements liefert JSX, das identisch zur Quelle gerendert wird.

Was ist mit Formularelementen wie <code>&lt;select&gt;</code>?

Kontrollierte Formularelemente benötigen besondere Behandlung in React. Dieser Konverter wandelt die Attributnamen (<code>value</code>, <code>defaultValue</code>, <code>checked</code>, <code>defaultChecked</code>) korrekt um, aber du musst <code>onChange</code>-Handler trotzdem selbst verdrahten. HTML-<code>&lt;option selected&gt;</code> wird zu JSX <code>&lt;option selected={true}&gt;</code>, worüber React warnt, weil du stattdessen <code>defaultValue</code> des übergeordneten <code>&lt;select&gt;</code> verwenden solltest.

Wie werden selbstschließende Tags behandelt?

Void-Elemente (<code>br</code>, <code>hr</code>, <code>img</code>, <code>input</code>, <code>meta</code>, <code>link</code>, <code>source</code>, <code>track</code>, <code>wbr</code> und einige weitere) erhalten in der JSX-Ausgabe einen schließenden Schrägstrich. HTML erlaubt bloßes <code>&lt;br&gt;</code>, aber JSX erfordert <code>&lt;br /&gt;</code>, da der Parser eine explizite Tag-Schließung braucht. Nicht-Void-Elemente mit leerem Inhalt werden ebenfalls auf selbstschließende Form zusammengefasst.

Funktioniert das auch für Vue- oder Svelte-Templates?

Nein. Vue und Svelte haben eigene Template-Dialekte mit eigenen Direktiven (<code>v-if</code>, <code>:class</code>, <code>{#if}</code>). Dieses Tool zielt nur auf die React/JSX-Teilmenge der Unterschiede zu HTML ab. Für Vue funktionieren <code>class</code> und <code>style</code> größtenteils wie gehabt, da Vue die HTML-Schreibweisen beibehält; für Svelte gilt dasselbe. Verwende Framework-spezifische Konverter für diese Ziele.

Benennt der Konverter <code>onclick="doSomething()"</code> korrekt um?

Er benennt das Attribut um (zu <code>onClick</code>), aber der Wert bleibt ein String. React erwartet einen Funktionsverweis als Wert, keinen String, daher würde <code>onClick="doSomething()"</code> nicht ausgeführt. Nach der Konvertierung schreibe den Inhalt zu <code>{handleClick}</code> um, das auf eine Funktion im Scope verweist. Der Konverter kann das nicht automatisch tun, weil der String-Inhalt beliebiges JavaScript ist, das Bezeichner referenzieren kann, die die Komponente nicht hat.

Was passiert, wenn mein HTML script- oder style-Tags enthält?

Sie werden als JSX durchgereicht, verhalten sich aber wahrscheinlich nicht wie gewünscht. React rendert <code>&lt;script&gt;</code> als inertes DOM-Element - der Code wird nicht ausgeführt. <code>&lt;style&gt;</code> wird als echtes Stylesheet gerendert, aber das CSS darin ist nicht scope-begrenzt. Für Anwendungsstile verwende eine CSS-Datei oder eine CSS-in-JS-Bibliothek. Für Skripte lade sie über <code>useEffect</code> mit einem dynamischen <code>&lt;script&gt;</code>-Element oder einer Bibliothek wie <code>react-helmet</code>.

Verwandte Tools

Mehr Developer Tools

AI Token Counter

Count tokens for GPT-4o, Claude, and Gemini models instantly.

Open tool

Base64 Encoder & Decoder

Encode UTF-8 text to Base64 online or decode Base64 back to UTF-8 and plain text. Runs in your browser with no upload.

Open tool

Bulk URL Encode / Decode

Encode or decode many URLs at once. Paste a newline-separated list and the tool processes each line in parallel, preserving order and blank lines.

Open tool

chmod Calculator

Calculate and convert Unix file permission modes between octal and symbolic.

Open tool

Code Screenshot

Create beautiful code snippet images with customizable themes.

Open tool

Color Converter

Convert colors between HEX, RGB, HSL and CMYK formats.

Open tool
ZeroUtil unterstützen