HTML-zu-JSX-Konverter: kostenlos, läuft in deinem Browser | We.Inc
Füge HTML ein und erhalte gültiges JSX: class zu className, for zu htmlFor, Style-Strings zu Objekten, geschlossene Void-Tags, Kommentare, Events und ein Komponenten-Wrapper. Nichts wird hochgeladen.
HTML-zu-JSX-Konverter
Füge links HTML ein, und dieser Konverter schreibt rechts während des Tippens JSX: Aus class wird className, aus for wird htmlFor, Inline-Styles werden zu camelCase-Objekten, Void-Tags wie img und input werden selbst geschlossen, Kommentare wandern in geschweifte Klammern, und mehrere Elemente auf oberster Ebene bekommen ein Fragment. Die Umwandlung läuft nur in deinem Browser.
Was sich zwischen HTML und JSX ändert
HTML
JSX
Warum
class="box"
className="box"
class ist in JavaScript ein reserviertes Wort
for="email"
htmlFor="email"
for ist ebenfalls ein reserviertes Wort
style="font-weight: bold"
style={{ fontWeight: 'bold' }}
style erwartet ein Objekt mit camelCase-Schlüsseln
<img src="a.png">
<img src="a.png" />
Jedes Tag muss geschlossen werden
onclick="go()"
onClick={go}
Events sind camelCase und erwarten eine Funktion
data-id="7", aria-label="Close"
data- und aria- behalten ihre Bindestriche
Ein Snippet aus einem Template, einem E-Mail-Builder oder einem Icon-Set in eine React-Komponente zu kopieren, scheitert meist an einem Dutzend kleiner Unterschiede. Dieses Tool wendet die Regeln an, die React für JSX dokumentiert, erklärt jede Änderung, die es vorgenommen hat, und kann das Ergebnis in eine benannte Komponente verpacken, die du direkt einfügen kannst.
Füge HTML in das Eingabefeld ein oder tippe es. Die JSX-Ausgabe aktualisiert sich bei jedem Tastendruck.
Gib optional einen Komponentennamen ein, um die Ausgabe in eine exportierte Function Component zu verpacken.
Lies die Liste der Änderungen unter der Ausgabe, jede Notiz erklärt eine Umschreibung, die der Konverter vorgenommen hat.
Kopiere das JSX in deine Komponentendatei und ersetze leere Event-Handler durch echte Funktionen.
Inline-onclick-Code kann in JSX nicht laufen. Der Konverter behält ihn als Kommentar in einem leeren Handler, damit du ihn in eine Funktion verschieben kannst.
Formularfelder mit value werden zu defaultValue, damit sie bearbeitbar bleiben. Wechsle zu value plus onChange, wenn du ein kontrolliertes Input willst.
SVG-Icons enthalten oft stroke-width und fill-rule, diese werden automatisch in strokeWidth und fillRule umbenannt.
React hängt an Zahlen in einem Style-Objekt px an, dieser Konverter behält aber jeden Wert als ursprünglichen String, um exakt zu bleiben.
Häufige Fragen
Warum verwendet React className statt class?
JSX wird zu JavaScript kompiliert, wo class ein reserviertes Wort ist. React nennt die Prop deshalb className. Aus demselben Grund wird das label-Attribut for zu htmlFor.
Ändern sich data- und aria-Attribute in JSX?
Nein. Die React-Dokumentation weist darauf hin, dass aria-* und data-* Attribute aus historischen Gründen genau wie in HTML geschrieben werden, mit Bindestrichen. Die meisten anderen Attribute aus mehreren Wörtern werden zu camelCase.
Wie schreibe ich Inline-Styles in JSX?
Übergib style ein Objekt mit Eigenschaftsnamen in camelCase, zum Beispiel style={{ fontWeight: 'bold', marginTop: 8 }}. React hängt bei den meisten Eigenschaften an reine Zahlen px an. Die äußeren geschweiften Klammern öffnen einen JavaScript-Ausdruck, die inneren sind das Objekt.
Warum bekomme ich einen Fehler wegen mehrerer Root-Elemente?
Eine Komponente kann nur ein Element zurückgeben. Verpacke Geschwisterelemente in ein Elternelement oder ein leeres Fragment, geschrieben als <> und </>. Der Konverter erledigt das für dich, wenn das HTML mehr als einen Knoten auf oberster Ebene hat.
Wird mein HTML irgendwohin gesendet?
Nein. Die Umwandlung ist reines JavaScript, das auf dieser Seite läuft. Nichts, was du einfügst, wird hochgeladen oder gespeichert.
Die drei Regeln hinter jeder Umwandlung
Reacts eigene Einführung in JSX bringt die Unterschiede auf drei Regeln: ein einziges Root-Element zurückgeben, jedes Tag schließen und die meisten Attributnamen in camelCase schreiben. Fast alles, was der Konverter macht, fällt unter eine dieser drei.
Die Ausnahmen sind reservierte Wörter und die Familien mit Bindestrich. class und for werden umbenannt, weil JavaScript sie reserviert, während aria- und data-Attribute ihre HTML-Schreibweise behalten.
Was weiterhin einen Menschen braucht
Inline-Skripte und Event-Handler-Strings sind Code, kein Markup, und müssen deshalb als Funktionen in deiner Komponente neu geschrieben werden. Der Konverter markiert sie, statt zu raten.
Wiederholte Blöcke wie Listeneinträge sind oft besser als Array, das auf JSX gemappt wird. Suche nach dem Umwandeln nach kopierten Geschwisterelementen und mach daraus Daten plus einen map-Aufruf.
Attribut-Umbenennungen, die der Konverter anwendet
HTML-Attribut zu JSX-Prop
HTML
JSX
className
htmlFor
tabIndex
readOnly
maxLength
colspan / rowspan
colSpan / rowSpan
autoComplete
srcSet
crossOrigin
value an input
defaultValue
checked an input
defaultChecked
strokeWidth
fillRule
viewBox
Inline-Event-Handler wie onclick wurden in leere camelCase-Handler umgewandelt, verschiebe den Code in eine Funktion.
value an einem Formularfeld wurde zu defaultValue, damit das Feld ohne onChange-Handler bearbeitbar bleibt.
checked wurde aus demselben Grund zu defaultChecked.
selected an einer option wurde entfernt, setze stattdessen defaultValue am select.
Der Doctype wurde entfernt, JSX hat keinen Doctype.
Die Eingabe hatte mehr als ein Element auf oberster Ebene und wurde deshalb in ein Fragment verpackt.
Konverter
Das Beispiel unten wird live umgewandelt, ersetze es durch dein eigenes HTML.
Komponentenname (optional)
JSX kopieren
Vorgenommene Änderungen
Es waren nur die Standard-Umbenennungen nötig.
Der Inhalt von <{tag}> wurde in ein Template-Literal verpackt, damit geschweifte Klammern wörtlich bleiben.