HTMLからJSXへの変換 — ReactコンポーネントへのHTML移植ガイド
HTMLをReactコンポーネントに移植する際には、属性名の変換・スタイルのオブジェクト化・void要素の自己閉じなど複数の変換が必要です。HTML to JSXコンバーターを使えばこれらを自動化できます。
HTMLとJSXの主な違い
JSXはJavaScript内でHTMLに似た記法を使えますが、いくつかの重要な違いがあります。最も頻出なのが`class`→`className`と`for`→`htmlFor`の変換です。`class`はJavaScriptの予約語であるため、ReactはDOMプロパティ名に合わせて`className`を使います。同様に`for`も`htmlFor`が正しいJSX記法です。
インラインstyleのオブジェクト記法
HTMLでは`style="color: red; font-size: 14px"`のように文字列で記述しますが、JSXではJavaScriptオブジェクトとして`style={{ color: 'red', fontSize: '14px' }}`の形式で渡します。CSSプロパティ名はキャメルケースに変換します（font-size→fontSize、background-color→backgroundColor）。値は文字列として渡す必要があります（数値はpx省略可）。
Void要素の自己閉じタグ
HTMLでは`<img src="x">`や`<input>`のようにvoid要素（内容を持てない要素）は終了タグなしで記述できますが、JSXではXMLルールに従い`<img src="x" />`のように自己閉じタグが必須です。対象はimg・input・br・hr・link・meta・area・base・col・embed・param・source・track・wbrなどです。
イベントハンドラの変換
HTMLのイベント属性`onclick`・`onchange`・`onsubmit`などは、JSXでは`onClick`・`onChange`・`onSubmit`のようにキャメルケースで記述します。また、HTMLでは属性値に直接JavaScriptコードを書きますが（`onclick="handleClick()"`）、JSXでは関数参照を渡すのが一般的です（`onClick={handleClick}`）。