Was ist der Unterschied zwischen "for" und "htmlFor"?

Gleiche Geschichte wie `class` - `for` ist ein **reserviertes Keyword** (die `for`-Loop). In JSX schreibst du `htmlFor`. Das Attribut **verknüpft ein Label mit einem Formularfeld**: ` Email `. Auf das Label klicken setzt den Fokus aufs Input.

Warum muss Inline-Style ein Objekt sein statt eines Strings?

In HTML schreibst du `style="color: red; font-size: 12px"` (einen String). JSX erwartet ein **JavaScript-Objekt**: `style={{ color: "red", fontSize: "12px" }}`. Die doppelten Klammern heißen "ein Objekt in einem JSX-Ausdruck". Keys sind **camelCase** (`fontSize`, nicht `font-size`). Werte sind Strings (numerische Pixel kannst du als nackte Zahl übergeben: `fontSize: 12` wird "12px").

Warum brauchen manche Tags ein explizites Self-Close?

JSX verlangt, **dass jeder Tag geschlossen wird**. ` `, ` `, ` `, ` `, ` `, ` ` können in HTML offen bleiben (der Browser regelt das), aber JSX braucht ` `, ` `. Das sind **Void-Elemente** - sie haben keine Kinder, also nehmen wir die Self-Closing-Form.

Was ist mit SVG-Attributen wie stroke-width?

Alle Bindestrich-SVG-Attribute werden **camelCase**: `stroke-width` zu `strokeWidth`, `stroke-linecap` zu `strokeLinecap`, `clip-path` zu `clipPath`, `fill-rule` zu `fillRule`. Ausnahmen: `xmlns`, `viewBox` (schon Bindestrich-frei), `xmlns:xlink` (die camelCase-Form `xmlnsXlink` ist deprecated - meist einfach weglassen).

Was ist mit booleschen Attributen wie checked / disabled?

In HTML reicht die Anwesenheit: ` `. In JSX ist es **klarer, explizit zu sein**: ` ` oder ` ` für uncontrolled Inputs. Der Toggle in den Optionen lässt dich die Form wählen. Denk an die React-Unterscheidung: controlled (`checked`) vs uncontrolled (`defaultChecked`).

Konvertiert der Konverter onclick / onchange-Events?

Ja, obwohl es **selten voll Sinn macht**, sie zu konvertieren - in HTML sind sie Strings (`onclick="doStuff()"`), in JSX sollten sie **Funktionen** sein (`onClick={doStuff}`). Der Konverter schreibt `onclick` zu `onClick` um, behält aber den String. Du musst den Body selbst auf eine echte Funktionsreferenz tauschen.

Was ist mit HTML-Entities wie & oder ?

Der **"Decode entities"**-Toggle schreibt um: `&` zu `&`, ` ` zu einem normalen Leerzeichen (oder `{' '}`, wenn du den Non-Breaking-Effekt behalten willst), `<` zu ` `. JSX akzeptiert echte Zeichen und manche Entities, aber nicht alle (`©` geht, `&` ist besser als literales `&`).

Warum müssen "tabindex" und "colspan" camelCase sein?

JSX nutzt **camelCase für jede Prop**: `tabindex` zu `tabIndex`, `colspan` zu `colSpan`, `rowspan` zu `rowSpan`, `maxlength` zu `maxLength`, `readonly` zu `readOnly`, `autoplay` zu `autoPlay`. Ausnahmen: `data-*` und `aria-*` behalten Bindestriche (`data-testid`, `aria-label`).

Kann ich damit eine ganze Seite konvertieren?

Ja - das volle ` `/` ` pasten. Der Konverter gibt JSX zurück, aber **React rendert ` ` oder ` ` nicht als Komponente** (das Framework macht das, z. B. Next.js in `app/layout.tsx`). Meist interessieren dich nur die Inhalte des ` `. Wrapper manuell wegschneiden oder nur das relevante Fragment pasten.

HTML zu JSX Konverter - kostenlos

Warum HTML zu JSX konvertieren?

JSX ist HTMLs React-Dialekt - fast identisch, aber mit ein paar leicht zu übersehenden Unterschieden. `class` muss `className` sein (weil `class` ein JavaScript-Keyword ist). `for` in `<label for="x">` wird zu `htmlFor`. Kommentare `` funktionieren nicht, du brauchst `{/* ... */}`. Inline-Style muss ein JavaScript-Objekt sein: `style={{ color: 'red' }}` mit camelCase-Keys.

