Über dieses Tool
Der Konverter HTML zu JSX / React parst ein HTML-Snippet mit dem nativen DOMParser des Browsers und serialisiert es erneut als gültiges JSX, wobei alles behoben wird, was React benötigt. Er läuft vollständig clientseitig, sodass das eingefügte Markup auf Ihrem Gerät bleibt. Fügen Sie beliebiges HTML ein — einen Design-Export, eine E-Mail-Vorlage, eine Komponentenskizze — und erhalten Sie JSX, das Sie direkt in eine React-Datei einfügen können.
Die Umschreibung benennt reservierte Attribute um (class wird zu className, for wird zu htmlFor), setzt den Rest in camelCase — tabindex zu tabIndex, maxlength zu maxLength, stroke-width zu strokeWidth — und lässt data-*- und aria-*-Attribute unangetastet. Void-Elemente wie img, br, input und hr werden selbstschließend gemacht (<img />), HTML-Kommentare werden zu {/* ... */}, wörtliche geschweifte Klammern im Text werden als {'{'} escapt, und ein Inline-String style="a:b;c:d" wird in ein Objekt style={{ a: 'b', c: 'd' }} mit camelCase-CSS-Schlüsseln umgewandelt. Boolean-Attribute wie disabled können mit einem Umschalter nackt oder als ={true} ausgegeben werden.
Wählen Sie Fragment-Ausgabe — mehrere Wurzelknoten werden automatisch in ein Fragment <>...</> gewickelt — oder vollständige Komponentenausgabe, die das JSX in eine export default function mit Ihrem gewählten Namen und Einrückung (2 Leerzeichen, 4 Leerzeichen oder Tabs) einwickelt. Das Ergebnis ist einsatzbereit; da das Parsen ein echtes DOM verwendet, wird fehlerhafte Verschachtelung so normalisiert, wie es ein Browser tun würde.