HTML zu JSX Konverter

So verwenden Sie den HTML zu JSX Konverter

Fuegen Sie Ihren HTML-Code in das Eingabefeld ein und klicken Sie auf Zu JSX konvertieren. Das Tool wandelt Ihr HTML in gueltiges JSX um, indem es Attribute konvertiert, Void-Elemente selbstschliessend macht, Inline-Styles transformiert und Kommentare verarbeitet. Das Statistikfeld zeigt, wie viele Aenderungen vorgenommen wurden, sowie die Zeichenlaengen von Eingabe und Ausgabe. Verwenden Sie die Kopieren-Schaltflaeche, um die JSX-Ausgabe direkt in Ihre React-Komponentendatei zu uebernehmen.

Dieses Tool ist unverzichtbar fuer React-Entwickler, die bestehende HTML-Vorlagen in React-Komponenten migrieren, HTML-Snippets aus Design-Tools kopieren oder statische HTML-Prototypen in dynamische React-Anwendungen umwandeln. Anstatt jedes Attribut und Element manuell zu aendern, uebernimmt der Konverter alle Transformationen automatisch mit einem Klick.

JSX und React-Komponenten verstehen

JSX ist die Syntax, die React-Entwicklung produktiv macht. Sie ermoeglicht es, UI-Code zu schreiben, der wie HTML aussieht, aber tatsaechlich JavaScript ist. Wenn Sie <div className="container"> in JSX schreiben, wandelt Reacts Build-Tool dies in einen React.createElement('div', {className: 'container'})-Funktionsaufruf um. Das bedeutet, dass JSX den JavaScript-Regeln folgt, nicht den HTML-Regeln, weshalb bestimmte Attribute und Muster angepasst werden muessen.

Der wichtigste Unterschied ist, dass JSX JavaScript-Namenskonventionen fuer Attribute verwendet. Da class und for reservierte Woerter in JavaScript sind, werden sie zu className bzw. htmlFor. Alle Event-Handler-Attribute verwenden camelCase: onclick wird zu onClick, onchange wird zu onChange und onsubmit wird zu onSubmit. Diese Namensaenderungen sind konsistent und vorhersehbar.

Regeln zur Attributkonvertierung

Neben class und for haben einige weitere HTML-Attribute andere Namen in JSX. Das tabindex-Attribut wird zu tabIndex. Die Attribute colspan und rowspan werden zu colSpan und rowSpan. Das Attribut crossorigin wird zu crossOrigin. Boolesche Attribute wie checked, disabled und readonly funktionieren gleich, aber readonly wird in JSX zu readOnly. Data-Attribute (data-*) und ARIA-Attribute (aria-*) sind die Ausnahmen und bleiben in JSX unveraendert.

Transformation von Inline-Styles

HTML-Inline-Styles verwenden eine CSS-Zeichenkette: style="color: red; font-size: 16px; background-color: blue". JSX erfordert ein JavaScript-Objekt mit camelCase-Eigenschaftsnamen: style={{color: 'red', fontSize: '16px', backgroundColor: 'blue'}}. Der Konverter uebernimmt diese Transformation automatisch und wandelt CSS-Eigenschaften mit Bindestrichen in camelCase um und kapselt die Werte in einem JavaScript-Objektliteral. Numerische Werte fuer pixelbasierte Eigenschaften koennen in JSX die Einheit 'px' weglassen.

Selbstschliessende Elemente

HTML erlaubt es, Void-Elemente wie <img>, <br>, <hr> und <input> ohne schliessenden Schraegstrich zu schreiben. JSX erfordert, dass alle Elemente explizit geschlossen werden, entweder mit einem schliessenden Tag oder einem selbstschliessenden Schraegstrich. Der Konverter stellt sicher, dass alle Void-Elemente korrekt selbstgeschlossen werden: <img> wird zu <img />, <br> wird zu <br /> und so weiter. Dies ist in JSX zwingend erforderlich und fuehrt bei Nichtbeachtung zu einem Kompilierungsfehler.

Haeufig gestellte Fragen

Was ist JSX?

JSX ist eine JavaScript-Syntaxerweiterung, die in React verwendet wird und es ermoeglicht, HTML-aehnlichen Code in JavaScript-Dateien zu schreiben. Sie verwendet camelCase fuer Attribute und erfordert das Schliessen aller Elemente.

Warum HTML zu JSX konvertieren?

HTML und JSX haben subtile, aber wichtige Unterschiede bei Attributnamen, Style-Syntax, Elementschliessung und Kommentaren. Eine manuelle Konvertierung ist muehsam und fehleranfaellig.

Welche Attribute aendern sich?

class wird zu className, for wird zu htmlFor, tabindex wird zu tabIndex, Event-Handler werden zu camelCase, und readonly wird zu readOnly. Data- und ARIA-Attribute bleiben unveraendert.

Wie werden Styles behandelt?

CSS-Zeichenketten-Styles werden zu JavaScript-Objekten mit camelCase-Eigenschaften. "font-size: 16px" wird zu {fontSize: '16px'}.

Werden Kommentare verarbeitet?

Ja. HTML-Kommentare <!-- Kommentar --> werden zu JSX-Kommentaren {/* Kommentar */}, eingeschlossen in geschweiften Klammern mit Blockkommentar-Syntax.