cloud9環境でReactの検証② -コンポーネント- 

<b>2016/9/17 関連記事情報を追加しました。</b>

久しぶりに触ると、信じられないぐらい忘れていました。
思い出しながら執筆していきます。
（後React.jsではなくReactと記載する方がいいみたいですね）

1. Hello!World!
-----

まず、[cloud9環境でReact.jsの検証① -導入-](http://qiita.com/tomine3/items/e6390cd6691a95a8ea53) で書いたコードを見直していきます。

```javascript:app.js
import React from "react";
import ReactDOM from "react-dom";

var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
            </div>
        );
    }
});

// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);
```

Reactではコンポーネントを組み合わせてページを作っているようです。```render```メソッドを持ったJavascriptのオブジェクトを```React.createClass```に渡すことで、Reactコンポーネントを作成しています。```render```メソッドは、1つのコンポーネントを'''return'''する必要があります。
コードでいうと下記の部分になります。

```javascript
var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
            </div>
        );
    }
});
```

```ReactDOM.render``` では、コンポーネントのインスタンスを作成し、第2引数のDOMの要素にマークアップを挿入します。

```javascript
// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);
```

2. 複数のコンポーネント
-----
```render``` メソッドでは単一のコンポーネントしかreturnできませんが、下記のように記載することで、複数のコンポーネントを返すことができます。

```javascript:app.js
import React from "react";
import ReactDOM from "react-dom";

var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
                <Comment1 />
                <Comment2 />
            </div>
        );
    }
});

var Comment1 = React.createClass({
    render: function() {
        return(
            <div className="comment1">
                React is Wonderful!
            </div>
        );
    } 
});

var Comment2 = React.createClass({
    render: function(){
        return(
            <div className="comment2">
                Thanks!
            </div>
        );
    }
});

// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);
```

また、下記のように入れ子で記載することも当然可能です。
（なんかマトリョーシカみたいですね）

```javascript:app.js
import React from "react";
import ReactDOM from "react-dom";

var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
                <Comment1 />
            </div>
        );
    }
});

var Comment1 = React.createClass({
    render: function() {
        return(
            <div className="comment1">
                React is Wonderful!
                <Comment2 />
            </div>
        );
    } 
});

var Comment2 = React.createClass({
    render: function(){
        return(
            <div className="comment2">
                Thanks!
            </div>
        );
    }
});   

// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);
```

ページで確認すると下図のように表示されています。


<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/8d184595-56bb-f8a9-1714-6f66b36bc412.png" width=400px>

この記事については、この辺で終わりにします。
ほったらかすとかなり忘れることが分かったので、こまめに執筆しようと思います。

3. 引用
-----
[React チュートリアル](https://facebook.github.io/react/docs/tutorial-ja-JP.html)

4. 関連記事
-----
[cloud9環境でReactの検証① -導入-](http://qiita.com/tomine3/items/e6390cd6691a95a8ea53)
[cloud9環境でReactの検証③ -変数の扱い-](http://qiita.com/tomine3/items/1f6212a3a98f095ebabc)
[cloud9環境でReactの検証④ -ループ-](http://qiita.com/tomine3/items/ccffb50fad8d7e890379)
[Cloud9環境でReactの検証⑤ -Ajax、state管理-](http://qiita.com/tomine3/items/f817c62aa88d8a21df7d)