HTML zu JSX

HTML in React-JSX umwandeln: class zu className, Inline-Styles zu Objekten, selbstschließende Tags und Kommentare. Optional in eine Komponente einbetten.

Über dieses Werkzeug

Wandle HTML in React-JSX um. Attribute werden umbenannt (class → className, for → htmlFor), Inline-Styles werden zu Objekten, leere Elemente schließen sich selbst und Kommentare werden zu JSX-Kommentaren.

So funktioniert es

  1. Füge HTML ein.
  2. Aktiviere optional In Komponente einbetten.
  3. Kopiere das JSX in deinen React-Code.

Häufige Fragen

Was ist mit mehreren Wurzelelementen?

Sie werden in ein Fragment <>…</> eingebettet, damit das Ergebnis gültiges JSX ist.

Werden Event-Handler umgewandelt?

onclick wird zu onClick, der Wert bleibt aber ein String. Ersetze ihn in deiner Komponente durch eine Funktion.

Wie werden geschweifte Klammern im Text behandelt?

Sie werden als {'{'} und {'}'} maskiert, damit JSX sie nicht als Ausdrücke behandelt.

Verwandte Werkzeuge