参考にさせて頂いたページ
いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう! 【前編】 (2/3):CodeZine
バージョン
React v0.13.2
前回のreact_sample.htmlの記述内容
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
react_sample.jsの作成と記述内容
appディレクトリを作成して、その中にreact_sample.jsを作成した。
そのまま切り出してもよかったけど、ついでなのでcreateClassメソッドを使用した。
記述内容は以下の通り。
var App = React.createClass({
render: function() {
return (
<h1>Hello, world!</h1>
);
}
});
React.render(
<App></App>,
document.getElementById('example')
);
今回のreact_sample.htmlの記述内容
script要素のタイプはtype="text/jsx"
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script type="text/jsx" src="app/react_sample.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>