Rails
reactjs

Rails + React + Browserify の環境構築

More than 3 years have passed since last update.

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