---
title: React.jsのアプリをbrowserify/gulpで作る
tags: ["Browserify", "Gulp", "JavaScript", "React.js"]
categories: ["Programming", "JavaScript", "Framework", "React.js"]
date: 2015-03-03T15:06:00Z
updated: 2015-03-03T15:06:00Z
---
React.jsを使うときのひな形としてメモ
とりあえず小さく。
### プロジェクト作成
``` console
$ mkdir -p hello-react/src
$ cd hello-react
$ npm init
$ npm install --save-dev browserify gulp vinyl-source-stream react reactify
```
### gulpfile.js作成
``` javascript
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var reactify = require('reactify');
gulp.task('browserify', function () {
return browserify('./src/index.js', {
debug: true,
transform: [reactify]
})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('src/*.js', ['browserify']);
});
```
### HelloWorldアプリ
#### `src/components.js`
``` javascript
var React = require('react');
var HelloWorld = React.createClass({
render: function () {
return (
React.js Sample
);
}
});
var Display = React.createClass({
render: function () {
return (Hello World!
);
}
});
module.exports = HelloWorld;
```
#### `src/index.js`
``` javascript
var React = require('react');
var HelloWorld = require('./components.js');
React.render(
,
document.getElementById('example')
);
```
#### `hello.html`
``` html
```
### ビルド
``` console
$ gulp browserify
```
`hello.html`を開けば
開発中は
``` console
$ gulp watch
```
でjsが変更されたらビルドされる。
ファイル圧縮したい場合は、[こちら](http://blog.ik.am/#/entries/309)の設定を追加すれば良い。
### rest.jsを使う
[前の記事](http://blog.ik.am/#/entries/324)で紹介したように、HTTPクライアントでrest.jsを使いたい。
``` console
$ npm install --save-dev rest
```
で、`components.js`を以下のように修正
``` javascript
var React = require('react');
var rest = require('rest');
var mime = require('rest/interceptor/mime');
var client = rest.wrap(mime);
var HelloWorld = React.createClass({
render: function () {
return (
React.js Sample
);
}
});
var Display = React.createClass({
getInitialState: function () {
return {id: 0, content: 'Now Loading...'};
},
componentDidMount: function () {
client({path: 'http://rest-service.guides.spring.io/greeting'})
.then(function (response) {
this.setState(response.entity);
}.bind(this));
},
render: function () {
return (
| ID | {this.state.id} |
|---|
| CONTENT | {this.state.content} |
|---|
);
}
});
module.exports = HelloWorld;
```
再度ビルドして、`hello.html`を開くと、
できたくさい。
[動くサンプル](http://blog.ik.am/api/v1/files/34fd696b-0846-4527-af47-8dae02e4f197/hello.html)
これでReact.jsを使ったアプリのひな形ができた。