JSXとは
Reactとは、JavaScriptのライブラリです。
Webサイトのフロント(見た目)部分を作ることができ、近年、良く使われている人気のライブラリです。
JSX
Reactは、JavaScriptで組みますがサイトに表示させる部分は、HTMLでコーディングします。
こちらのHTML部分をReactでは、JSXといいます。
例えば、以下のように入力します。
JSXは、return{}内に入力するHTMLのことです。
こちらに入力した内容は、ブラウザに表示されます。
JSXの注意点
JSXは、HTMLのように書きますが、HTMLとは違う部分があります。
◎複数行ではエラーになる
以下のように、要素が複数行になるとエラーになります。
そのため複数行になる場合は、divタグなどで全体をまとめてあげる必要があります。
◎imgタグの最後にスラッシュを入れる
HTMLでは、例えば<img src="img/sample.png" alt="サンプル">と、imgタグの最後にスラッシュ(/)が無くても問題はありません。
ただしJSXでは、スラッシュが無いとエラーになります。
◎コメントやJSXの中にJavaScriptを入力する際は、{}で囲む
・コメント
HTMLでコメントを書く際は、<!-- -->で囲みますが、JSXではこちらの方法は使えません。
JSXでは、コメントを入力する際、{/* */}で囲みます。
・JSXの中にJavaScriptを入力する
JSXの中にJavaScriptを入力する際にも使用します。
例えば、constで定義したテキストをJSX内に埋め込み、定義したテキストを表示させたい場合、定数を{}で囲み入力します。