cloud9環境でReactの検証③ -変数の扱い- 

<b>2016/7/29 コード中のコメントとdivタグのclassNameの書き方が間違えていたので修正しました。</b>
<b>2016/9/17 関連記事情報を追加しました。</b>

続いて変数の扱いについて少し説明したいと思います。

1. React.createClassでの変数
-----
例えば、下記のようなコードを書いたとしましょう。

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

var UserBox = React.createClass({
    render: function(){
        return (
            <div className="userBox">
                <ul>
                    <li>No: 1</li>
                    <li>Name: Taro</li>
                    <li>Message: Hello</li>
                    <li>Age: 25</li>
                </ul>
                <ul>
                    <li>No: 2</li>
                    <li>Name: Jiro</li>
                    <li>Message: Good Bye</li>
                    <li>Age: 25</li>
                </ul>
                <ul>
                    <li>No: 3</li>
                    <li>Name: Kumi</li>
                    <li>Message: Thank you</li>
                    <li>Age: 25</li>
                </ul>
            </div>
        );
    }
});

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

ページは下図のように表示されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/7a596b03-af80-8233-2eac-f880b0355156.png" width=400px>

まあなんの変哲もない普通のページです（稚拙なhtmlを除いて）。
「Age」部分が全て"25"になっていますね。変数を定義して共通化したいと思います。以下のコードになります。

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

var UserBox = React.createClass({
    render: function(){
        var age = 25;
        return (
            <div className="userBox">
                <ul>
                    <li>No: 1</li>
                    <li>Name: Taro</li>
                    <li>Message: Hello</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: 2</li>
                    <li>Name: Jiro</li>
                    <li>Message: Good Bye</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: 3</li>
                    <li>Name: Kumi</li>
                    <li>Message: Thank you</li>
                    <li>Age: {age}</li>
                </ul>
            </div>
        );
    }
});

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

```React.createClass``` 内に```var age = 25;``` で定義しておくと、render内で```{age}``` と記載することで使用可能です。
では、```React.createClass``` の外に定義した変数はどうやって取り扱うのでしょうか。

2. Props
-----
いきなり答えから書きます。下記コードを見てください。

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

var input_data = [
        {no:1, name:"Taro", message:"Hello"},
        {no:2, name:"Jiro", message:"Good Bye"},
        {no:3, name:"Kumi", message:"Thank you"}
];

var UserBox = React.createClass({
    render: function(){
        var age = 25;
        return (
            <div className="userBox">
                <ul>
                    <li>No: {this.props.user[0]["no"]}</li>
                    <li>Name: {this.props.user[0]["name"]}</li>
                    <li>Message: {this.props.user[0]["message"]}</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: {this.props.user[1]["no"]}</li>
                    <li>Name: {this.props.user[1]["name"]}</li>
                    <li>Message: {this.props.user[1]["message"]}</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: {this.props.user[2]["no"]}</li>
                    <li>Name: {this.props.user[2]["name"]}</li>
                    <li>Message: {this.props.user[2]["message"]}</li>
                    <li>Age: {age}</li>
                </ul>
            </div>
        );
    }
});

// id='content'に<UserBox />を埋め込む
ReactDOM.render(
    <UserBox user={input_data} />,
    document.getElementById('content')
);
```

Reactでは親のコンポーネントから子のコンポーネントに値を渡すことが可能です。
子のコンポーネントに値を渡しているコードは下記となります。
```input_data``` を```user``` という名前で子コンポーネントに渡しています。

```<UserBox user={input_data} />,```

受け取った値は```{this.props}``` と記述することで、子コンポーネントで取り扱うことが可能となります。例ではuserという名前で渡しているため、```this.props.user``` で取り扱いが可能です。

変数の取り扱いについては以上となります。

それにしてもせっかくinput_dataを配列で定義しているのに、ほぼべた書きに近い記述になってしまっていますね。次章ではループ文の扱いについて説明していきたいと思います。

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/0e5e8965668051157901)
[cloud9環境でReactの検証④ -ループ-](http://qiita.com/tomine3/items/ccffb50fad8d7e890379)
[cloud9環境でReactの検証⑤ -Ajax、state管理-](http://qiita.com/tomine3/items/f817c62aa88d8a21df7d)