ReactをRailsと共に使う方法

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

- 以下が導入手順です。

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

```ruby
gem 'react-rails'
gem 'webpacker'
```

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

```console
$ 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`下に作成していきます。

```jsx: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コンポーネントに情報を渡します。
_コンポーネントの名前を第一引数、渡す値を第二引数とすることで指定したコンポーネントに値を渡すことができます。_

```erb:views/index.html.erb
<%= react_component('HelloMessage', name: 'Mike') %>
```
_コントローラー上で定義されたインスタンス変数を渡すこともできる。_

```erb:views/index.html.erb
<%= react_component("ComponentExample", {posts: @posts}) %>
```
_渡す要素を指定することもできる。_

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

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

- 以下が導入手順です。

###1.nodeのインストール
必要となるJSのdependenciesをインストールする為の[npm](https://www.npmjs.com/)を利用する為に[node](https://nodejs.org/en/)のインストールを行います。

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

```ruby
gem "react_on_rails"
```

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

```console
rails generate react_on_rails:install
```

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

```console
bundle && npm install
```

###5.foremanと共にRailsのサーバーの立ち上げ。
foremanと共にRailsのサーバーの立ち上げを行います。Railsのサーバーに加え、Webpackを利用する為に[foreman](https://qiita.com/7kaji/items/6a59977d2ad85604e7fd)を使用します。

```console
foreman start -f Procfile.dev
```

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

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

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

```erb: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](https://qiita.com/k-penguin-sato/items/adba7a1a1ecc3582a9c9)
[Reactチュートリアル](https://reactjs.org/tutorial/tutorial.html)

また、サンプルとして `Rails` + `React` + `Docker` + `GraphQL` を組み合わせて設計した[アプリ](https://github.com/K-Sato1995/Rails_React_GraphQL_Docker_Boilerplate)を作成しました。
ディレクトリ構成等で参考になればと思います。

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


#参考
[3 ways to use React with Ruby on Rails 5](https://learnetto.com/blog/3-ways-to-use-react-with-ruby-on-rails-5)
[4 Easy Ways to Integrate React.JS with Ruby on Rails](https://www.icicletech.com/blog/4-easy-ways-to-integrate-reactjs-with-ruby-on-rails)