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をインストール

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を使ってビルドをする。

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

なぜVisual Studio Code?

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

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

ビルドの設定をする。

Windows
Ctrl + Shift + B

Mac
Command + Shift + B

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

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

.vscode/tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": []
}

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

.vscode/tasks.json

{
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "args": [],
            "isBuildCommand": true,
            "problemMatcher": "$msCompile"
        }
    ]
}

gulpの設定ファイルを書く

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コードを書こう。

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>

魔法のじゅもん

public/index.html

!>div#main_content

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

ここからが最重要。

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")
);

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

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

画面内に

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

と出ていればOK。