Output will appear here...
Über die HTML-zu-JSX-Konvertierung
JSX ist die Syntaxerweiterung von React, die HTML ähnelt, aber wichtige Unterschiede aufweist. Dieses Tool automatisiert alle notwendigen Transformationen: class zu className, for zu htmlFor, Inline-Style-Strings zu JavaScript-Objekten und die korrekte Schließung aller Tags.
Key Features
- Convert class attributes to className
- Convert for attributes to htmlFor for labels
- Transform style strings to style objects
- Handle event handlers (onclick → onClick)
- Support data-* attributes (pass-through)
- 100% client-side — your code stays private
Häufig gestellte Fragen
Was ändert die HTML-zu-JSX-Konvertierung?
Hauptsächlich: class → className, for → htmlFor, Inline-Styles → Style-Objekte, selbstschließende Tags mit />, HTML-Kommentare → {/* */}.
Warum kann man class in JSX nicht verwenden?
In JSX ist 'class' ein reserviertes JavaScript-Schlüsselwort. React verwendet stattdessen 'className'.
Wie werden Inline-Styles konvertiert?
style="color: red; font-size: 16px" wird zu style={{color: "red", fontSize: "16px"}}.
Werden selbstschließende Tags unterstützt?
Ja. HTML-Void-Elemente wie <br>, <hr>, <img> werden zu <br />, <hr /> konvertiert.
Bewerten Sie dieses Tool
4.5 / 5 · 202 Bewertungen
Bleiben Sie informiert
Wöchentliche Dev-Tipps und neue Tools.
Kein Spam. Jederzeit abbestellbar.
Enjoy these free tools?
☕Buy Me a CoffeeAnleitung
- HTML-Markup in das Eingabefeld einfügen
- Konvertieren klicken, um in JSX umzuwandeln
- Konvertierte JSX-Ausgabe überprüfen
- Kopieren und in React-Komponente einfügen
Typische Anwendungsfälle
- Statische HTML-Templates in React-Komponenten migrieren
- HTML aus Design-Tools (Figma, Webflow) in JSX konvertieren
- HTML-E-Mail-Templates nach React Email portieren
- Unterschiede zwischen HTML- und JSX-Syntax lernen