HTML zu JSX Konverter
HTML → JSX// JSX output appears here
Warum HTML zu JSX konvertieren?
Beim Migrieren vorhandener HTML-Vorlagen zu React oder beim Kopieren von Mockups in Komponenten müssen Sie manuell class zu className, for zu htmlFor konvertieren und Inline-Stile von Strings zu JavaScript-Objekten umwandeln. Unser Konverter automatisiert alle diese Transformationen sofort und verarbeitet das vollständige HTML→JSX-Attribut-Mapping, damit Sie sich auf die Komponentenlogik statt auf die Syntax-Konvertierung konzentrieren können.
Attribut-Konvertierung
Konvertiert class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength und viele mehr
Inline-Stil-Objekte
Transformiert style="color: red;" zu style={{color: 'red'}} — gültige JS-Objektnotation für React
Selbstschließende Tags
Fügt Schließ-Slash zu void-Elementen hinzu: <br> wird <br />, <input> wird <input />
HTML zu JSX konvertieren
HTML einfügen
HTML-Template, Figma-Export oder beliebigen HTML-Ausschnitt in das linke Feld einfügen
Automatische Konvertierung
Alle Attribute, Stile und void-Elemente werden sofort in JSX-Syntax transformiert
JSX kopieren
Konvertierten JSX kopieren und in den render/return-Block Ihrer React-Komponente einfügen
HTML-zu-JSX-Anwendungsfälle
Migration zu React
Vorhandene HTML-Seiten oder Templates ohne manuelle Attribut-Konvertierung zu React-Komponenten migrieren
Bootstrap zu React
Bootstrap HTML-Komponenten zu JSX für react-bootstrap oder styled-components konvertieren
E-Mail-Templates
HTML-E-Mail-Templates zu JSX für React Email oder ähnliche Bibliotheken konvertieren
CMS zu React
WordPress oder traditionelle CMS HTML-Templates in React-Komponentenstruktur konvertieren
HTML-zu-JSX-Tipps
✓ class → className ist unverzichtbar
class ist ein reserviertes JavaScript-Schlüsselwort. React erfordert className für CSS-Klassen. Das Vergessen führt zu React-Warnungen und kann unerwartetes Verhalten verursachen.
✓ for → htmlFor auf Labels
Das for-Attribut auf <label> wird in JSX zu htmlFor. Das Vergessen bricht die Barrierefreiheit — Screenreader verlassen sich auf die Label-Feld-Zuordnung.
✓ Event-Handler nach Konvertierung aktualisieren
HTML onclick='...' wird nicht direkt zu JSX konvertiert. Inline Event-Handler manuell durch das React-Pattern onClick={handler} ersetzen.
✓ HTML-Kommentare werden JSX-Kommentare
<!-- Kommentar --> wird in JSX zu {/* Kommentar */} konvertiert. JSX erlaubt keine HTML-Kommentar-Syntax innerhalb von JSX-Markup.
❓ Häufig gestellte Fragen
Warum verwendet React className statt class?
class ist ein reserviertes Schlüsselwort in JavaScript (für ES6-Klassen). Da JSX JavaScript ist, würde class einen Syntaxkonflikt erzeugen. React wählte className um Ambiguität mit dem JavaScript class-Schlüsselwort zu vermeiden.
Verarbeitet dieses Tool React-Event-Handler?
Nein — HTML-Event-Handler wie onclick und onsubmit werden nicht automatisch zu Reacts onClick und onSubmit konvertiert, da ihre Werte (JavaScript-Strings in HTML) React-Komponenten-Funktionen/State referenzieren müssen. Diese müssen manuell aktualisiert werden.
Was ist der Unterschied zwischen HTML und JSX?
JSX ist eine JavaScript-Syntaxerweiterung die HTML ähnelt, aber zu React.createElement()-Aufrufen kompiliert. Unterschiede: alle Attribute in camelCase, class ist className, for ist htmlFor, void-Elemente müssen sich selbst schließen, Ausdrücke {} statt Strings.
Warum müssen void-Elemente in JSX selbst schließen?
JSX wird von Babel als XML-ähnliche Syntax geparst, die alle Elemente korrekt geschlossen verlangt. Void-Elemente wie <br>, <img>, <input> haben keine Kinder, müssen also mit /> selbst schließen statt ein nicht-geschlossenes Tag zu lassen.