Hello, React.js!! まずは何か表示してみる。
2015年2月5日
用意したhtmlは以下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello, React.js</title>
<script src="http://fb.me/react-0.12.0.js"></script>
</head>
<body>
<div id="content"></div>
<script src="/dest/index.js"></script>
</body>
</html>
用意したjsは以下
var Hello = React.createClass({
render: function() {
return (
<div className="message">
Hello, react.js!!
</div>
);
}
});
React.render(
<Hello />,
document.getElementById('content')
);
現在のtreeは以下。
(staticはDocumentRootです。)
. ├── react │ └── index.js ├── static │ ├── index.html
jsx -> jsにコンパイル
jsx --harmony react static/dest
上記のコマンドだと、jsを書き換える度に叩かないといけないので、以下のようにする。
jsx --watch react static/dest
これ、”–watch”オプションをつけて起動したままにしとくと、react以下にあるファイル(index.js)を書き換えた時に自動でコンパイルしてくれるみたいです。
で、dest以下にindex.jsが生成されました。
. ├── react │ └── index.js ├── static │ ├── index.html │ ├── dest │ │ └── index.js
これで、index.htmlをブラウザで表示してみます。
Hello, react.js!!
って事で、表示されました。
まずは最初の一歩って事で。