Toolipedia Einbetten
DE
← Alle Text-Tools

HTML-zu-JSX-Konverter

HTML in React-JSX umwandeln: class zu className, Style-Objekte und selbstschließende Tags.

  • Kostenlos
  • Ohne Anmeldung
  • Funktioniert auf jedem Gerät

Über HTML-zu-JSX-Konverter

Fügen Sie HTML ein und erhalten Sie gültiges React-JSX. Das Tool benennt class in className und for in htmlFor um, wandelt Inline-Style-Zeichenfolgen in Style-Objekte um, schließt Void-Tags wie br und img und wandelt Attribute in camelCase um. Das erspart die mühsame Handarbeit, wenn Sie eine statische Vorlage in eine Komponente überführen.

So verwenden Sie HTML-zu-JSX-Konverter

  1. Füge dein HTML-Snippet in das Eingabefeld ein.
  2. Prüfe das umgewandelte JSX mit className, Style-Objekten und geschlossenen Tags.
  3. Kopiere das JSX in deine React-Komponente.

Warum dieses Tool?

Auch bekannt als

Häufig gestellte Fragen

Warum verwendet React className statt class?

Class ist in JavaScript ein reserviertes Wort, und JSX ist JavaScript, daher verwendet React den DOM-Eigenschaftsnamen className für das HTML-Attribut class.

Was ändert sich außer class noch?

Attribute wie for werden zu htmlFor, Inline-Stile werden zu Objekten, und Tags wie img und input werden selbst geschlossen. Ereignisnamen nutzen ebenfalls camelCase.

Muss ich das Ergebnis in ein Elternelement packen?

JSX muss ein Wurzelelement zurückgeben. Hat dein HTML mehrere Elemente auf oberster Ebene, packe sie in ein div oder ein Fragment.

Ist HTML-zu-JSX-Konverter kostenlos?

Ja. HTML-zu-JSX-Konverter auf Toolipedia ist kostenlos nutzbar, ohne Anmeldung und ohne Wasserzeichen.

Ist die Nutzung sicher?

Ja. Alles wird in Ihrem Browser berechnet, und nichts von Ihren Eingaben wird an unseren Server gesendet.

Funktioniert es auf meinem Smartphone?

Ja. Es funktioniert in jedem modernen Browser auf Android und iPhone sowie auf Tablets und Computern. Sie müssen nichts installieren.

Brauche ich ein Konto?

Nein. Öffnen Sie einfach die Seite und nutzen Sie das Tool. Keine Anmeldung, keine E-Mail-Adresse nötig.

Kann ich HTML-zu-JSX-Konverter auf meiner eigenen Website einsetzen?

Ja. Nutze unter dem Tool die Schaltfläche „Auf deiner Website einbetten“, um ein kurzes Stück Code zu kopieren und in deine Seite einzufügen. Es ist kostenlos, braucht kein Konto, und das Tool funktioniert weiter innerhalb deiner Seite.

Ähnliche Tools