Node + React.js + gulpで快適コーディング


### node.jsをインストール

手順は省略。


### Sassをインストール

※Windowsは事前にRubygemの導入が必要
http://qiita.com/jnst@github/items/369e2e6204a99726d00f

$ sudo gem install sass

### Babelをインストール

$ npm install -g babel

### browserifyをインストール

$ npm install -g browserify

### gulpをインストール


http://qiita.com/kazukichi/items/884a1379eea5918689ed

gulpをインストール

$ sudo npm install -g gulp

gulpを実行するには

$ gulp


### プロジェクトを作成

$ npm init

$ npm install --save-dev gulp


### React.jsを入れる

$ npm install --save react react-dom

## ビルドする手順を整える

### Babel関連をインストール

$ npm install --save-dev babel-preset-react babel-preset-es2015 

### 各gulpプラグインを導入

$ npm install --save-dev gulp-react
$ npm install gulp-ruby-sass
$ npm install gulp-load-plugins
$ npm install browserify
$ npm install babelify
$ npm install gulp-sourcemaps
$ npm install gulp-webserver
$ npm install vinyl-buffer
$ npm install vinyl-source-stream
$ npm install watchify

#### 面倒なのでまとめて。

$ npm install --save-dev gulp-react gulp-ruby-sass gulp-load-plugins browserify babelify gulp-sourcemaps vinyl-buffer vinyl-source-stream gulp-webserver watchify


### いろいろなものを配置していこう。

##### ここを公開にする
$ mkdir public

##### ここにCSCCファイルを入れる
$ mkdir scss

##### ここにソースファイルを入れる
$ mkdir src



### これで基本的な準備は OK!なはず。


## Visual Studio Codeを使ってビルドをする。

#####インストールはこちら

https://www.visualstudio.com/ja-jp/products/code-vs.aspx

### なぜVisual Studio Code?

- 欲しいシンタックスはだいたい入っている。
- 標準でES2015記載に対応
- コマンドでビルド実行と結果のコンソールを出せる。
- なんとEmmetまで対応！(最重要

### ディレクトリをVisual Studio Code(以下VSCode)で開く。

#### ビルドの設定をする。
Windows 
Ctrl + Shift + B

Mac
Command + Shift + B


そうすると、ビルド設定してないけど？
と言われるのでConfigureする。

そうすると多分以下のようなものが作られる。

```javascript:.vscode/tasks.json
{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": []
}
```

ので、以下のように変える

```javascript:.vscode/tasks.json
{
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "args": [],
            "isBuildCommand": true,
            "problemMatcher": "$msCompile"
        }
    ]
}
```

### gulpの設定ファイルを書く

```javascript:gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    react = require('gulp-react'),
    $ = require('gulp-load-plugins')({
      
    })
;
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var webserver = require('gulp-webserver');

// sassのコンパイル
gulp.task('sass', function () {
  return sass("scss/*")
    .on("error", sass.logError)
    .pipe(gulp.dest("./public/style"));
});

// browserifyのコンパイル
gulp.task('browserify', function(){
  
  browserify('./src/app.jsx', {debug: true})
    .transform(babelify.configure({
      presets: ["es2015","react"]
    }))
    .bundle()
    .on("error", function(err){
      console.log("Error : "+err.message);
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./public/js'));
    
});

// 保存されるたびにビルドしたい
gulp.task('watch', function(){
  gulp.watch('./src/*.jsx', ['browserify']);
  gulp.watch('./scss/*.scss', ['sass']);
})

// webserverを立ち上げる。
gulp.task('webserver', function(){
  gulp.src('./public')
    .pipe(webserver({host: "127.0.0.1", liverload:true}));
});

gulp.task("default", [
  "sass",
  "browserify",
  "watch",
  "webserver"
]);

```

### これでだいたいOK。あとはHTMLとjsコードを書こう。

```html:public/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>react sample</title>
</head>
<body>
	<div id="main_content"></div>
	<script src="./js/bundle.js" ></script>
</body>
</html>

```


#### 魔法のじゅもん

```html:public/index.html
!>div#main_content
```

これ入れてTabキー押すと多分幸せになれる。


## ここからが最重要。

```javascript:src/app.jsx
import React from "react"
import ReactDOM from "react-dom"

export class CommentBox extends React.Component{
	
	constructor(props){
		super(props);
	}
	
	
	render(){
		
		return (
			<div>こんにちは！今日はいい天気ですね。</div>
		);
	}
}


ReactDOM.render(
	<CommentBox />
	, document.getElementById("main_content")
);

```

さて、ここでおもむろにブラウザを立ち上げ、

http://localhost:8000

にアクセスしてみてください。
（もしかしたらポートが違うかも。）

画面内に

「こんにちは！今日はいい天気ですね。」

と出ていればOK。