はじめに
Cloud9上でRails5.1 + React.js環境構築の手順です。
基本コピペで行けます。
細かいことは抜きにして、とりあえず環境作りたい方対象です。
前提条件
・Cloud9のアカウントあること
・Blankでworkspce作成済みであること
Ruby 2.3.1 インストール
rvm install 2.3.1
Rails5.1 インストール
gem install rails
Bundlerインストール
gem install bundler
Nodo.jsのインストール
nvm install v7.7.1
npmでnode.jsのアップグレード
npm update -g npm
Railsアプリケーション作成とディレクトリ移動
rails new webpacker-sample && cd webpacker-sample
Gemfile修正
webpacker-sample/Gemfile
gem 'webpacker', github: "rails/webpacker"
bundle install
bundle install
Yarnインストール
npm i -g yarn
Webpackerインストール
rake webpacker:install
コントローラ作成
rails g controller pages index
application.html.erbに追記
app/views/layouts/application.html.erb
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Reactのインストール
rake webpacker:install:react
application.jsに追記
app/javascript/packs/application.js
require('./hello_react.jsx')
ビルド
bin/webpack
サーバー起動
rails s
Webアクセス確認
Preview→Preview Running Applicationでブラウザ起動し、
以下ドメイン部を変更したパスでアクセス。
Hello React!と表示されれば成功です！
最後に
以下のファイルをいじることでReactの実装ができます。
ファイル修正後、「bin/webpack」のビルドを都度実行する必要があります。
（ビルドが面倒くさい場合は、下記参考を参照ください。）
/webpacker-sample/app/javascript/packs/hello_react.jsx
/webpacker-sample/app/views/pages/index.html.erb
参考
以下を参考にしました。
http://qiita.com/yoshiokaCB/items/564ed0440f0428c0009a#%E8%BF%BD%E8%A8%98
おわり