Reactに挑戦してみる 11
概要
Reactに挑戦してみる11。動的コンポーネントで、本格的ぽい感じ。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
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