Web開発 入門 2 ステップ
HTML から JSX と JS フォーマット
HTML から JSX への変換は class を className に変換し属性を調整する。JS フォーマットは一貫したスタイルを保証する。
解決する問題
HTML を JSX に変換し、その後 JavaScript 出力をフォーマットする。
入力 → 出力
HTML から JSX への変換 入力 → JavaScript フォーマッター 出力 、計 2 ステップ。
実行時間
1–2分 · 完全にブラウザローカルで実行。
始める前に
- HTML 入力
パイプライン
-
class= を className= へ、for= を htmlFor= へ書き換えて HTML を JSX に変換します。書き換えは正規表現ベースで文字列を認識しないため、属性値の中の class= も書き換えられます。
-
Beautify or minify JavaScript source code online. Text-only formatting, no execution。無料、プライベート、100%クライアントサイド。
▶このワークフローを実行
下に入力を入力し実行をクリック。すべての処理はブラウザのローカルで行われます — 何もアップロードされません。
パイプラインの進行状況
- HTML から JSX への変換html-to-jsx
- JavaScript フォーマッターjs-format
サンプル入力
<div class="test">Hello</div>
期待される出力
<div className="test">Hello</div>
この入出力ペアはビルド時に実際のツールで実行（tests/unit/recipes.test.ts）——期待出力は検証済み、例示ではありません。
関連ワークフロー
こちらもおすすめ
このレシピとツールやテーマを共有するワークフロー。