Cloud9でRails+React環境構築(2.Reactを動かしてみる)

はじめに

前回の続き sprink.hatenablog.com

引き続きこちらの記事を参考にさせて頂きました。 codezine.jp

手順

application.html.erbのjavascript_include_tagを変更

app/views/layouts/application.html.erb

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

へ変更

hello_react.jsxをインクルード

app/javascript/packs/application.js

require('./hello_react.jsx')

bin/webpack-dev-serverを実行

$ bin/webpack-dev-server

エラーが出る(途中でRubyのバージョンを変えたせいかも)

rubygems.rb:270:in `find_spec_for_exe': can't find gem bundler(前後省略)

Bundler再インストール(念のため「bundle install」も)

$ gem install bundler
$ bundle install

もう一度、bin/webpack-dev-serverを実行

$ bin/webpack-dev-server
webpack: Compiled successfully.

と表示されたらwebpackのコンパイルが成功(いつまで経ってもコンソールが止まったままなのでCtrl+Cで停止した)

起動確認

$ bin/rails s -b $IP -p $PORT

Hello, React!が表示される

f:id:sprink:20171114213043p:plain