HTML-Eingabe

JSX-Ausgabe

Was ist ein HTML-zu-JSX-Konverter?

Ein HTML-zu-JSX-Konverter wandelt Standard-HTML-Markup in gultige React JSX-Syntax um. In JSX muss class zu className und for zu htmlFor werden.

Das Einfugen von HTML in React-Komponenten fuhrt zu Syntaxfehlern. Dieses Tool automatisiert alle erforderlichen Transformationen.

Wie man HTML in JSX konvertiert

Folgen Sie diesen drei Schritten, um HTML in gultiges React JSX zu konvertieren.

HTML einfugen oder hochladen

Fugen Sie Ihr HTML in das linke Panel ein oder klicken Sie auf Hochladen.

JSX-Ausgabe anzeigen

class wird in className umbenannt und leere Elemente werden selbstschliessend.

Kopieren oder herunterladen

Klicken Sie auf Kopieren oder Herunterladen, um als .jsx zu speichern.

Wann diesen Konverter verwenden

HTML zu React migrieren

Konvertieren Sie vorhandene HTML-Vorlagen fur React-Projekte in JSX.

Designer-Mockups verwenden

Integrieren Sie HTML-Mockups von Designern in React-Komponenten.

JSX lernen

Sehen Sie die JSX-Entsprechung fur jedes HTML, das Sie kennen.

E-Mail-Vorlagen konvertieren

Konvertieren Sie HTML-E-Mail-Vorlagen fur React Email.

Haufige Fragen

Warum wird class zu className?

In JSX werden Attribute auf JavaScript-DOM-Eigenschaften gemappt. Die DOM-Eigenschaft fur class heisst className.

Welche anderen Attribute werden umbenannt?

for→htmlFor, tabindex→tabIndex, onclick→onClick.

Welche leeren Elemente werden selbstschliessend?

Alle leeren HTML-Elemente: <br />, <img />, <input />, etc.

Werden Inline-Styles verarbeitet?

style="color:red" wird zu style={{ color: "red" }}.

Wird mein HTML gespeichert?

Nein. Alles geschieht in Ihrem Browser.

HTML zu JSX Konverter