Djangoroidの奮闘記

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

Reactに挑戦してみる 11

概要

Reactに挑戦してみる11。動的コンポーネントで、本格的ぽい感じ。

参考書籍

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

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

HTML, Reactのtableタグの違い

JSX

var SimpleTable = React.createClass({
    render: function(){
        return (<table border="1">
            <tr>
                <th>名前</th>
                <th>地域</th>
                <th>番号</th>
            </tr>
            <tr>
                <td>山田太郎</td>
                <td>東京都港区</td>
                <td>8513321</td>
            </tr>
            <tr>
                <td>鈴木次郎</td>
                <td>神奈川県横浜市</td>
                <td>000</td>
            </tr>
        </table>);
    }
});

ReactDOM.render(
    <SimpleTable />,
    document.getElementById('content')
);

これだとborderとかが設定されてないままでてきてしまう。その他、多数のerrorあり。 styleは、htmlの方で、設定してみる。

html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Radio Button Example</title>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  </head>

    <style>
        table.regularTable, th, td {
            border: 1px solid;
        }
    </style>

  <body>
    <div id="content"></div>
    <script type="text/babel" src="simpletable.js"></script>
  </body>
</html>

そして、JSXの方も以下のように修正してみる。

var SimpleTable = React.createClass({
    render: function(){
# ここのclassNameを指定するところ
        return (<table className="regularTable">
            <thead>
            <tr>
                <th>名前</th>
                <th>地域</th>
                <th>番号</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>山田太郎</td>
                <td>東京都港区</td>
                <td>8513321</td>
            </tr>
            <tr>
                <td>鈴木次郎</td>
                <td>神奈川県横浜市</td>
                <td>000</td>
            </tr>
        </tbody>
        </table>);
    }
});

ReactDOM.render(
    <SimpleTable />,
    document.getElementById('content')
);

ムーーー、ちょっとこれはややこしいなw