JSXとは

Reactとは、JavaScriptのライブラリです。
Webサイトのフロント(見た目)部分を作ることができ、近年、良く使われている人気のライブラリです。

 

JSX

Reactは、JavaScriptで組みますがサイトに表示させる部分は、HTMLでコーディングします。

こちらのHTML部分をReactでは、JSXといいます。

 

例えば、以下のように入力します。

JSXは、return{}内に入力するHTMLのことです。

JSX

JSX

こちらに入力した内容は、ブラウザに表示されます。

JSXの表示結果

JSXの表示結果

JSXの注意点

JSXは、HTMLのように書きますが、HTMLとは違う部分があります。

◎複数行ではエラーになる

以下のように、要素が複数行になるとエラーになります。

エラー:複数行

エラー:複数行

そのため複数行になる場合は、divタグなどで全体をまとめてあげる必要があります。

複数行になる場合は、1つにまとめる

複数行になる場合は、1つにまとめる
◎imgタグの最後にスラッシュを入れる

HTMLでは、例えば<img src="img/sample.png" alt="サンプル">と、imgタグの最後にスラッシュ(/)が無くても問題はありません。

ただしJSXでは、スラッシュが無いとエラーになります。

imgタグは、最後にスラッシュが無いとエラーになる

imgタグは、最後にスラッシュが無いとエラーになる
◎コメントやJSXの中にJavaScriptを入力する際は、{}で囲む

・コメント

HTMLでコメントを書く際は、<!-- -->で囲みますが、JSXではこちらの方法は使えません。

JSXでは、コメントを入力する際、{/* */}で囲みます。

コメント入力

コメント入力

・JSXの中にJavaScriptを入力する

JSXの中にJavaScriptを入力する際にも使用します。

例えば、constで定義したテキストをJSX内に埋め込み、定義したテキストを表示させたい場合、定数を{}で囲み入力します。

定数をJSXに埋め込む

定数をJSXに埋め込む