Reactの環境とかデプロイとかにトライしたメモ

とりあえずやったことをコードレベルでメモっておきたかった。

インストール

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を使う
• 簡単なサンプルを作ってみる
• ビルドする

参考にした記事

• Gulp(React.js+Browserify)でyak shaving