---
# System prepended metadata

title: React勉強会_vol.7
tags: [勉強会中のメモ]

---

# React勉強会_vol.7

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

## JSXについて

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

```javascript=
<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: コンポーネントを関数として考えたとき、その引数に相当するもの

