Reactをアカデミックに習う1

参考はオライリーの「ReactJS by Example - Building Modern Web Applications with React」

リアクトは仮想DOMを持っていて、実際のDOMを書き換えるまえに最適化してくれるみたいです。一旦アカデミックに学習してみたいと思います。

# 1. 基本３要素　(ReactElement,ReactRender,React.createClass)
### ReactElement：
- reactインターナルで代表して利用されるDOM element
- 一つのdivelementを作成
- 簡単にspan,div,h1などのhtmlエレメントにやReact.createClassで作成されたコンポーネントになることができる

```js
var App = React.createClass({
  render: function(){
    return(React.createElement("div", null, "Welcome to Adequate, Mike!"));
  }
});
React.render(React.createElement(App), document.body);
```
### ReactRender:
画面にオブジェクトを描画

```js
React.render(React.createElement(App), document.body);
```

### React.createClass:
- JSXとかいうXML-like書式を利用した場合の書き方
- createElementを利用する変わりにHTML直書き可能

```js
var App = React.createClass({
  render: function(){
    return <div>
     Hello, from Shawn!
    </div>;
  }
});
React.render(React.createElement(App), document.body);
```
上記は基本３要素を応用してテーブルを作成する方法です。

```js
  var data = [{ "when": "2 minutes ago",
              "who": "Jill Dupre",
              "description": "Created new account"
            },
            {
              "when": "1 hour ago",
              "who": "Lose White",
              "description": "Added fist chapter"
            },
            {
              "when": "2 hours ago",
              "who": "Jordan Whash",
              "description": "Created new account"
            }];

  var rows = data.map(function(row){
  return  <tr>
     <td>{row.when}</td>
     <td>{row.who}</td>
     <td>{row.description}</td>
   </tr>
  });
```
上記はデータマッピングの部分のサンプルです。
注目すべきはdata.mapを利用して直下に記述してあるテンプレートの部分にjsonの各フィールドを埋め込んでいるところです。
下側のHTMLのテンプレとdataObjectの中身をマッピングしてるのですね。

# 2 JSXありとなし版
どっちでも使えます。

```js
// render without JSX
render: function(){
    return(React.createElement("div", 
                               null, 
                               "Hello React World!"));
}
```

```
// render with JSX
render: function(){
    return <div>
      Hello React World
    </div>;
  }
```

# 3. 各要素へのデータ渡し

```
<App headings = {headings} data = {data} />
```
- 記述でAppのrenderメソッドにデータを渡します。
- Appクラス内のrenderメソッド内で利用できます。
- attributeはいくらでも追加できます。

| 1 | 2 |
|:-:|:-:|
| headings = {headings} | this.props.headings |
|  data = {data} | this.props.data |

```
var App = React.createClass({

  render: function(){
      var headings = this.props.headings.map(function(heading) {
          return(<th>
                 {heading}
                 </th>);
      });

      var rows = this.props.data.map(function(change) {
          return(<tr>
                   <td> {change.when} </td>
                   <td> {change.who} </td>
                   <td> {change.description} </td>
                 </tr>);
      });

      return(<table>
               {headings}
               {rows}
             </table>);
  }
});

React.render(<App headings = {headings} data = {data} />,
                      document.body);
```
# 4. ReactコンポーネントのDomRendering
このように実際のDOMオブジェクトにマッピングして描画が走ります。

````
ReactDOM.render(
　　　　　<App .../>, // Reactのコンポーネント呼び出し
　　　　　document.getElementById('container') // DomObjectの読み出し
);
````

# 5. DomRender実行順序
React.renderの実行順序が気になります。
ReactDOM.renderが複数ある場合には上から順番みたいです。

````
ReactDOM.render(
	<TitleOFCOntent />,
	document.getElementById('date')
);
ReactDOM.render(
	<FilterableProductTable />,
	document.getElementById('container')
);
```

# 6. スタイル渡し
コードが汚れるのでやりたくないですが急いでる時用に

```
var headingStyle = { backgroundColor: 'FloralWhite',
                     fontSize: '19px' 
                    };

RecentChangesTable.Heading = React.createClass({
  render: function() {
    var headingStyle = { backgroundColor: 'FloralWhite',
                         fontSize: '19px' };
    return(<th style={headingStyle}>{this.props.heading}</th>);
  }
});
```

#おまけ
必要性をあんまり感じないのだが知らないとはまりそうな
[CustomAttribute](https://www.safaribooksonline.com/library/view/reactjs-by-example/9781785289644/ch02s10.html)へのリンク