HTML-zu-JSX-Konverter
Kostenloser HTML-zu-JSX-Konverter online. HTML einfügen und sofort sauberes React-JSX erhalten: className, htmlFor, camelCase-Styles, selbstschließende Tags und sichere Kommentare – direkt im Browser.
Was macht der HTML-zu-JSX-Konverter?
Er wandelt gewöhnliches HTML-Markup in JSX um, das React rendern kann. HTML in das Eingabefeld einfügen, und das passende JSX erscheint im Ausgabefeld – beim Tippen mit leichtem Debounce live aktualisiert.
Welche Attribute werden umbenannt?
class wird zu className, for zu htmlFor, tabindex zu tabIndex, und weitere Bindestrich-Attribute wie maxlength, colspan oder stroke-width erhalten ihre camelCase-Namen von React. data-* und aria-* bleiben unverändert.
Wie wird das style-Attribut umgewandelt?
Ein CSS-String wie style="background-color: red; font-size: 12px" wird zu einem JavaScript-Objekt: style={{backgroundColor:'red', fontSize:'12px'}}, wobei jede CSS-Eigenschaft camelCase geschrieben und der Wert in Anführungszeichen gesetzt wird.
Wie werden Void-Elemente behandelt?
Elemente ohne Kinder — img, br, input, hr, meta, link und weitere — werden zu selbstschließender Syntax normalisiert: <img> wird zu <img />, genau wie JSX es verlangt. Leere divs und spans werden genauso geschlossen.
Was passiert mit HTML-Kommentaren?
Sie werden zu JSX-Kommentaren: <!-- Notiz --> wird zu {/* Notiz */}. Sequenzen, die den Kommentar vorzeitig beenden würden, werden neutralisiert, damit der erzeugte Code immer kompiliert.
Wie werden Entities und Sonderzeichen behandelt?
Entities wie & oder © werden zu echten Zeichen dekodiert, danach werden geschweifte und eckige Klammern JSX-sicher neu escaped, sodass Text mit { } oder < korrekt gerendert wird, ohne die Komponente zu brechen.
Was bewirkt die Funktionskomponenten-Option?
Sie verpackt das konvertierte Markup in eine fertige Vorlage: function Component() { return ( ...dein JSX... ) } statt rohen JSX. Aktivieren, um den Schnipsel direkt in eine React-Datei einzufügen.
Wird mein HTML hochgeladen?
Nein. Das Parsen läuft vollständig im Browser über den eingebauten DOMParser. Nichts wird an einen Server gesendet – privates Markup ist sicher, und das Werkzeug funktioniert auch offline.
So verwenden Sie HTML-zu-JSX-Konverter
Wandeln Sie gewöhnliches HTML in sofort einsatzbereites React JSX um, ohne den Browser zu verlassen. Alles wird lokal mit dem eingebauten DOMParser geparst — Ihr Markup wird nie hochgeladen.
- Fügen Sie Ihr HTML in den linken Editor ein; das JSX-Ergebnis erscheint rechts und aktualisiert sich beim Tippen (300 ms Entprellung).
- Wählen Sie die Einzugsbreite in „Einrückung“ — 2 oder 4 Leerzeichen pro Verschachtelungsebene.
- Schalten Sie „Funktionskomponente“ um, um die Ausgabe in function Component() { return ( ... ) } zu verpacken, fertig zum Einfügen in eine React-Datei.
- Nutzen Sie Kopieren für das Ergebnis, Beispiel für eine Stichprobe oder Leeren zum Neuanfang.
class, for und tabindex werden zu className, htmlFor und tabIndex, Style-Strings werden zu CamelCase-Objekten, und void-Elemente wie img oder br werden selbstschließend ausgegeben — genau das, was JSX erwartet.
Verwandte Tools
- HTML-Verschönerer HTML-Code sofort formatieren und verschönern. Minifiziertes HTML in sauberen, lesbaren Code umwandeln. Kostenloses Online-Tool, keine Registrierung.
- Code zu Bild Wandeln Sie Code-Snippets in teilbare Bilder mit Syntaxhervorhebung, benutzerdefinierten Themes und Fensterdekorationen um. 100% Privatsphäre, alles in Ihrem Browser.
- Hash-Prüfer MD5, SHA-1, SHA-256, SHA-512 Datei-Hashes lokal berechnen und prüfen
- Chmod-Rechner Kostenloser Online-Chmod-Rechner zur Visualisierung und Berechnung von Linux-Dateiberechtigungen mit Kontrollkästchen. Sofortige Umwandlung zwischen numerischer (755, 644) und symbolischer Notation (rwxr-xr-x). Unterstützt Sonderberechtigungen wie setuid, setgid, sticky bit.
- ASCII-Tabelle Vollständige ASCII-Zeichencodierungsreferenz mit Dezimal-, Hexadezimal-, Oktal-, Binärcodes, HTML-Entities und Beschreibungen. Sofortige Suche und Filterung.
- Hex-Betrachter Zeigen Sie Dateiinhalte im Hex-Dump-Format mit Suche, Offset-Navigation und virtuellem Scrollen an
- MIME-Typ-Suche Finden Sie sofort MIME-Typen nach Dateierweiterung oder suchen Sie Erweiterungen nach MIME-Typ. Kostenlose Online-Referenz mit über 1000 Einträgen.
- Bildschirmauflösungs-Prüfer Erfasst Bildschirmauflösung, Viewport-Größe, DPI und Farbtiefe in Echtzeit.