タイトル通り、最近よく聞くしreact?やってみるか
と思って記事漁ったけど新旧入り混じって阿鼻叫喚の図になったので
実際には使うもの(es6とかexpressとか)の組み合わせも異なったので大変でした。

目標

expressでサーバ立てる。
reactを使う。
es6を使う。
browserifyで一緒にする。
gulpで自動化する。

必要な要素

要は何につまづいたかっていう

express
どうせならgulpで一緒にサーバも起動させたい。
reactを使う。
reactをes6で書いてgulpで一緒にコンパイルしてしまいたい。
es6を使う。
babelを使う...のだがbabelify7はオプションが必要。
browserifyを使う。
コンパイルしてbrowserifyまでしたい。
gulpを使う。
要はいろんな要素が絡み合っててめんどくさかったっていう話の記録。
（今gulpって使われてるのかな...ウェブ界隈早い怖い...）

インストール

グローバルで必要なもの
gulp
他にもあったよーな...
プロジェクトで必要なもの
gulp こっちも
babel-preset-2015 2016の方はよくわからんかった
babel-preset-react 上とこれはgulpでes6とreact（jsxファイル）を扱うよう...？
babelify es6をコンパイルするくん、普通にnpmインストールすると7系になってオプションが必要に（ハマった）
browserify requireをやってくれるくん
express 使ってもいいし使わなくてもいい
react 主役
react-dom 脇役（ハマった）
vinyl-buffer
vinyl-source-stream gulpのための何か
gulp-live-server gulpでサーバを起動するためのもの

とりあえずこれらをnpmでインストール

各ファイル

とりあえず動くとこまで

gulpfile.js

var browserify = require('browserify');
var gulp = require('gulp');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gls = require('gulp-live-server');

function errorHandler(err) {
    console.log('Error: ' + err.message);
}

gulp.task('browserify', () => {
    browserify('./src/index.jsx', {debug: true})
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    .on('error', errorHandler)
    .pipe(source('script.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./dist'))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('server', function() {
    var server = gls.new('./server.js');
    server.start();
});

gulp.task('watch', function(){
    gulp.watch('./src/*.jsx', ['browserify']);
    gulp.watch('./index.html', ['browserify']);
});

gulp.task('default', ['browserify', 'watch', 'server']);

まぁ、良くあるgulp
ファイル名については適宜それっぽい部分を書き換えればおk
見慣れないであろう部分について解説

.transform(babelify, {presets: ['es2015', 'react']})

babelify7系ではオプションとしてpresetsを指定する必要があるので
es2015とreactをそれぞれ指定。こいつらが先ほどnpmでインストールしたbabel-preset何ちゃら

gulp.task('server', function() {
    var server = gls.new('./server.js');
    server.start();
});

こいつでserver.js（中身はexpress周りのスクリプト、本題とは関係ないので割愛）を起動。

・・・expressあまり関係なかった。

src/index.jsx

import React from 'react'
import ReactDOM from 'react-dom'

class TestBox extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div className='testBox'>
        Hello, world!
      </div>
    );
  }
}

ReactDOM.render(
  <TestBox />,
  document.getElementById('container')
);

適当なjsxファイルを用意。
gulpを起動した時でもいいし、その後何かしらの変更点が加えられれば
自動的にこいつがコンパイルされるはず
注意すべき点はrenderはreact-domが担当していること。

あとは対象になるhtmlファイルを作ってあげる

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="dist/script.js"></script>
  </body>
</html>

こんな感じでやればidがcontainerのdivタグにscript.jsがうまいこと仕掛けてくれるはず。

これで目標達成めでたしめでたし
いやはやめんどくさかった。

gulpに自動化させてes6でreactを書いてexpressの上に表示させたいと思った。

目標

必要な要素

インストール

各ファイル