HTML in JSX umwandeln
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 in JSX umwandeln
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 in JSX umwandeln
- 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.