Facebook製JSフレームワークReactまとめVol.1 -Hello, World!-

Reactのドキュメントを気が続き限りまとめていく。


##Reactとは
公式ページからの引用と抜粋

```text:facebook.github.io/react
ReactはfacebookやInstagramで開発されたインターフェース用Javascriptライブラリで、データの変化が多い大規模アプリケーションを構築する際に発生する問題を解決するために作成された。  

ReactはMVCフレームワークではなく、一般的にMVCでいうVとして使用される。  

多くのフレームワークで使用されているテンプレートを使用することなく、コンポーネントにまで分解してインターフェースを構築する手法をとっていて、これによって拡張やメンテナンスが簡単となった。
```

Fluxと呼ばれるアーキテクチャに基づいているらしいが、これはまた今度。

とりあえずはコードで理解したほうが早いと思う。

## Hello, world!
```html
<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
```

###結果
```
Hello, world!
```
###説明

ReactはJSXというシンタックスを使用することを推奨しているのでJSXを使用するが、
これはそんなにややこしいものではなく、XML的な記法で直感的。
ただ、このJSXをコンパイルするためにJSXTransformer.jsを使うのだが、
JSXのパースに必要なコメント文```/** @jsx React.DOM */```を書かなければならない。

そして、```React.renderComponent()```によって```<div id="example"></div>```の中に```<h1>Hello, world!</h1>```がレンダリングされる。

```js
React.renderComponent(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
```

##モジュール化
```js
/** @jsx React.DOM */

var Name = React.createClass({
  render: function() {
    return (
      <p>Mr. hoge</p>
    );
  }
});

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div>
      <p>Hello, World!</p>
      <Name/>
      </div>
    );
  }
});
        
React.renderComponent(
  <HelloWorld/>,
  document.getElementById('example')
);
```

###結果
```
Hello, World!
Mr. hoge
```

コンポーネント(いわゆるモジュール)は```React.createClass()```で作成し、レンダリングするメソッド```render()```の返り値にテンプレートを記述する。  
モジュールはネストすることが出来て、親となる要素のコンポーネントに子コンポーネントを代入した変数をJSXのシンタックスで記述すれば良い。
今は```Name```が```HelloWorld```の中にレンダリングされ、それがさらに```div#example```の中にレンダリングされている感じ。

##JSXシンタックス
ReactでXMLライクなJSXを使用する理由として以下の３つがあげられている。

- DOMの構造を視覚的に表現しやすい
- デザイナーでも簡単にいじれる
- MXMLやXAMLを使ったことがある人に馴染みがある

```
CommentBox(プロパティpropがhogeという値を持っているとする)
 -CommentList
```
というような構成で、CommentBoxの子要素にCommentListがある場合、以下の様な記述になる。

```
<CommentBox prop={hoge}><CommentList/><CommentBox>
```
視覚的にCommentListがCommentBoxに内包されていることがわかると思う。  
また、注意する点として、```<Parent><Child/></Parent>```のように、子要素を持っていない場合(ここでいうChild)は```<Child>```ではなく```<Child/>```としなければならない。

##コンポーネントのプロパティ
```js
/** @jsx React.DOM */

var Name = React.createClass({
  render: function() {
    return (
      //プロパティを代入する
      <p>Mr. {this.props.name} from {this.props.country}</p>
    );
  }
});

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div>
      <p>Hello, World!</p>
      //コンポーネントを作成する
      <Name name={'Hoge'} country={'Japan'}/>
      <Name name={'Bar'} country={'France'}/>
      </div>
    );
  }
});
        
React.renderComponent(
  <HelloWorld/>,
  document.getElementById('example')
);
```

###結果

```
Hello, World!
Mr. Hoge from Japan
Mr. Bar from France
```

先程も説明したが、コンポーネントに何らかの値を持たせたい場合はコンポーネントの属性に```プロパティ名={値}```を付け加えれば良い。  
このプロパティはコンポーネントのオブジェクトpropsに格納されるため、```this.props.プロパティ名```でアクセスできる。

##参考資料
http://facebook.github.io/react/docs/why-react.html
http://facebook.github.io/react/blog/2013/06/05/why-react.html
http://facebook.github.io/react/docs/getting-started.html
http://facebook.github.io/react/docs/tutorial.html
http://facebook.github.io/react/docs/jsx-in-depth.html

Reactを使ったアプリケーション
http://qiita.com/ytakzk/items/bc317c786fcdd0612498