Welche HTML-Attribute werden zu JSX umbenannt?

class wird zu className und for wird zu htmlFor. Viele reine Kleinbuchstaben-Attribute werden camelCased — tabindex zu tabIndex, colspan zu colSpan, maxlength zu maxLength, readonly zu readOnly —, während data-*- und aria-*-Attribute genau so bleiben, wie sie geschrieben sind.

Wie wandelt es ein Inline-style-Attribut um?

Ein style="color: red; font-size: 12px"-String wird in ein React-style-Objekt geparst, style={{ color: 'red', fontSize: '12px' }}, wobei jede CSS-Eigenschaft camelCased wird. CSS-Custom-Properties wie --brand und Vendor-Präfixe bleiben erhalten.

Schließt es void-Elemente wie und selbst?

Ja. HTML-void-Elemente — br, img, input, hr, meta, link, source und der Rest — werden selbstschließend ausgegeben ( , ), sodass das JSX gültig ist. Leere Nicht-void-Elemente werden ebenfalls selbstgeschlossen.

Was passiert mit HTML-Kommentaren bei der Umwandlung?

HTML-Kommentare werden in JSX-Kommentarsyntax umgeschrieben. Enthält der Kommentartext eine Stern-Schrägstrich-Folge, wird sie aufgebrochen, sodass sie den JSX-Kommentar nicht vorzeitig schließen und deinen Build brechen kann.

Kann es die Ausgabe in eine React-Komponente wrappen?

Aktiviere „In Komponente wrappen“ und gib ihr einen Namen. Das Tool gibt eine exportierte Funktion aus, die dein JSX zurückgibt, und wickelt mehrere Top-Level-Elemente in ein Fragment, sodass es ein einziges Wurzelelement gibt.

Wandelt es onclick und andere Inline-Event-Handler um?

Inline-Event-Attribute werden camelCased — onclick zu onClick, onchange zu onChange —, aber der Wert bleibt ein String. Du musst den String in deiner Komponente noch gegen eine echte Handler-Funktion tauschen.

HTML to JSX Converter

Wandle HTML in gültiges React-JSX in deinem Browser um — class wird zu className, void-Tags schließen sich selbst, und Inline-Styles werden zu style-Objekten. Dein Markup bleibt auf deinem Gerät.

Der HTML to JSX Converter läuft vollständig in deinem Browser. Das Markup, das du einfügst, wird auf deinem Gerät geparst und transformiert und niemals zu ArrayKit hochgeladen.

Öffne den HTML-Formatierer

Über HTML zu JSX

Der HTML to JSX Converter verwandelt einen Block HTML in JSX, das du direkt in eine React-Komponente fallen lassen kannst. Er benennt die Attribute um, auf denen React besteht — class wird zu className und for wird zu htmlFor —, camelCased den Rest (tabindex → tabIndex, colspan → colSpan) und schließt void-Elemente wie br, img und input selbst, damit das Markup gültig ist. Inline-style="color:red"-Strings werden in style={{ color: 'red' }}-Objekte mit camelCased-Eigenschaften geparst, und HTML-Kommentare werden zu JSX-Kommentaren. Aktiviere die Komponenten-Option, um alles in eine exportierte Funktion zu wrappen. Gebaut für Entwickler, die ein Design, eine E-Mail-Vorlage oder eine statische Seite nach React portieren. Jede Umwandlung läuft in deinem Browser — das Markup, das du einfügst, verlässt niemals dein Gerät.

Funktionen

Benennt class automatisch zu className und for zu htmlFor um
Schließt void-Elemente wie br, img, input und hr selbst
Wandelt Inline-style-Strings in camelCased-style-Objekte um
camelCased bekannte Attribute: tabindex zu tabIndex, colspan zu colSpan
Schreibt HTML-Kommentare in JSX-Kommentarsyntax um
Hält data-*- und aria-*-Attribute und boolesche Props intakt
Wickelt das Ergebnis optional in eine exportierte React-Funktionskomponente
Kopiere das JSX oder lade es als .jsx-Datei herunter, alles in deinem Browser

So verwendest du HTML zu JSX

Füge dein HTML in das Eingabefeld links ein
Lies das umgewandelte JSX im Ausgabefeld rechts
Aktiviere „In Komponente wrappen“ und benenne sie für eine einsatzbereite Komponente
Kopiere das JSX oder lade es als .jsx-Datei herunter

Beispiel

Eingabe

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

Ausgabe

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for wird zu htmlFor, class wird zu className, tabindex wird zu tabIndex, und das void-<input> schließt sich selbst.

Häufige Fehler & Fehlerbehebung

React warnt, dass „class“ eine ungültige DOM-Eigenschaft oder ein ungültiges Attribut ist. — Lass das HTML durch den Converter laufen — er benennt jedes class zu className (und for zu htmlFor) um, sodass die Warnung verschwindet.
JSX kompiliert nicht und meldet „Expected corresponding closing tag“ bei <img> oder <br>. — Void-Elemente müssen in JSX selbstschließend sein. Der Converter gibt <img … /> und <br /> aus, sodass die Tags sauber parsen.
Das style-Attribut wirft den Fehler „style prop expects a mapping, not a string“. — React-Styles sind Objekte, keine Strings. Füge das HTML ein, und das Tool verwandelt style="color:red" in style={{ color: 'red' }}.
Eine wörtliche geschweifte Klammer oder ein rohes < im Text bricht das JSX. — Der Converter escaped { } und < > innerhalb von Textknoten (als { und <), sodass diese Zeichen als Text gerendert werden, statt als JSX gelesen zu werden.

Häufig gestellte Fragen

Welche HTML-Attribute werden zu JSX umbenannt?: class wird zu className und for wird zu htmlFor. Viele reine Kleinbuchstaben-Attribute werden camelCased — tabindex zu tabIndex, colspan zu colSpan, maxlength zu maxLength, readonly zu readOnly —, während data-*- und aria-*-Attribute genau so bleiben, wie sie geschrieben sind.
Wie wandelt es ein Inline-style-Attribut um?: Ein style="color: red; font-size: 12px"-String wird in ein React-style-Objekt geparst, style={{ color: 'red', fontSize: '12px' }}, wobei jede CSS-Eigenschaft camelCased wird. CSS-Custom-Properties wie --brand und Vendor-Präfixe bleiben erhalten.
Schließt es void-Elemente wie <br> und <img> selbst?: Ja. HTML-void-Elemente — br, img, input, hr, meta, link, source und der Rest — werden selbstschließend ausgegeben (<br />, <img … />), sodass das JSX gültig ist. Leere Nicht-void-Elemente werden ebenfalls selbstgeschlossen.
Was passiert mit HTML-Kommentaren bei der Umwandlung?: HTML-Kommentare werden in JSX-Kommentarsyntax umgeschrieben. Enthält der Kommentartext eine Stern-Schrägstrich-Folge, wird sie aufgebrochen, sodass sie den JSX-Kommentar nicht vorzeitig schließen und deinen Build brechen kann.
Kann es die Ausgabe in eine React-Komponente wrappen?: Aktiviere „In Komponente wrappen“ und gib ihr einen Namen. Das Tool gibt eine exportierte Funktion aus, die dein JSX zurückgibt, und wickelt mehrere Top-Level-Elemente in ein Fragment, sodass es ein einziges Wurzelelement gibt.
Wandelt es onclick und andere Inline-Event-Handler um?: Inline-Event-Attribute werden camelCased — onclick zu onClick, onchange zu onChange —, aber der Wert bleibt ein String. Du musst den String in deiner Komponente noch gegen eine echte Handler-Funktion tauschen.