HTMLをJSX形式に変換するツール
オンラインでHTMLをReact JSX形式に変換できるコンバーター。インストール不要。
HTML to JSX について
標準の HTML を React 向けの JSX 互換マークアップに書き換えます。空要素を閉じ、予約された属性名を React 相当に変更し、インラインの style 文字列を camelCase プロパティ名を持つ style オブジェクト構文に変換し、真偽値属性を React の形式に正規化します。
使い方
1. HTML を入力ボックスに貼り付けます。 2. 変換をクリックすると、出力ボックスに JSX が生成されます。 3. コピーを使用して結果を React コンポーネントに取り込みます。
属性とスタイルの書き換え
自己閉じタグ（img、br、hr、input、meta、link、area、base、col、embed、source、track、wbr）は /> で閉じられます。class= は className= に、for= は htmlFor= になります。style="..." 文字列は style={{...}} となり、ケバブケースのプロパティは camelCase に変換され（font-family -> fontFamily）、float -> cssFloat となります。checked、disabled、readonly、required、autoplay、autofocus などの真偽値属性は正規化されます（readOnly、autoPlay、autoFocus）。
▶空要素は自動的に閉じられますか？
はい。img、br、hr、input、meta、link、area、base、col、embed、source、track、wbr は、入力 HTML での表記に関わらず自己閉じ形式（<img ... />）に書き換えられます。
▶インラインスタイルはどのように処理されますか？
style="font-size: 14px;" 属性は style={{fontSize: 14px}} に変換されます。ハイフン区切りの CSS プロパティは camelCase の React スタイルキーになり、特殊ケースの float と font-family は cssFloat および fontFamily にマッピングされます。
▶class は className に変換されますか？
はい。すべての class= 属性は className= に変更され、（ラベルなどで使われる）for= 属性は htmlFor= になり、React の予約語の慣例に従います。
▶HTML の検証は行いますか？
いいえ。変換器は正規表現による置換を行うもので、ドキュメントツリーを解析しないため、不正な HTML はそのまま通過します。変換前に入力が整形式であることを確認してください。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。