開発者 / React

HTMLからJSXへの変換ツール

HTMLをReact用のJSXに変換します。classをclassNameに、インラインスタイルをオブジェクトに変換し、空要素を閉じ、波括弧とコメントをエスケープします。コンポーネントでラップすることもできます。

HTMLからJSXへの変換ツール: HTMLを要素として解析し、React用に属性名（class、for、tabindex、readonly、maxlengthなど）を変更します。スタイルはキャメルケースのキーを持つオブジェクトになり、<br>や<img>などの空要素は閉じられます。テキスト内の波括弧と山括弧はエスケープされ、コメントは{/* */}に変換されます。また、フォームの値はdefaultValueとdefaultCheckedに変換されるため、フィールドを編集できます。テストページの出力はTSXとしてコンパイルされます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。

カテゴリ
開発者ツール
実行回数
ブラウザ内で
コスト
無料 · 登録不要
提供状況
すぐに使えます
HTMLをJSXに変換ローカル処理

完全にブラウザ内で実行します

  • <button>のonclick="send()"を削除しました。関数として、onClick={() => …}のように記述してください。

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

React向けに属性名を変更します（classはclassName、forはhtmlFor、tabindexはtabIndex）。スタイルはオブジェクトに変換され、空要素とvoid要素は閉じられ、コメントは{/* */}になり、フォームの値はdefaultValueに変換されるため、フィールドを編集できます。

変換後に行うこと

繰り返し使うマークアップをpropsを受け取るコンポーネントに変換し、ハードコードされたテキストを波かっこ内の変数に置き換えてください。また、インラインスタイルはCSSクラスや使用中のスタイリングシステムに移してください。スタイルオブジェクトはレンダリングのたびに再構築されるためです。

SVGアイコンには、propsをそのまま渡すコンポーネントを作成できるSVG to JSXを使用してください。先にコメントや余分な空白を削除するには、HTML minifierを使います。

つまずきやすい違い

JSXではルート要素が1つ必要なため、複数の要素はフラグメント（<>…</>）で囲まれます。すべての要素を閉じる必要があり、属性名はcamelCaseで記述します。また、{または}を含むテキストは{"{"}と記述する必要があります。これは変換ツールが自動で処理します。

使い方

  1. 単一の要素からページ全体のセクションまで、HTMLを貼り付けます。
  2. 必要に応じて、結果を名前付きコンポーネントでラップします。
  3. JSXをコピーし、警告に表示されたインラインイベントハンドラーを書き換えます。

プライバシーと制限事項

HTMLはブラウザ内で変換され、アップロードされることはありません。

関連ツール

SVGをJSXに変換HTML MinifierHTMLエンコーダー

よくある質問

onclick属性が削除されるのはなぜですか？

HTMLではonclick属性はコードの文字列ですが、Reactでは関数である必要があります。変換ツールは各属性を一覧表示するため、onclick="save()"をonClick={save}のように書き換えられます。

valueがdefaultValueに変わるのはなぜですか？

Reactのvalue属性はフィールドを制御コンポーネントにするため、onChangeハンドラーがないと入力できません。defaultValueなら初期テキストを設定しつつ、編集可能な状態を保てます。

SVGにも対応していますか？

はい。stroke-widthなどのSVG属性はstrokeWidthに変換されます。SVGファイル全体をコンポーネントに変換する場合は、SVGからJSXへの変換ツールがpropsを追加します。

無料ツール · ブラウザ内で · アカウント不要