Pastet dein HTML hier (aus einem Figma-Export, einer Icon-Library, einem Snippet aus dem Web) und kriegst fertiges JSX zum Droppen in eine React-Komponente. Der Konverter handhabt SVG-Attribute (`stroke-width` zu `strokeWidth`), Self-Closing für `<br>` / `<img>` / `<input>`, boolesche Attribute und HTML-Entities.

Alles läuft im Browser - der Code verlässt deinen Rechner nie.

So nutzt du das Tool

HTML ins linke Panel pasten (ein Figma-Fragment, ein SVG-Icon, ein Stück Seite zum Refactoren).
Rechts siehst du JSX - mit umgeschriebenen Attributen und Styles.
"Wrap in component" anschalten für ein fertiges `export default function Component() { return (...) }`.
In TypeScript-Modus wechseln, um einen typisierten Rückgabewert zu ergänzen.
"Copy" drücken und in deine `.tsx`-Datei pasten.

Wann das hilft

Echte Situationen, in denen der Konverter Zeit spart:

Legacy-HTML zu React migrieren. Du hast ein altes Projekt mit `.html`-Files oder ein Bootstrap-Template und willst es als React/Next.js neu schreiben. Jede Section pasten, eine funktionierende Komponente bekommen.
Icons aus Figma / Iconify. Ein Designer exportiert ein SVG-Icon, du pastest es und bekommst eine React-Komponente.
Snippets aus CodePen / StackOverflow. Jemand hat eine Vanilla-HTML-Lösung gepostet - pasten, JSX bekommen.
Marketing-Assets. Eine Hero-Section oder CTA-Box pasten und in eine Komponente verwandeln.
Email-Templates. Email-HTML mit literalem `style="..."` wird zu `style={{...}}` - nützlich, wenn du Templates innerhalb einer React-App previewst.
Refactoring. Dein Team ist auf React umgestiegen und hat 100 alte Produkt-Karten in nacktem HTML zum Migrieren.
Lernen. React studieren und schnell sehen, "wie würde das in JSX aussehen".

Um SVG zu einer React-Komponente zu konvertieren (fortgeschritten, mit size/color-Props), schau SVG zu React-Komponente. Für CSS-Gradients schau den Gradient-Generator.

Häufig gefragt

`class` ist ein reserviertes JavaScript-Keyword (zum Definieren von Klassen: `class User {}`). JSX kompiliert zu JavaScript, also kann es `class` nicht als Prop-Namen nutzen. Das React-Team hat `className` gewählt, weil das schon in der DOM-API existiert (`element.className`), klingt also natürlich für jeden mit DOM-Background.

Warum HTML zu JSX konvertieren?

Alles läuft im Browser - der Code verlässt deinen Rechner nie.

So nutzt du das Tool

HTML ins linke Panel pasten (ein Figma-Fragment, ein SVG-Icon, ein Stück Seite zum Refactoren).

Rechts siehst du JSX - mit umgeschriebenen Attributen und Styles.

"Wrap in component" anschalten für ein fertiges `export default function Component() { return (...) }`.

In TypeScript-Modus wechseln, um einen typisierten Rückgabewert zu ergänzen.

"Copy" drücken und in deine `.tsx`-Datei pasten.

Wann das hilft

Echte Situationen, in denen der Konverter Zeit spart:

Legacy-HTML zu React migrieren. Du hast ein altes Projekt mit `.html`-Files oder ein Bootstrap-Template und willst es als React/Next.js neu schreiben. Jede Section pasten, eine funktionierende Komponente bekommen.
Icons aus Figma / Iconify. Ein Designer exportiert ein SVG-Icon, du pastest es und bekommst eine React-Komponente.
Snippets aus CodePen / StackOverflow. Jemand hat eine Vanilla-HTML-Lösung gepostet - pasten, JSX bekommen.
Marketing-Assets. Eine Hero-Section oder CTA-Box pasten und in eine Komponente verwandeln.
Email-Templates. Email-HTML mit literalem `style="..."` wird zu `style={{...}}` - nützlich, wenn du Templates innerhalb einer React-App previewst.
Refactoring. Dein Team ist auf React umgestiegen und hat 100 alte Produkt-Karten in nacktem HTML zum Migrieren.
Lernen. React studieren und schnell sehen, "wie würde das in JSX aussehen".

Um SVG zu einer React-Komponente zu konvertieren (fortgeschritten, mit size/color-Props), schau SVG zu React-Komponente. Für CSS-Gradients schau den Gradient-Generator.

Häufig gefragt

HTML zu JSX Konverter