Web-Entwicklung Anfänger 2 Schritte

HTML zu JSX und JS-Format

HTML-zu-JSX-Konvertierung ändert class zu className und passt Attribute an. JS-Formatierung sorgt für konsistenten Stil.

Gelöstes Problem

HTML in JSX umwandeln dann die JavaScript-Ausgabe formatieren.

Eingabe → Ausgabe

HTML zu JSX Eingabe → JS-Formatierer Ausgabe , insgesamt 2 Schritte.

Ausführungsdauer

1–2 Min · vollständig lokal im Browser.

Vor dem Start

HTML-Eingabe

Pipeline

1 HTML zu JSX html-to-jsx

Konvertiert HTML zu JSX, indem class= zu className= und for= zu htmlFor= umgeschrieben wird. Die Umschreibung ist regexbasiert und nicht stringbewusst: class=-Vorkommen in Attributwerten werden ebenfalls umgeschrieben.
2 JS-Formatierer js-format

Beautify or minify JavaScript source code online. Text-only formatting, no execution. Kostenlos, privat und 100% clientseitig.

In Werkzeugkette öffnen

Läuft lokal im Browser. Das Rezept definiert nur die Pipeline — Ihre Eingaben verlassen nie diesen Tab.

▶Diesen Workflow ausführen

Geben Sie unten Ihre Eingabe ein und klicken Sie auf Ausführen. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser — nichts wird hochgeladen.

Eingabedaten

Pipeline-Fortschritt

HTML zu JSXhtml-to-jsx
JS-Formatiererjs-format

Beispiel-Eingabe

<div class="test">Hello</div>

Erwartete Ausgabe

<div className="test">Hello</div>

Dieses Eingabe-Ausgabe-Paar wird beim Build mit echten Tools ausgeführt (tests/unit/recipes.test.ts) — die erwartete Ausgabe ist verifiziert, nicht illustrativ.