React Rails を導入し、Ruby on Rails + React + ES6 の環境を作る

Ruby on Rails + React + ES6 の構成で環境を作ります。
ES6 で書いた React のコードは、
サーバ上でトランスパイル (ES6 -> ES5) されるため、
古いブラウザでも動作します。

[adsense]

gem の追加

gemfile に以下を追加します。

gem 'react-rails'

以下のコマンドでreact-railsをインストールします。

$ bundle install

react-rails の初期化

react-rails には react を使えるようによしなにしてくれる generator が用意されています。
インストール後、以下のコマンドを実行します。

$ rails g react:install

# コマンドを実行すると、react を実行する為に必要なフォルダ・ファイルが自動作成されます。
Running via Spring preloader in process 1438
      create  app/assets/javascripts/components
      create  app/assets/javascripts/components/.gitkeep
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/components.js
      create  app/assets/javascripts/server_rendering.js
      create  config/initializers/react_server_rendering.rb```

[adsense]

React コンポーネントの作成

react-rails には、React Component 定義を生成してくれる generator があるため、
それを使用して Component を作成します。

$ rails g react:component MyCompName --es6

# コマンドを実行すると、 app/assets/javascripts/components フォルダに、
# jsx ファイルが作成されます。
Running via Spring preloader in process 1477
      create  app/assets/javascripts/components/my_comp_name.es6.jsx

オプション

generator のオプションには、以下の２つが指定できます。

• –es6: ES6 の React.Component を継承した class 形式のコンポートネントとして作成
• –coffee: coffee script として作成

---

generator で作成したコンポートは以下のような形となります

class MyCompName extends React.Component {
  render () {
    return (
      <React.Fragment>
      </React.Fragment>
    );
  }
}

このままでは、実行しても何も表示されない為、以下のように書き換えます。

class MyCompName extends React.Component {
  render () {
    return (
      <div>hello react</div>
    );
  }
}

View に reactコンポーネントを配置

reast-rails をインストールすると、
react_component というヘルパーメソッドが追加されます。
これを使用して、View に React コンポーネントを に配置します。

<%= react_component('MyCompName') %>
<div>
 ~~~
</div>

application.js の修正

application.js に、ツリー構造読み込み定義があると、
React 本体の js を二重読み込みして、色々問題になるので、
ツリー構造読み込み定義があれば削除します。

//= require rails-ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .    ← この行があれば消す

↓ 削除後

//= require rails-ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components  

実行

以上までの手順を終えたら、Rails を起動し、React コンポーネントを配置したページに、
hello react と表示されれば成功です。

注意
Rails を起動中のまま、react-rails のセットアップを行うと、
実行時に FileNotFound のエラーが表示されます。
この場合は、Rails を再起動する事で治ります。

[adsense]

応用編

外部コンポーネントのインポート

通常 ES6 では、外部ファイルのコンポーネントをインポートする場合、
import xxx from module_name といった形で書きますが、
react_rails の場合、//= require ./components/SubComponent の形で書きます。

//= require ./components/SubComponent

class MainComponent extends React.Component {
  render() {
	  return <SubComponent></SubComponent>;
  }
}

また、インポートされる側のコンポーネントについても、
通常のES6では、

export class SubComponent { ... }

と書きますが、
react-rails では、export なしで、普通のクラスとして宣言します。

class SubComponent { ... }