HTML-zu-JSX-Konverter

HTML in React JSX konvertieren: className, htmlFor, selbstschließende Tags und Stil-Objekte

Was ist das und wie funktioniert es?

Ein HTML-zu-JSX-Konverter schreibt reines HTML in die JSX-Syntax um, die React-Komponenten nutzen, und behebt die Unterschiede, die das Markup sonst in einer React-Datei ungültig machen würden. JSX sieht fast identisch zu HTML aus, aber eine Handvoll Attribute und Regeln unterscheiden sich, weil JSX eigentlich JavaScript ist: class wird className, for wird htmlFor, jedes Tag muss explizit geschlossen werden, und Inline-Stile werden als JavaScript-Objekt statt als Zeichenkette geschrieben. Echtes HTML einzufügen und gültiges JSX zurückzubekommen erspart die mühsame, fehleranfällige Handarbeit.

Genau diese Aufgabe taucht ständig auf, wenn man ein Design, eine E-Mail-Vorlage oder ein Snippet von irgendwo im Web in ein React-Projekt bringt. Von Hand heißt es, jedes class-Attribut zu finden, jedes <img> und <br> selbstzuschließen und style="color:red" in style={{ color: 'red' }} umzuformen — in einem großen Block leicht zu übersehen und frustrierend zu debuggen, wenn der Build fehlschlägt. Dieses Tool wendet all diese Transformationen im Browser an, sodass Sie einfügebereites JSX erhalten, ohne Ihr Markup irgendwohin zu senden.

Anwendungsfälle

• Ein Design nach React portieren: Fügen Sie HTML aus einem Mockup oder einer Vorlage ein und erhalten Sie JSX, das direkt in eine Komponente passt.
• Ein Snippet wiederverwenden: Wandeln Sie aus dem Web kopiertes HTML um, damit es ohne manuelle Korrekturen in einer React-Datei funktioniert.
• Markup migrieren: Verwandeln Sie das HTML einer bestehenden statischen Seite in JSX als Teil des Umzugs in eine React-App.

Häufige Fragen

Warum wird class in JSX zu className?

Weil JSX zu JavaScript kompiliert und class in JavaScript ein reserviertes Wort ist. React nutzt stattdessen className, um die Klasse des Elements zu setzen. Ebenso wird for (in Label-Elementen reserviert) zu htmlFor. Der Konverter benennt diese automatisch um, damit das JSX gültig ist.

Wie werden Inline-Stile behandelt?

In HTML ist ein Stil eine Zeichenkette wie "color: red; font-size: 14px". In JSX muss er ein JavaScript-Objekt mit camelCase-Eigenschaften sein: style={{ color: 'red', fontSize: '14px' }}. Der Konverter formt die Zeichenkette in diese Objektform um, inklusive Umwandlung der Eigenschaftsnamen mit Bindestrich.

Warum muss in JSX jedes Tag geschlossen werden?

JSX verlangt, dass jedes Element explizit geschlossen wird, also werden leere Elemente wie <img>, <br> und <input> selbstschließend (<img />). HTML ist da nachsichtig, aber JSX kompiliert sonst nicht, weshalb der Konverter die schließenden Schrägstriche hinzufügt.

Behandelt es HTML-Kommentare und andere Eigenheiten?

JSX-Kommentare nutzen eine andere Syntax ({/* ... */}) als HTML-Kommentare (<!-- ... -->), und ein paar weitere Attribute unterscheiden sich auch. Ein guter Konverter übersetzt die häufigen Fälle; bei ungewöhnlichem Markup prüfen Sie die Ausgabe, da manche Sonderfälle noch eine manuelle Korrektur brauchen.

Entwickler

UUID-Generator · Zeitstempel-Konverter · Base64-Encoder · Base64-Decoder · Hash-Generator · Farb-Konverter