はじめに
Reactを学習していてJSXについて理解が浅かったので今回簡単ににまとめてみました。
JSXとは?
「JSX」とは、「JavaScript XML」の略であり、JavaScriptの拡張言語である。
Reactのコンポーネント内でマークアップ言語を記述するためのHTMLな構文が使用可。
なぜJSXを使用するのか?
Reactの特徴として、HTMLタグを埋め込むことが出来る.
ブラウザ上に画面描画する際にHTMLのドキュメント言語にJavascriptからHTML変換している。
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
例えば、上記の記述があったとしてこれらを読み込む際、ReactではReact.createElement構文を使用してどんなHTMLであるか定義しなければばらない。そうすると、毎回React.createElementを記述するのは大変になる
そんな時、JSXの構文で書いた方がスッキリする。
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
この2つの構文は見た目は違っても出力の結果は同じである。このことを等位構文と呼ぶ。
HTMLの記述に慣れているし、毎回React.createElement構文も書くのは大変なのでJSXを使用していきましょう!
JSXは何しているのか?
JSXはJavaScriptに変換される
コンパイル時、
1.JSX → React.createElementの式に変換
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
↓
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
2.React要素を生成