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する。
そうすると多分以下のようなものが作られる。
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": []
}
ので、以下のように変える
{
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "default",
"args": [],
"isBuildCommand": true,
"problemMatcher": "$msCompile"
}
]
}
gulpの設定ファイルを書く
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コードを書こう。
<!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>
魔法のじゅもん
!>div#main_content
これ入れてTabキー押すと多分幸せになれる。
ここからが最重要。
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。