I set up a development environment for Ruby on Rails 5.x + Webpacker + React.js, so I’ll introduce it.

Rails Environment Prerequisites

I set up React.js with the premise that a Rails app was created using rails new with the following options:

rails new your_app \\
--database=postgresql \\
--webpack=react \\
--skip-git \\
--skip-action-cable \\
--skip-coffee \\
--skip-test \\
--skip-bundle

bundle install

rails webpacker:install

rails webpacker:install:react

Using javascript_pack_tag

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -5,7 +5,7 @@
     %title Fanfic
     = csrf_meta_tags
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
-    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
+    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
     = favicon_link_tag 'favicon.ico'
   %body
     = yield

Enable hot reload in Development Environment

--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -51,4 +51,7 @@ Rails.application.configure do
   # Use an evented file watcher to asynchronously detect changes in source code,
   # routes, locales, etc. This feature depends on the listen gem.
   config.file_watcher = ActiveSupport::EventedFileUpdateChecker
+
+  # Make javascript_pack_tag load assets from webpack-dev-server.
+  config.x.webpacker[:dev_server_host] = "http://localhost:8080"
 end

Add javascript_pack_tag 'hello_react'

Load the hello_react generated by rails webpacker:install:react with javascript_pack_tag for operation verification.

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -6,6 +6,7 @@
     = csrf_meta_tags
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
     = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
+    = javascript_pack_tag 'hello_react', 'data-turbolinks-track': 'reload'
     = favicon_link_tag 'favicon.ico'
   %body
     = yield

React.js Operation Verification

Access http://localhost:3000 and if you see the message:

Hello React!

then it’s successful.

Starting the Server

package.json

  "scripts": {
    "start": "rails s & bin/webpack-dev-server"
  },

Add this start script and:

yarn start

This allows you to start both rails s and bin/webpack-dev-server servers together.

Update .gitignore

Finally, add /public/packs to .gitignore.

This prevents unnecessary files from being git committed.

.gitignore

--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,7 @@ capybara-*.html
 .rspec
 /db/*.sqlite3
 /db/*.sqlite3-journal
+/public/packs
 /public/system
 /coverage/
 /spec/tmp

That’s all from the Gemba, where I want to work with Rails + Webpacker + React.js.

Reference Information

• Steps to Introduce React to Rails with webpacker - Qiita

That’s all from the Gemba.