Hello, React.js!! まずは何か表示してみる。

用意した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!!

って事で、表示されました。
まずは最初の一歩って事で。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください