読者です 読者をやめる 読者になる 読者になる

あいつの日誌β

あいつの日誌です。

React Tutorial

開発環境の準備の仕方をまとめました。

概ね 入門 React ―コンポーネントベースのWebフロントエンド開発 から抜粋していますが一部自分のメモ用に修正しています。

開発環境

以下、私が実際に動作確認をした環境です。

% node -v 
v0.12.4
% direnv help | head -n 1
direnv v2.5.0

準備

% mkdir practice-react && cd $_
% npm init -f
% npm install --save-dev browserify reactify react uglify-js watchify

パスを通します。

% echo 'export PATH=node_modules/.bin:${PATH}' > .envrc
% direnv allow

確認

% which browserify
node_modules/.bin/browserify
% which uglifyjs
node_modules/.bin/uglifyjs
% which watchify
node_modules/.bin/watchify

package.json を編集

diff --git a/package.json b/package.json
index a6c5be4..081c652 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,18 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "browserify --debug index.js > bundle.js",
+    "build-dist": "NODE_ENV=production browserify index.js | uglifyjs -m > bundle.js",
+    "watch": "watchify --debug index.js -o bundle.js"
+  },
+  "browserify": {
+    "transform": [
+      [
+        "reactify",
+        {
+          "harmony": true
+        }
+      ]
+    ]
   },

準備完了です。

プロジェクトの作成

index.js という React + JSX ファイルを作成

% cat index.js
var React  = require('react');

React.render(<h1>Hello World</h1>, document.body);

続いて index.html を作成

% cat index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React + Browerrify デモ</title>
  </head>
  <body>
    このテキストは見えないはずです
    <script src="bundle.js"></script>
  </body>
</html>

この状態でブラウザで見てみます。まだ hello world は見えません。

% open index.html

ビルドしてからブラウザで見てみると hello world が表示されているはずです。

% npm run build
% open index.html

npm watch を実行しながらソースコードを編集する事ができます。

ライブラリを作成

コンポーネント用のディレクトリを作成

% mkdir components

comonents/app.js を作成します。

var React = require('react');

var App = React.createClass({
  render() {
    var list = this.props.data.map(obj => <li key={obj.id}>{obj.id}:{obj.name}</li>);
    return (
      <div>
        <ul>{list}</ul>
      </div>
    );  
  }
});

module.exports = App;

index.js を以下のように修正します。

var React = require('react'),
    App   = require('./components/app')
;

var data = [{
  id: 1,
  name: 'name1'
}, {
  id: 2,
  name: 'name2'
}
];

React.render(<App data={data} />, document.body);

npm run build を実行してブラウザで動作している事を確認します。

備考

reactify の harmony オプションを有効にしています。これは世の中に出回っているサンプルコードが harmony オプションが有効になっている前提で書かれているものを見かけるためです。

サンプルコードをコピーアンドペーストして動作させたい時に不便なのでそうしました。

またこの記事に登場するソースコードは以下を少し改変して使用しています。 http://qiita.com/advent-calendar/2014/reactjs