react-rails と webpacker を使って Rails アプリケーション上で React を動かす

Rails アプリケーション上で React を使う場合、何が必要なのかを知りたくなりました。

調べた所、最近では <a href="https://github.com/rails/webpacker" target="_blank" rel="nofollow noopener">webpacker</a> と <a href="https://github.com/reactjs/react-rails" target="_blank" rel="nofollow noopener">react-rails</a> の組み合わせで導入するのが簡単そうだったので、そちらを試してみました。

## 前提

### 検証環境

* Rails 5.1.6
* ruby 2.4.3
* Mac OS X 10.13.4

### 利用する Gem について

#### webpacker

webpacker は、 JavaScript のモジュールバンドラである <a href="https://webpack.js.org/" target="_blank" rel="nofollow noopener">Webpack</a> を Rails で簡単に利用できるようになる Gem のライブラリです。

<a href="https://github.com/rails/webpacker" target="_blank" rel="nofollow noopener">GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails</a>

#### react-rails

react-rails は、React を Rails 上で使いやすくするためのツールを搭載した Gem です。Webpacker や Sprockets の利用もサポートしています。

<a href="https://github.com/reactjs/react-rails" target="_blank" rel="nofollow noopener">GitHub - reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.</a>

## 検証の目標

今回は使い方の確認のため、react-rails の README にある<a href="https://github.com/reactjs/react-rails#get-started-with-webpacker" target="_blank" rel="nofollow noopener">Get started with Webpacker</a> を試してみようと思います。

## 検証手順

### rails サンプルアプリケーション作成

まずは Rails のサンプルアプリケーションを作成します。

```bash
$ rails new react-rails-example
$ cd react-rails-example
```

### Gem インストール

今回利用する webpacker と react-rails を Gemfile に追加し、 ```bundle install``` します。

```bash
$ vim Gemfile
```

```ruby:Gemfile
# 下記2つの Gem 追加
gem 'webpacker'
gem 'react-rails'
```

```bash
$ bundle install
```

### webpacker インストール

webpacker を利用するために必要な config ファイルや JavaScript のモジュールをインストールします。

```bash
$ rails webpacker:install 
```

### React インストール

webpacker で管理する形で、React.js をインストールします。

```bash
$ rails webpacker:install:react
```

### react-rails 初期設定

react-rails を使う前に、React の Component の読み込みパスなどの初期設定を行います。

```bash
$ rails generate react:install
```

### React の Component 作成

react-rails のコマンドを使って、React の Component を作成します。

```bash
$ rails g react:component HelloWorld greeting:string
```

このようなファイルが作成されます。

```javascript:app/javascript/components/HelloWorld.js
import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld
```

### React の Component 表示

#### Controller 作成

上記で作成した Component を画面に表示するために、検証用の Controller を作成します。

```bash
$ rails generate controller Welcomes
```

#### View 作成

view ファイルを編集します。

```bash
$ vim app/views/welcomes/index.html.erb
```

react-rails をインストールすることで利用できるようになる ```react_component``` <a href="https://github.com/rails/webpacker#usage" target="_blank" rel="nofollow noopener">helper</a> で、先程生成した ```HelloWorld``` Componentを指定します。
props も 指定できます。

```ruby:app/views/welcomes/index.html.erb
<%= react_component("HelloWorld", { greeting: "Hello" }) %>
```

#### routes 編集

root にアクセスした時の view を React の View になるよう切り替えます。

```
$ vim config/routes.rb
```

```ruby:config/routes.rb
Rails.application.routes.draw do
  root 'welcomes#index'
end
```

#### javascript_pack_tag 指定

Rails が webpack によりトランスパイルされた JavaScript のファイルを読み込めるよう、webpacker の ```javascript_pack_tag``` helper を指定します。
こちらにより先程の React のサンプル Component ファイルも Rails で読み込めるようになります。

```app/views/layouts/application.html.erb
<%= javascript_pack_tag 'application' %>
```

#### webpack-dev-server 起動

```webpack-dev-server``` を起動します。
```webpack-dev-server``` とは、webpack の開発用サーバーで、JavaScript  ファイルを webpack でトランスパイルしつつ、JavaScript のファイルに変更があるとホットリロードのような形でトランスパイルし直してくれる便利なサーバーです。
webpacker をインストールすると併せて使えるようになります。

```bash
$ bin/webpack-dev-server
```

#### Rails アプリケーション起動

```bin/webpack-dev-server``` を起動した状態で、Rails アプリケーションを起動します。

```bash
$ rails s
```

#### 画面確認

```http://localhost:3000``` にアクセスし、画面に 「Greeting: Hello」 が表示されればOKです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/dbcc709d-f225-63ec-d485-c6dcd7535901.png)

## 終わりに

今回はチュートリアルをたどった形になりましたが、README や ドキュメントを読んで他にどんな使い方ができるかもっと試してみようと思います。

## 参考URL

* <a href="https://github.com/rails/webpacker" target="_blank" rel="nofollow noopener">GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails</a>
* <a href="https://github.com/reactjs/react-rails" target="_blank" rel="nofollow noopener">GitHub - reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.</a>
* <a href="https://qiita.com/mugi_uno/items/8e21ed4472577dc19cea" target="_blank" rel="nofollow noopener">Rails5+webpacker+Reactを試してみた</a>
* <a href="https://qiita.com/gcfuji/items/8b56fd1855a891734204" target="_blank" rel="nofollow noopener">webpackerでRailsにReactを導入するまでの手順書</a>
* <a href="https://qiita.com/joe-re/items/96f12dda4a62470d1d7c" target="_blank" rel="nofollow noopener">react-railsを使ってReactのTutorialをやってみる</a>