HTML → JSX 変換ツール
すべてのツール
無料
HTML を貼り付けると、きれいな React JSX が得られます — class は className に、属性は camelCase に、style 文字列はオブジェクトになり、タグは自己閉じします。すべてブラウザ内で動作。無料。
すべてブラウザ内で動作します — マークアップがデバイスから外に出ることはありません。
1
{ }
JSX がここに表示されます
HTML → JSX 変換ツールについて
HTML to JSXコンバーターは、プレーンなHTMLマークアップをReact対応のJSXにリアルタイムで変換します。classをclassNameに、forをhtmlForに書き換え、ケバブケースやSVG属性をキャメルケースに変換し、インラインのstyle文字列をJSXのstyleオブジェクトに変換し、imgやbrのようなボイド要素を自己終了タグにします。これらはすべて、手作業なら自分で行う必要のある編集です。
スニペット、ページの一部、あるいはデザインツールからエクスポートされたマークアップを貼り付けると、入力するそばからシンタックスハイライト付きでJSXパネルが更新されます。オプションのラッパーを使えば、出力を名前付きの関数コンポーネントに変換できるので、追加編集なしでそのままReactプロジェクトに組み込めます。
このコンバーターは完全にクライアントサイドで動作するHTML to JSXツールです。マークアップはブラウザ内のJavaScriptによって変換され、端末の外に出ることはないため、独自テンプレートや社内ページにも安心して使用できます。
HTML → JSX 変換ツールの使い方
- HTMLを左側のパネルに貼り付けるか、Sampleをクリックして例を読み込みます。
- 入力・編集するたびにJSXパネルが即座に更新される様子を確認します。
- 関数コンポーネントとしてすぐ使えるものが欲しい場合は、Wrap in a componentを切り替えてコンポーネント名を設定します。
- Copyをクリックしてコードを取得するか、Downloadをクリックして Component.jsx として保存します。
- Clearを使って両方のパネルをリセットし、別のスニペットを変換します。
よくある質問
classをclassNameに、forをhtmlForに変更し、ハイフン付き属性（SVG属性を含む）をキャメルケースにし、インラインのstyle文字列をJSXのstyleオブジェクトに変換し、img、br、inputなどのボイドタグを自己終了させます。これにより出力は有効なJSXになります。
はい。Wrap in a componentを有効にしてコンポーネント名を選ぶと、変換されたマークアップを囲む完全な関数コンポーネントが生成され、そのままプロジェクトに貼り付けるか、.jsxファイルとしてダウンロードできます。
はい。style="margin-top: 10px"のようなstyle属性は、style={{marginTop: '10px'}}のようなJSXオブジェクトになり、各CSSプロパティはベンダープレフィックス付きのものも含めてキャメルケースに変換されます。
いいえ。変換はすべてブラウザ内で行われるため、マークアップが端末の外に出ることはありません。社内テンプレートや未公開ページも安全に変換できます。
はい、完全に無料です。アカウント登録もクレジット消費も、変換できるスニペット数の制限もありません。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。