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
