RailsにReactを導入する

現状: Rails4.x以上でサービスを稼働している。 フロントエンドは.erbで記述している。JSはassets/javascriptという普通の構成

開発リソース: １人
目的: 既存のUI資産を残しつつ、ECMAScript6 + React + Reduxに置き換える
前提: react-router,react-railsを使う

React(ES6)をbabelでコンパイルする必要があるので、frontend/src/javascript 以下にjsxを書いていく。 gulpfileはこんな感じ

var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");
var concat = require("gulp-concat");


gulp.task('compile-es6',
  function() {
    browserify('./frontend/src/javaxcript/**/*.jsx', { debug: true })
      .transform(babelify)
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('app/assets/javascripts/components'))
  });

gulp.task('watch',
  function() {
    gulp.watch(__dirname + '/frontend/src/javascript/**/*.{js,jsx}', ['compile-es6'])
  });

コントローラー毎にレイアウトファイルを振り分ける作業があるんだけど、とりあえずHelloReactとか表示する。

// frontend/src/javascript/hello-react.jsx

import React from 'react'
export default class HelloReact extends React.Component{
  render() {
    return(
      <div>
        <h2>Hello React!</h2>
      </div>
    );
  }
}

class HelloReactController < ApplicationController
  def index
  end
end

# app/views/hello_react/index.html.slim
= react_component 'HelloReact'

react_component はreact-railsに用意されているhelperメソッド。複数のComponentを表示すると react_component 'header' react_component 'main' react_component 'footer' みたいになっていく。

適当にrouteを設定し、urlを叩くと、ヘッダーとフッター部分が.erbで、Hello Reactの部分がjsxで書いたviewが混在したものが表示される。