Rails + React + Browserify の環境構築

Rails で Sprockets を使いつつ Browserify で React を使えるような環境を構築したメモです。

前準備

• Browserify を使用するために nodejs, npm をインストールしておく必要があります。

Gem

• react-rails, browserify-rails をインストールします。

Gemfile

gem 'react-rails'
gem 'browserify-rails'

.gitignore

• node_modules を gitignore に追加します。

.gitignore

node_modules/

Npmパッケージのインストール

$ npm init
$ npm install --save-dev browserify browserify-incremental react react-dom reactify

Configの設定

• application.rb で browserify のコマンドラインオプションに reactify を設定。

application.rb

config.browserify_rails.commandline_options = "--transform reactify"

環境設定

react-rails のジェネレータでReactの環境を構築する。

$ rails g react:install

      create  app/assets/javascripts/components
      create  app/assets/javascripts/components/.gitkeep
      insert  app/assets/javascripts/application.js
      insert  app/assets/javascripts/application.js
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/components.js

application.js, components.js の内容を以下のように修正する。

• application.js から components を読み込み、react, react_ujs を削除する。

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require components
//= require_tree .

• components.js で require_self の後に react_ujs を読み込む。
• React 本体は browserify で require する。

components.js

//= require_self
//= require react_ujs

window.React = require('react');
window.ReactDOM = require('react-dom');

コンポーネントを追加する

app/assets/javascripts/components に JSX ファイルを作成する。

app/assets/javascripts/components/widgets.jsx

var React = require('react');

var Widgets = React.createClass({

  render: function() {
    return <div>Hello React</div>;
  }
});

module.exports = Widgets;

• components.js で追加した JSX を読み込む。

app/assets/javascripts/components.js

window.Widgets = require('./components/Widgets.jsx');

View にコンポーネントを設置

<%= react_component 'Widgets' %>

Herokuにデプロイ

ビルドパックで nodejs の後に ruby をビルドするように設定するだけ。

$ heroku buildpacks:add https://github.com/heroku/heroku-buildpack-nodejs.git
$ heroku buildpacks:add https://github.com/heroku/heroku-buildpack-ruby.git