入力
ワークスペースを準備中…
使い方
- HTML 断片を貼り付けるか、UTF-8 ファイルまたはサンプルを開きます。
- インデントを選び、「JSX に変換」を実行します。
- 生成したマークアップを確認し、コピーまたはダウンロードします。
HTML マークアップを React に移す
テンプレートからコピーした HTML は、JSX に入れる前に修正が必要な場合があります。代表的な違いは className、htmlFor、自己終了タグ、インラインスタイルの形式です。
変換するのはマークアップ構造です。コンポーネントの状態、イベントコールバック、アプリのロジックは、生成した JSX を使う場所で実装してください。
属性とスタイルの変換
HTML 属性を className、htmlFor などの React 形式に対応付けます。一般的な SVG 属性も React の大文字・小文字に合わせます。
インライン CSS は style オブジェクトにし、結果を JSX として整形します。文字列は必要に応じてエスケープし、JavaScript 式としては扱いません。
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>属性変換を省略して示した例です。完全な出力は整形され、Fragment ラッパーを含みます。
構造と動作
HTML 断片を解析してから変換します。出力には Fragment ラッパーと、適切な箇所の自己終了構文を使います。
script 要素とインラインイベント属性は削除します。その動作を React コールバックに変換するわけではなく、残ったすべての URL やスタイルがアプリに適切だと保証するものでもありません。
結果を組み込む
JSX をコンポーネントの render や return 式にコピーします。動作は手動でつなぎ直してください。style オブジェクトで完全に表せない重複フォールバック宣言や !important なども確認が必要です。
テキスト入力は最大 1 MiB。CSS と HTML の変換は Worker 内で実行し、制限時間は 30 秒です。色のツールは sRGB を使用します。生成したスタイルはプレビューのため、実際のレイアウトでテストしてください。
よくある質問
完全な React コンポーネントを作りますか？
いいえ。出力は JSX マークアップです。コンポーネント本体、import、データ、動作はプロジェクトで追加してください。
script や onclick はどうなりますか？
script 要素とインラインイベント属性を除去します。実行したり React イベントハンドラーに書き換えたりはしません。
本文の波括弧が文字のままなのは？
入力は HTML として解析します。波括弧は JSX 用にエスケープし、評価対象の式にはしません。
インラインスタイルは完全に変換できますか？
一般的な宣言は React のスタイルプロパティになります。ただし重複フォールバックや !important は、JavaScript の style オブジェクトでは正確に表せない場合があります。
SVG マークアップも変換できますか？
一般的な属性を React 名に変換します。ID、参照、アプリ固有の属性も含め、コンポーネントで結果をテストしてください。