HTML in JSX React Online konvertieren

Transformiere HTML in gültiges JSX für React und Next.js. Kostenlos, in deinem Browser, ohne Datei-Upload.

HTML

JSX

<div className="container">
  <label htmlFor="name">Name:</label>
  <input type="text" className="form-control" maxLength="50" readOnly / />
  <img src="photo.jpg" alt="Photo" />
  <br />
  {/* A comment */}
  <p style={{color: "red", fontSize: "14px", backgroundColor: "#f0f0f0"}}>Text</p>
</div>

Processed in your browser

Warum diesen Konverter verwenden

HTML in JSX ohne Syntaxfehler

Vollständige Privatsphäre

Die Konvertierung findet vollständig in deinem Browser mit reinem JavaScript statt. Dein Code verlässt niemals dein Gerät.

Vollständige Transformationen

Wir wenden alle notwendigen Konvertierungen an: Attribute, Styles, Events, Void-Tags und Kommentare. Keine manuellen Schritte.

Kompatibel mit React und Next.js

Das resultierende JSX ist für React 16+, Next.js 12+ und jedes React-basierte Framework wie Gatsby oder Remix gültig.

Sofort

Die Konvertierung erfolgt in Millisekunden ohne Server-Aufrufe. Einfügen und kopieren, ohne Warten.

So funktioniert es

Drei Schritte, kein Aufwand

Füge dein HTML ein

Füge den HTML-Code, den du konvertieren möchtest, in das Eingabefeld ein. Es können vollständige HTML-Dokumente oder Fragmente sein.

Automatische Konvertierung

Der Konverter wendet alle notwendigen Transformationen an: class in className, for in htmlFor, Inline-Styles als JS-Objekt und selbstschließende Void-Tags.

Resultierendes JSX kopieren

Kopiere das einsatzbereite JSX direkt in deine React- oder Next.js-Komponenten.

FAQ

Noch Fragen?

Welche Änderungen werden bei der Konvertierung von HTML in JSX angewendet?

Die wichtigsten Transformationen sind: class wird zu className (class ist ein reserviertes Wort in JS), for wird zu htmlFor (for ist ebenfalls reserviert), Inline-Styles werden vom CSS-String in ein JavaScript-Objekt mit camelCase-Eigenschaften konvertiert, Void-Tags werden selbstgeschlossen (br wird zu br /, img wird zu img /, input wird zu input /), und HTML-Kommentare werden in JSX-Kommentare umgewandelt.

Warum verwendet React JSX statt HTML?

React/Next.js erfordert JSX, weil Komponenten in JavaScript geschrieben werden. JSX ist syntaktischer Zucker über React.createElement(). Wenn es von Babel oder dem Next.js-Compiler kompiliert wird, wird jedes JSX-Tag in JavaScript-Funktionsaufrufe umgewandelt, was es unmöglich macht, reservierte JS-Wörter wie class oder for als Attribute zu verwenden.

Wie werden Inline-Styles konvertiert?

In HTML lautet die Syntax: style mit color und font-size als String. In JSX wird daraus ein JavaScript-Objekt: style mit color als String und fontSize als camelCase-Property. CSS-Eigenschaften in Kebab-Case werden in camelCase konvertiert (font-size wird zu fontSize, background-color zu backgroundColor), und Werte werden zu JavaScript-Strings oder Zahlen konvertiert.

Was passiert mit Event-Handlern?

Event-Handler in HTML verwenden Kleinbuchstaben (onclick, onchange, onsubmit). In JSX werden sie zu camelCase konvertiert: onclick wird zu onClick, onchange zu onChange, onsubmit zu onSubmit, onmouseover zu onMouseOver. Der Wert wechselt von einem JS-Code-String zu einer Funktionsreferenz.

Was sind Void-Elemente und warum müssen sie sich selbst schließen?

Void-Elemente in HTML sind Tags ohne Inhalt oder schließendes Tag: br, img, input, hr, meta, link. In JSX verlangt XML, dass alle Elemente explizit geschlossen werden, daher müssen sie als br /, img / usw. geschrieben werden. Ohne Selbstschließung wirft der JSX-Compiler einen Syntaxfehler.