HTML → JSX 変換ツール

HTML をブラウザ内で有効な React の JSX に変換 — class は className に、空要素は自己終了に、インラインスタイルは style オブジェクトに。マークアップはデバイス上に留まります。

HTML を JSX に変換するツールは完全にブラウザ内で動作します。貼り付けたマークアップはデバイス上で解析・変換され、ArrayKit にアップロードされることはありません。

HTML 整形ツールを開く

HTML を JSX に変換 について

HTML を JSX に変換するツールは、HTML のかたまりを、React コンポーネントにそのまま入れられる JSX に変えます。React が求める属性を改名し — class は className に、for は htmlFor に — 残りをキャメルケース化し（tabindex → tabIndex、colspan → colSpan）、br、img、input のような空要素を自己終了にしてマークアップを有効にします。インラインの style="color:red" 文字列はキャメルケースのプロパティを持つ style={{ color: 'red' }} オブジェクトに解析され、HTML コメントは JSX コメントになります。コンポーネントのオプションをオンにすると、すべてがエクスポートされた関数で包まれます。デザイン、メールテンプレート、静的ページを React へ移植する開発者のために作られています。すべての変換はブラウザ内で動作し、貼り付けたマークアップがデバイスから外に出ることはありません。

機能

HTML を JSX に変換 の使い方

  1. 左の入力ボックスに HTML を貼り付けます
  2. 右の出力パネルで変換された JSX を読みます
  3. 「コンポーネントで包む」をオンにして名前を付け、すぐ使えるコンポーネントにします
  4. JSX をコピーするか、.jsx ファイルとしてダウンロードします

例

入力

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

出力

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for は htmlFor に、class は className に、tabindex は tabIndex になり、空要素の <input> は自己終了します。

よくあるエラーとトラブルシューティング

よくある質問

どの HTML 属性が JSX 向けに改名されますか？
class は className に、for は htmlFor になります。多くの全部小文字の属性がキャメルケース化されます — tabindex は tabIndex、colspan は colSpan、maxlength は maxLength、readonly は readOnly — 一方 data-* と aria-* 属性は書かれたとおりに保たれます。
インラインの style 属性はどう変換されますか？
style="color: red; font-size: 12px" 文字列は React の style オブジェクト style={{ color: 'red', fontSize: '12px' }} に解析され、各 CSS プロパティがキャメルケース化されます。--brand のような CSS カスタムプロパティやベンダー接頭辞は保持されます。
<br> や <img> のような空要素を自己終了しますか？
はい。HTML の空要素 — br、img、input、hr、meta、link、source など — は自己終了で出力されます（<br />、<img … />）ので、JSX は有効になります。空の非空要素も自己終了されます。
変換中に HTML コメントはどうなりますか？
HTML コメントは JSX のコメント構文に書き換えられます。コメントのテキストにアスタリスク＋スラッシュの並びが含まれる場合は、JSX コメントを早く閉じてビルドを壊さないよう分割されます。
出力を React コンポーネントで包めますか？
「コンポーネントで包む」をオンにして名前を付けてください。ツールは JSX を返すエクスポートされた関数を出力し、複数の最上位要素はフラグメントで包んで、単一のルート要素にします。
onclick などのインラインのイベントハンドラーを変換しますか？
インラインのイベント属性はキャメルケース化されます — onclick は onClick、onchange は onChange — が、値は文字列のままです。コンポーネント内で、その文字列を実際のハンドラー関数に差し替える必要があります。

関連ツール

すべての ArrayKit ツール