# React勉強会_vol.7

###### tags:`勉強会中のメモ`

## JSXについて

* 構文拡張
* やってること: React.createElement というメソッドのコールへの変換を前提に XML のタグとその組み合わせによるノードツリーを JavaScript の中でシームレスに書けるようにしてるだけ
* 本質的には ReactElement オブジェクトを生成するための式
* Reactでの関心の分離の単位がMVC のような技術の役割じゃなくて**アプリケーションの機能**
* パーツ: コンポーネントに分ける
* 流れ
* まずReact.createElement() のメソッドコールに変換され
* 最終的にReactElement オブジェクトを生成する

<MyComponent foo="bar">baz</MyComponent>
↓
React.createElement(MyComponent, { foo: 'bar' }, 'baz');
↓
{
    type: 'MyComponent',
    props: { foo: 'bar', children: 'baz' },
    key: null,
    ref: null,
}

## JSXの書き方

* 式なら書いて良い(値を返す)
* boolean,null,undefinedは出力されない
* 複数の要素が含まれるときにトップレベルがひとつの要素
* よく空タグが使われる

## JSXとコンポーネント

* props: コンポーネントを関数として考えたとき、その引数に相当するもの