JSXについて

react

Reactで利用するJSXについてのお勉強です。

JSXって?

JSXは、JavascriptをXMLのように扱えるようにする拡張機能のようなもので、JSXを使うことでJavaScriptのコード内にHTMLタグを埋め込むような記述が可能となります。

ReactとJSX

そんなJSXは、Reactを使う上で必須なものでは無いですが、JSXを使うことでコードの見通しが良くなるため、積極的に使われているようです。
JSXの記述そのままではWebブラウザが理解できないので、表示の際にはBabelというツールによって変換(トランスパイル)を実施します。
前回作成したcreate-react-appによるコードを例とすると、

これが

このようにJavaScriptの構文に変換されます。

確かに、JSXによる記述の方が分かりやすいですね。
なお、Babelによる変換は下記サイトを利用すると、変換前後のイメージがリアルタイムで確認できます。

Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript

JSXの書き方

以下、JSXの書き方についての色々です。

最上位の要素は必ず1つ

最上位に複数の要素を並べることは出来ません。必ず、1つのタグで囲まれている必要があります。
例えば、

な書き方はNGで、このような場合は divタグで囲って以下のようにしてあげる必要があります。

これだと余計なdivタグが増えてイヤな場合もありそうなので、そういった場合はReact.Fragmentタグで囲むと回避できます。

class属性は、className属性にする

HTMLのclass属性は、className属性として記述する必要があります。Javascriptのclassと被るから、ですかね。

for属性は、htmlFor属性にする

これもclass属性と似たような感じですが、for属性は htmlFor属性として指定する必要があります。

{}内にはJavascriptを記述できる

例えば、以下のような感じで{}内にJavascriptの記述をすることが出来ます。

HTMLのコメントアウトは利用不可

HTMLのコメントアウト(<!−−〜ーー>)は利用できないので、{/* 〜 */}といった感じでJavascriptのコメントアウトで記述します。

他にも色々ありそうですが、一旦ここまでで次回へ。

コメント