HTML-zu-JSX-Konverter
Füge HTML ein und erhalte sauberes React-JSX — class wird zu className, Attribute werden in camelCase geschrieben, style-Strings werden zu Objekten und Tags schließen sich selbst. Läuft vollständig in deinem Browser. Kostenlos.
Alles läuft in deinem Browser — dein Markup verlässt nie dein Gerät.
1
Über HTML-zu-JSX-Konverter
Der HTML-zu-JSX-Konverter wandelt einfaches HTML-Markup in Echtzeit in React-taugliches JSX um. Er schreibt class zu className und for zu htmlFor um, camelCased Kebab-Case- und SVG-Attribute, wandelt Inline-Style-Strings in JSX-Style-Objekte um und schließt Void-Elemente wie img und br selbst – genau die Bearbeitungen, die Sie sonst von Hand vornehmen müssten.
Fügen Sie ein Snippet, einen kompletten Seitenabschnitt oder aus einem Design-Tool exportiertes Markup ein, und der JSX-Bereich aktualisiert sich beim Tippen mit Syntax-Hervorhebung. Ein optionaler Wrapper verwandelt die Ausgabe in eine benannte Funktionskomponente, sodass das Ergebnis ohne weitere Bearbeitung direkt in ein React-Projekt fällt.
Der Konverter ist ein vollständig clientseitiges HTML-zu-JSX-Tool: Ihr Markup wird von JavaScript in Ihrem Browser transformiert und verlässt niemals Ihr Gerät, was es sicher für proprietäre Vorlagen und interne Seiten macht.
So verwenden Sie HTML-zu-JSX-Konverter
- Fügen Sie Ihr HTML in den linken Bereich ein, oder klicken Sie auf Beispiel, um ein Muster zu laden.
- Beobachten Sie, wie sich der JSX-Bereich sofort beim Tippen oder Bearbeiten aktualisiert.
- Schalten Sie „In Komponente einwickeln“ um und legen Sie einen Komponentennamen fest, wenn Sie eine fertige Funktionskomponente möchten.
- Klicken Sie auf Kopieren, um das JSX zu übernehmen, oder Herunterladen, um es als Component.jsx zu speichern.
- Nutzen Sie Löschen, um beide Bereiche zurückzusetzen und ein weiteres Snippet zu konvertieren.