HTML to JSX
HTMLマークアップをReactのJSX構文に変換します。属性、インラインスタイル、空要素を自動的に変換します。
適用された変換：
class→classNamefor→htmlForstyle="..."→style={{...}}- 空要素 (br、hr、img、input) は自己クロージング
- HTML コメントは {/* */} に変換されました
このツールについて
HTML to JSXは、標準的なHTMLマークアップをReactアプリケーション用の正しいJSX構文に変換するツールです。Reactコンポーネントを開発する際、HTMLスニペットをJSX形式に変換する必要があることがよくあります。その際、属性名の変更（classからclassNameへ）、インラインスタイルの処理方法の変更（文字列からオブジェクトへ）、void要素の適応が必要になります。このツールはこれらの変換を自動化し、時間を節約し、手動変換エラーを削減します。
このツールを使用するには、入力ボックスにHTMLコードを貼り付けて「変換」をクリックしてください。コンバーターは即座に有効なJSX出力を生成し、Reactコンポーネントに直接コピーして使用できます。HTML イベントハンドラー（onclickからonClickへ）、ブール属性（checked、disabled）、データ属性、CSSクラス名などの一般的な変換に対応しています。典型的な使用例としては、既存のHTMLテンプレートをReactに移行する、サードパーティのHTMLスニペットを統合する、またはモックアップから迅速にコンポーネントのJSXをスキャフォールディングすることが挙げられます。
このコンバーターはブラウザ内で完全に動作し、サーバーへのアップロードがないため、コードはプライベートのままです。複雑な動的テンプレートまたは条件付きレンダリングロジックは変換後も手動で微調整が必要な場合があることに注意してください。複雑な状態管理またはカスタムロジックを持つコンポーネントの場合、生成されたJSXは、さらに改良できる堅固な出発点として機能します。
よくある質問
コード実装
import re
def html_to_jsx(html: str) -> str:
jsx = html
# class -> className
jsx = re.sub(r'\bclass=', 'className=', jsx)
# for -> htmlFor
jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
# HTML comments to JSX
jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
# Self-close void elements
void_elements = ['area','base','br','col','embed','hr','img','input',
'link','meta','param','source','track','wbr']
for tag in void_elements:
jsx = re.sub(
rf'<{tag}(\s[^>]*)?>',
lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
jsx, flags=re.IGNORECASE
)
return jsx
html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.