React 入門道場　~JSXってなんやねん~

3711 ワード
初心者 React JSX JSX テキストリンク

はじめに

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>

この２つの構文は見た目は違っても出力の結果は同じである。このことを等位構文と呼ぶ。
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要素を生成

React公式
日本一わかりやすいReact入門【基礎編】JSXの記法