ReactをRailsと共に使う方法

#概要
ReactをRuby on Railsと用いる方法を簡単な導入手順と共に書きます。
#1. react-rails gem を用いる。
おそらくgemを使用する場合は、このgemを利用するのがもっともシンプルで簡単な方法でしょう。
react-rails gemはRailsのAsset Pipelineを利用してJSXをRailsが認識できる形に処理します。

• 以下が導入手順です。

###1.gemのインストール

gem 'react-rails'
gem 'webpacker'

###2.react-railsのインストール
これによって、componentsと呼ばれるディレクトリー、manifestファイルが作り出され、またそれらを読み込む//= require componentsが元から存在していたassets/javascript/application.jsに追加されます。

$ bundle install
$ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install

###3.Reactコンポーネントの作成。
基本的な下準備は整ったので、Reactコンポーネントをapp/assets/javascripts/components下に作成していきます。

app/assets/javascripts/components/Hello.jsx

var HelloMessage = React.createClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

###4.作成したコンポーネントに必要な情報を渡す。
RailsのViewsからreact_component helperを利用してReactコンポーネントに情報を渡します。
コンポーネントの名前を第一引数、渡す値を第二引数とすることで指定したコンポーネントに値を渡すことができます。

views/index.html.erb

<%= react_component('HelloMessage', name: 'Mike') %>

コントローラー上で定義されたインスタンス変数を渡すこともできる。

views/index.html.erb

<%= react_component("ComponentExample", {posts: @posts}) %>

渡す要素を指定することもできる。

<%= react_component("ComponentExample", {posts: @posts.as_json(only:[:id,:title])}) %>

#2. [react_on_rails gem] (https://github.com/shakacode/react_on_rails)を用いる。
こちらもgemを用いた方法です。上記のreact-railsgemとの大きな違いとしてreact_on_railsgemではRailsに頼りきりになることが無い点が挙げられます。
こちらのgemではRailsのAsset PipelineをES6のコンパイルに用いる代わりに、WebpackがコンパイルしたJSファイルのみ使用します。

• 以下が導入手順です。

###1.nodeのインストール
必要となるJSのdependenciesをインストールする為のnpmを利用する為にnodeのインストールを行います。

###2.nodeのインストール後にgemを追加する。

gem "react_on_rails"

###3.gemのジェネレート。
これによって package.jsonとProcfile.dev filesとclientディレクトリーが作成されます。

rails generate react_on_rails:install

###4.npmのインストール。
execjsをインストールする為にbundleをもう一度回します。また、JSのdependenciesをインストールする為にnpmのインストールも行います。

bundle && npm install

###5.foremanと共にRailsのサーバーの立ち上げ。
foremanと共にRailsのサーバーの立ち上げを行います。Railsのサーバーに加え、Webpackを利用する為にforemanを使用します。

foreman start -f Procfile.dev

###6.Reactコンポーネントの作成。
ここまでで基本的な準備は完了したので、gemによって作り出されたclientディレクトリー下にコンポーネントを作成していきます。

app/assets/javascripts/components/Hello.jsx

var HelloMessage = React.createClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

###7.作成したコンポーネントに必要な情報を渡す。
ここはreact-rails gemと同様にviewsから必要な情報を指定したコンポーネントに渡すことが可能です。

views/index.html.erb

<%= react_component('HelloMessage', name: 'Mike') %>

#3. Rails(API)アプリとReactアプリを別々に作成する。
最もスタンダードと言っても良い方法では無いでしょうか。
この方法では、RailsをAPIとして作成し、全く別のReactのアプリケーションを作成します。
以下の様な利点があります。

• Railsの問題はRailsで、Reactの問題はReactでと完全に別々で対処できる。
• Reactアプリケーション以外にもモバイルアプリなど、他のクライアントにも対応することができるので多様な使い方ができ、よりスケールしやすい。

この方法ではRailsとReactアプリを別々で作成し、RailsがJSON化した情報を送り、クライアント側がリクエストで受け取る構造をとりますのでそれぞれの作り方は以下を参考にしてください。

Rails5で超簡単API
Reactチュートリアル

また、サンプルとして Rails + React + Docker + GraphQL を組み合わせて設計したアプリを作成しました。
ディレクトリ構成等で参考になればと思います。

• https://github.com/K-Sato1995/Rails_React_GraphQL_Docker_Boilerplate

#参考
3 ways to use React with Ruby on Rails 5
4 Easy Ways to Integrate React.JS with Ruby on Rails