とりあえずやったことをコードレベルでメモっておきたかった。
インストール
React本体
mkdir react && cd react
npm install react
Add-on的な
- react-tools
- react-rooter
をとりあえず入れる。
npm install react-tools react-rooter
デプロイとか
- browserify
- reactify
- gulp
- browser-sync
- vinyl-source-stream
を一気にインストールする。
npm install browserify reactify gulp browser-sync vinyl-source-stream
Gitも入れる
やらかした時に戻れた方がいいもんね。
git init
.gitignoreでライブラリを管理外にしておく
node_modules/
gulpfile.js
構築準備
gulpの設定
サーバー準備したり、Browserifyの設定したり。
```
var gulp = require('gulp');
var browserify = require('browserify');
var browserSync = require('browser-sync');
var source = require('vinyl-source-stream')
gulp.task('default',
['browser-sync'],function(){
gulp.watch("./src/*.html", ['bs-reload']);
gulp.watch("./src/app.js",['browserify']);
}
);
// Static server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('browserify', function(){
return browserify({
entries: './src/app.js',
transform: ['reactify']
})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./build'));
})
```
この先生きのこる流れ
- gulpfileの設定
- react-rooterを使う
- 簡単なサンプルを作ってみる
- ビルドする