browserify-railsとreact-railsでseedプロジェクトを作る

seedプロジェクトを作っておくとなにかと便利。
ということで、browserify-railsとreact-railsでモダンな環境をrails上に構築してみます。

browserify-railsを採用したのは、ここの記事に影響ですね。

Railsのプロジェクトを作る

$ rails new react-browserify-rails-seed -T -B

react-railsとbrowserify-railsを追加する

react-railsとbrowserify-railsをGemfileに追加します。

$ vi Gemfile
... (snip) ...
gem 'react-rails'
gem 'browserify-rails'
... (snip) ...

bundle installします。

$ bundle install --path vendor/bundle

Nodeモジュールを追加する

package.jsonを初期化します。入力は適当に。

$ npm init

react-railsをインストールするとReact関連のライブラリもインストールされますが、それは使わず、npmでインストールした方を使います。

$ npm install --save react react-dom

$ npm install --save-dev babelify browserify browserify-incremental reactify babel-preset-es2015 babel-preset-react babel-plugin-add-module-exports

browserify-railsの設定をする

config/initializers/assets.rbに、browserfiy-railsのコマンドラインを設定します。

Rails.application.config.browserify_rails.commandline_options = [
  '-t babelify',
  '-t reactify --extension=".js.jsx"'
]

同時に、.bablercにプリセットの設定をしておきます。

{
  "presets": ["es2015", "react"],
  "plugins": ["add-module-exports"] 
}

Reactの環境をインストールする

$ bundle exec rails g react:install

app/assets/javascripts/application.jsとapp/assets/javascripts/components.jsをちょっと手直しします。 前述しましたが、react-railsでインストールされたreactは使わないので削除したりしています。

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 0c09f83..d324746 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,7 +13,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require react
-//= require react_ujs
 //= require components
 //= require_tree .
diff --git a/app/assets/javascripts/components.js b/app/assets/javascripts/components.js
index 9ce7a4f..a541d47 100644
--- a/app/assets/javascripts/components.js
+++ b/app/assets/javascripts/components.js
@@ -1 +1,2 @@
-//= require_tree ./components
+//= require_self
+//= require react_ujs

ReactでHello Worldしてみる

ここまでで環境は整ったので、お試しのReactのコンポーネントを作ってみます。

まずは、ReactコンポーネントをレンダリングするためのViewを用意します。

$ bundle exec rails g controller home index

Reactのジェネレータを使って、コンポーネントのひな形を用意します。

$ bundle exec rails g react:component hello

app/assets/javascripts/components/hello.js.jsxを手直しします。生成されたコードをES2015で書き換えています。

import React from 'react'

export default class Hello extends React.Component {
  render() {
    return <div>Hello React</div>;
  }
}

Helloコンポーネントにアクセスできるよう、app/assets/javascripts/components.jsからrequireします。 ReactとReactDOMをwindowに生やしているのは、react_componentヘルパーからアクセスできるようにするためです。

diff --git a/app/assets/javascripts/components.js b/app/assets/javascripts/components.js
index a541d47..3cc9443 100644
--- a/app/assets/javascripts/components.js
+++ b/app/assets/javascripts/components.js
@@ -1,2 +1,6 @@
 //= require_self
 //= require react_ujs
+
+window.React = require('react');
+window.ReactDOM = require('react-dom');
+window.Hello = require('./components/hello');

動作確認してみます。bundle exec rails sして、http://localhost:3000/home/indexにアクセスしてみましょう。

ソースコード

ソースコードは以下です。

github.com