本文へスキップ
AZ Tools

HTML → JSX コンバータ

HTML を React コンポーネントに移植する退屈な作業を書き換える手作りコンバータ：属性名の変更（`class`、`for`、`tabindex` など）、インラインイベントハンドラの大文字化（`onclick → onClick`）、void タグの自己クローズ（`<br>` → `<br />`）、HTML コメントから JSX コメントへ、そして `style="color: red; font-size: 14px"` を `style={{ color: 'red', fontSize: '14px' }}` オブジェクトリテラルに変換するオプション。

—
JSX
<>
  <div className="container">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" required />
    <button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
      Send
    </button>
    {/* footer */}
    <p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
  </div>
</>

クォートされた文字列属性値は文字列のまま；代わりに JS 式が必要なら、コピー後 JSX で変更してください。

使い方

  1. HTML スニペットを貼り付け。
  2. React コンポーネントの単一ルートが欲しい場合は fragment ラップオプションをトグル。
  3. JSX をコンポーネントファイルにコピー。

よくある質問

どの属性がリネームされる？
React がリネームするすべて：`class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`、加えてすべての `on…` イベントハンドラ。`aria-` と `data-` 属性は kebab-case のまま。
インラインスタイルに CSS 変数があったら？
`--` で始まるプロパティは文字列キーとしてクォートされ（`'--accent': 'blue'`）、JSX に残る。`-webkit-…` のようなベンダープレフィックス付きプロパティもクォートされる。
JavaScript を実行したりスクリプトを eval したりする？
しません。パーサーは小さな手書きスキャナ — `<script>` タグも他の要素と同様にテキストとして通過。変換は純粋に文字列レベル。

関連ツール

CSS to JS スタイルオブジェクトコンバーター

CSS 宣言ブロックを React/JS のインラインスタイルオブジェクトにブラウザ上で変換します。

開発 0 0

JSON to Kotlin データクラスコンバーター

JSON オブジェクトを型付きプロパティを備えた Kotlin データクラスにブラウザ上で変換します。

開発 0 0

JSON to C# クラスコンバーター

JSON オブジェクトを自動プロパティの型マッピング付き C# クラスにブラウザ上で変換します。

開発 0 0

JSON to Java クラス(POJO)コンバーター

JSON オブジェクトを型マッピングフィールドを備えた Java POJO クラスにブラウザ上で変換します。

開発 0 0

EditorConfig ジェネレーター

インデントスタイル・改行・文字セット・よく使う上書きを備えた .editorconfig ファイルをブラウザ上で作成します。

開発 0 0

HTML エンティティ エンコード / デコード

HTML 特殊文字 (& < > " ') をエスケープ、または エンティティを元の文字へ復号。

開発 0 0