Entwickler / React

HTML-zu-JSX-Konverter

Konvertiere HTML für React in JSX: class wird zu className, Inline-Styles werden zu Objekten, Leerelemente geschlossen, geschweifte Klammern escaped und Kommentare umgewandelt – optional in eine Komponente eingeschlossen.

HTML-zu-JSX-Konverter: Das HTML wird in Elemente geparst, damit Attribute für React umbenannt werden (class, for, tabindex, readonly, maxlength und weitere), Styles zu Objekten mit camelCase-Schlüsseln werden und Leerelemente wie <br> und <img> ein schließendes Tag erhalten. Geschweifte Klammern und spitze Klammern in Text werden escaped, Kommentare zu {/* */} und Formularwerte zu defaultValue und defaultChecked, damit die Felder bearbeitbar bleiben. Die Ausgabe der Testseiten lässt sich als TSX kompilieren. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
HTML zu JSXLokale Verarbeitung

Läuft vollständig in deinem Browser

  • onclick="send()" auf <button> entfernt: Schreibe es als Funktion, zum Beispiel onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Attribute werden für React umbenannt (class zu className, for zu htmlFor, tabindex zu tabIndex), Stile werden zu Objekten, leere und Void-Elemente werden geschlossen, Kommentare zu {/* */} und Formularwerte zu defaultValue, damit die Felder bearbeitbar bleiben.

Nach der Konvertierung

Wandle wiederholtes Markup in Komponenten um, die Props entgegennehmen, ersetze fest codierten Text durch Variablen in geschweiften Klammern und verschiebe Inline-Stile in CSS-Klassen oder dein Styling-System, da bei jedem Rendern neue style-Objekte erstellt werden.

Für SVG-Symbole erstellt SVG zu JSX eine Komponente, die Props weitergibt. Um vorher Kommentare und überflüssige Leerzeichen zu entfernen, verwende den HTML-Minifizierer.

Unterschiede, die oft zu Problemen führen

JSX benötigt ein einzelnes Wurzelelement, daher werden mehrere Elemente in ein Fragment (<>…</>) eingeschlossen. Jedes Element muss geschlossen werden, Attributnamen verwenden camelCase, und Text mit { oder } muss als {"{"} geschrieben werden. Das erledigt der Konverter für dich.

So benutzt du es

  1. Füge HTML ein – von einem einzelnen Element bis zu einem ganzen Seitenabschnitt.
  2. Schließe das Ergebnis optional in eine benannte Komponente ein.
  3. Kopiere das JSX und schreibe alle in den Warnungen aufgeführten Inline-Event-Handler um.

Datenschutz & Einschränkungen

Das HTML wird in deinem Browser konvertiert und nie hochgeladen.

Ähnliche Tools

SVG zu JSXHTML-MinimiererHTML-Encoder

Häufige Fragen

Warum werden onclick-Attribute entfernt?

In HTML sind sie Codezeichenfolgen, in React müssen sie Funktionen sein. Der Konverter listet jedes einzelne auf, damit du es umschreiben kannst, zum Beispiel onclick="save()" zu onClick={save}.

Warum wird value zu defaultValue?

Ein value-Attribut macht das Feld in React kontrolliert. Ohne einen onChange-Handler kann dann nichts eingegeben werden; defaultValue setzt den Anfangstext und lässt das Feld bearbeitbar.

Wird SVG unterstützt?

Ja: SVG-Attribute wie stroke-width werden zu strokeWidth. Wenn du eine vollständige SVG-Datei in eine Komponente umwandelst, fügt das SVG-zu-JSX-Tool Props hinzu.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig