Rails5.1にReactを導入 | GROUP DEV BLOG

2018.05.25

プログラミング

Rails5.1にReactを導入

こんにちは、KSです。
今日は既存のRailsアプリにreact-railsとwebpackerというgemを使って、
Reactを導入する方法を書いてみます。

react-railsとwebpackerの場合

インストール

Gemfileに以下を追加して、bundle install

gem 'react-rails'
gem 'webpacker'

WebpackerのReactインストールの実行

rails webpacker:install
rails webpacker:install:react

これでReactに必要なフォルダやファイルが生成されてReactが入ります。
webpackerによりapp/javascript/packsにhello_react.jsxが生成されているのがわかると思います。
これはReactを使って、「Hello React」を表示させる簡単なものです。
これを使って、Reactが使えるようになったかを確認してみます。

Reactを使って「Hello React」を表示

コントローラー、ビュー、ルーティングを生成
rails g controller sample index

app/views/layouts/application.html.erbに以下のようにjavascript_pack_tagを追加

<!DOCTYPE html>
<html>
<head>
  <title>CalculatorReact2</title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= javascript_pack_tag 'hello_react' %>
</head>
<body>
  <%= yield %>
</body>
</html>

この状態でrailsサーバーを起動すると、「Hello React」が表示されます。

react-railsでのReactコンポーネントの作成

react-railsではReactコンポーネントを以下のコマンドで作成できます。
rails g react:component コンポーネント名

そうするとapp/javascript/component/ の配下にコンポーネント名.jsが生成されます。
例えば、rails g react:component calculator だと
app/javascript/component/calculator.jsが生成されます。

あとは好きなviewで

<% react_component ‘calculator’ %>

というようなview helperを記載しておくと、
app/javascript/component/calculator.jsを読み込んでくれます。

Viewでの読み込み

上記と合わせて、app/views/layouts/application.html.erbには

<%= javascript_pack_tag ‘application’ %>

を記載しておく必要があります。

webpackerのみの場合

react-railsを入れずに、webpackerのみでもReactを導入できます。
webpackerのみの場合、react_componentヘルパーは使えません。
また、通常どおりrailsサーバーを起動しても、Reactは動いてくれません。
railsサーバー起動後、別ターミナルで以下を叩きコンパイルするとReactを読み込んで反映されます。

./bin/webpack-dev-server

webpackerで読み込むコンポーネント

コンポーネントを入れるフォルダを作成
webpackerのみの場合、app/javascript/配下にはpacksフォルダしか生成されないので、
ここで任意のフォルダを作成します。
app/javascript/calculator/

コンポーネントファイルを作成

import React, { Component } from 'react';

class Calculator extends Component {
render() {
return (
<div>
<h1>Calculator is working!!</h1>
</div>
)
}
}
export default Calculator;

import React from 'react';
import ReactDOM from 'react-dom';
import Calculator from './calculator';

document.addEventListener('DOMContentLoaded', ()=> {
const container = document.body.appendChild(document.createElement('div'));
ReactDOM.render(<Calculator/>, container)
})

Viewでの読み込み

app/javascript/packs/calculator.jsを作成し、その中に読み込むフォルダを記載
import ‘calculator’

そうするとapp/javascript/calculator/ 配下のコンポーネントをimportします。

あとはapp/views/layouts/application.html.erbのHEADタグ内にreact-railsの時と同じようにjavascript_pack_tagを追加し、
app/javascript/packs/calculator.jsを指定してあげるとviewで読み込んでくれます。

<!DOCTYPE html>
<html>
<head>
<title>CalculatorReact2</title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= javascript_pack_tag 'calculator' %>
</head>
<body>
  <%= yield %>
</body>
</html>

導入方法は以上です。
比較的簡単にできると思うので是非試してみてください。

【記事への感想募集中！】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください！