HTML in JSX umwandeln
Füge das HTML ein und kopiere das JSX.
So geht’sHTML für React (JSX)
Verfügbar auf: 
HTML in JSX umwandeln: wofür es gut ist
Füge das HTML ein, und die Umwandlung geschieht sofort: class und for werden zu className und htmlFor, Attribute wie tabindex, maxlength und autocomplete gehen in camelCase, style wird ein Objekt, boolesche Attribute bleiben ohne Wert, leere Tags bekommen den Schrägstrich und Kommentare werden zu {/* */}. Inline-Ereignisse werden zu Funktionen mit dem alten Code im Kommentar.
Attribute data- und aria- bleiben, wie sie sind, und SVG-Attribute werden ebenfalls umgewandelt. Aktiviere Komponente erzeugen, um die fertige Funktion mit dem gewählten Namen zu erhalten.
So geht’s
- Füge das HTML ein.
- Aktiviere Komponente erzeugen, wenn du die fertige Funktion willst.
- Kopiere das JSX in dein React-Projekt.
Wann nutzen
- HTML-Vorlagen in React- und Next.js-Projekte übernehmen.
- SVG-Icons in Komponenten umwandeln.
- Von anderen Websites kopierte Ausschnitte anpassen.
Häufige Fragen
Was ändert sich von HTML zu JSX?
class wird className und for wird htmlFor; Attribute mit Bindestrich oder für Ereignisse stehen in camelCase (tabindex wird tabIndex, onclick wird onClick); style wird ein Objekt ({{ marginTop: '8px' }}); Tags ohne Schließung (img, br, input) bekommen den Schrägstrich; Kommentare werden {/* */}.
Ändern sich die Attribute data- und aria-?
Nein. data-* und aria-* bleiben im JSX gleich, mit Bindestrich.
Und das JavaScript in onclick?
Der Inhalt der Inline-Ereignisse wird in einen Kommentar umgewandelt, weil das Ereignis in React eine Funktion erhält. Schreibe die Aktion als Funktion der Komponente neu.
Funktioniert SVG?
Ja. SVG-Attribute wie stroke-width, fill-rule und xlink:href werden zu strokeWidth, fillRule und xlinkHref.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.