React習得への道4

こんにちは！ジュンです！

今回も勉強したことをアウトプットしていきます。

今回はReactに欠かせないJSXについてです。

React習得への道1でも書きましたが、今回は詳細に書きます。

JSXとは

JavaScriptの中に、HTMLのような記法を書けるReactの仕組み。

実際の流れ

1,JSXを書く

2,ビルド時にJavaScriptに変換される

3,ブラウザで実行される

JSXの基本ルール

①JavaScriptの中で使う

returnの中にや変数の中で書く。

例：const title = <h1>Hello</h1>

②1つの要素で囲む（ルート要素（最も外側の要素）は1つでなければならない）

例：

return (

<>

<h1>A</h1>

<h2>B</h2>

</>
)

ダメな例：

return (

<h1>A</h1>

<h2>B</h2>
)

③属性の名前にJavaScriptの予約語が使えない

一部例：

④全てのHTMLタグを必ず閉じる

<br /><img />のようにHTMLだけだと省略できていたタグもJSXでは必ず閉じなければならない。

⑤JavaScriptの式をかくときは{}で囲わなければならない

例：

const name = ‘React’;

return <p>Hello {name}</p>

また、文とは何かしらの値を返すもののため、if文やfor文などは埋め込むことができない。