Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Reactに挑戦してみる 12

概要

Reactに挑戦してみる12。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

配列要素を自動的に展開して表示するmapメソッド

reactではforが使えないので、代わりに、mapメソッドを使う。

// 配列としてオブジェクトに渡す
var tableData = [
    {id: 1, name: '山田太郎', area: '東京都港区', number: '8513321'},
    {id: 2, name: '鈴木次郎', area: '神奈川県横浜市', number: '1234567'},
    {id: 3, name: '田中さん', area: '東京都新宿区', number: '9898888'}
]

var DispTable = React.createClass({
    render: function(){
// map(function(person)の箇所で、mapメソッドを定義する。mapメソッドが、functionを引数にとっている。という意味のコード。 
        var tableBody = this.props.data.map(function(person){
            return (<tr key={person.id}>
                <td>{person.name}</td>
                <td>{person.area}</td>
                <td>{person.number}</td>
            </tr>);
        });
        return (<table className="regularTable">
            <thead>
                <tr>
                    <th>名前</th>
                    <th>地域</th>
                    <th>番号</th>
                </tr>
            </thead>
// ボディ部分は、mapメソッドを評価して返す。
            <tbody>{tableBody}</tbody>
        </table>);
    }
});

ReactDOM.render(
    <DispTable data={tableData} />,
    document.getElementById('content')
);

これは慣れるのちょっと時間かかりそうだな(^ ^;)

JSX, Javascript, React, HTMLの違いをある程度理解してる必要があるなぁ。