HTML zu JSX Konverter

Konvertieren Sie HTML online in React-JSX. Wandelt class in className, Style-Strings in Objekte, selbstschließende Tags und mehr um. Kostenlos und sofort.

HTML

JSX

Ü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.

𝕏 Twitter in LinkedIn

Bewerten Sie dieses Tool

4.5 / 5 · 202 Bewertungen

Weitere Werkzeuge

SVGSVG zu JSX/React JSJS/HTML Formatierer &;HTML-Entity-Kodierer HMHTML to Markdown

Bleiben Sie informiert

Wöchentliche Dev-Tipps und neue Tools.

Kein Spam. Jederzeit abbestellbar.

Enjoy these free tools?

☕Buy Me a Coffee

Anleitung

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

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.