react on rails not working

Gemfile

@@ -3,7 +3,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 ruby '2.5.0'
 
-gem 'react_on_rails', '10.1.4'
+gem 'react_on_rails', '10.0.2'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 5.2.0'
@@ -64,3 +64,5 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem 'mini_racer', platforms: :ruby

Gemfile.lock

@@ -85,6 +85,8 @@ GEM
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
+    libv8 (6.3.292.48.1)
+    libv8 (6.3.292.48.1-x86_64-darwin-17)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -100,6 +102,8 @@ GEM
     mimemagic (0.3.2)
     mini_mime (1.0.0)
     mini_portile2 (2.3.0)
+    mini_racer (0.1.15)
+      libv8 (~> 6.3)
     minitest (5.11.3)
     msgpack (1.2.4)
     multi_json (1.13.1)
@@ -143,7 +147,7 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
-    react_on_rails (10.1.4)
+    react_on_rails (10.0.2)
       addressable
       connection_pool
       execjs (~> 2.5)
@@ -214,9 +218,10 @@ DEPENDENCIES
   coffee-rails (~> 4.2)
   jbuilder (~> 2.5)
   listen (>= 3.0.5, < 3.2)
+  mini_racer
   puma (~> 3.11)
   rails (~> 5.2.0)
-  react_on_rails (= 10.1.4)
+  react_on_rails (= 10.0.2)
   sass-rails (~> 5.0)
   selenium-webdriver
   spring

Procfile.dev

@@ -0,0 +1,7 @@
+# You can run these commands in separate shells
+web: rails s -p 3000
+
+# Next line runs a watch process with webpack to compile the changed files.
+# When making frequent changes to client side assets, you will prefer building webpack assets
+# upon saving rather than when you refresh your browser page.
+client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'

Procfile.dev-server

@@ -0,0 +1,12 @@
+# You can run these commands in separate shells instead of using foreman
+web: rails s -p 3000
+
+# Next line runs the webpack-dev-server
+# You can edit config/webpacker.yml to set HMR to true to see hot reloading.
+# Note, hot and live reloading don't work with the default generator setup on top of
+# the rails/webpacker Webpack config with server rendering.
+# If you have server rendering enabled, modify the call to bin/webpack-dev-server line
+# so you add `--inline=false` and then CSS is not inlined.
+# Otherwise, you will have an error. If you want HMR and Server Rendering, see
+# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
+client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'

app/controllers/hello_world_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class HelloWorldController < ApplicationController
+  layout "hello_world"
+
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end

app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class HelloWorld extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired, // this is passed from the Rails view
+  };
+
+  /**
+   * @param props - Comes from your rails view.
+   */
+  constructor(props) {
+    super(props);
+
+    // How to set initial state in ES6 class syntax
+    // https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
+    this.state = { name: this.props.name };
+  }
+
+  updateName = (name) => {
+    this.setState({ name });
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>
+          Hello, {this.state.name}!
+        </h3>
+        <hr />
+        <form >
+          <label htmlFor="name">
+            Say hello to:
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={this.state.name}
+            onChange={(e) => this.updateName(e.target.value)}
+          />
+        </form>
+      </div>
+    );
+  }
+}

app/javascript/packs/hello-world-bundle.js

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+});

app/views/hello_world/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Hello World</h1>
+<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

app/views/layouts/hello_world.html.erb

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ReactOnRailsWithWebpacker</title>
+    <%= csrf_meta_tags %>
+    <%= javascript_pack_tag 'hello-world-bundle' %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

config/initializers/react_on_rails.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# See docs/basics/configuration.md for many more options
+
+ReactOnRails.configure do |config|
+  # This configures the script to run to build the production assets by webpack. Set this to nil
+  # if you don't want react_on_rails building this file for you.
+  config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
+
+  ################################################################################
+  ################################################################################
+  # TEST CONFIGURATION OPTIONS
+  # Below options are used with the use of this test helper:
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  ################################################################################
+
+  # If you are using this in your spec_helper.rb (or rails_helper.rb):
+  #
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  #
+  # with rspec then this controls what yarn command is run
+  # to automatically refresh your webpack assets on every test run.
+  #
+  config.build_test_command = "RAILS_ENV=test bin/webpack"
+
+  ################################################################################
+  ################################################################################
+  # SERVER RENDERING OPTIONS
+  ################################################################################
+  # This is the file used for server rendering of React when using `(prerender: true)`
+  # If you are never using server rendering, you should set this to "".
+  # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
+  # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
+  # JavaScript execution instances which should handle any component requested.
+  #
+  # While you may configure this to be the same as your client bundle file, this file is typically
+  # different. You should have ONE server bundle which can create all of your server rendered
+  # React components.
+  #
+  config.server_bundle_js_file = "hello-world-bundle.js"
+end

config/routes.rb

@@ -1,3 +1,4 @@
 Rails.application.routes.draw do
+  get 'hello_world', to: 'hello_world#index'
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end

package.json

@@ -5,7 +5,8 @@
     "babel-preset-react": "^6.24.1",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "react-dom": "^16.3.2",
+    "react-on-rails": "^10.1.4"
   },
   "devDependencies": {
     "webpack-dev-server": "2.11.2"

yarn.lock

@@ -2084,6 +2084,10 @@ react-dom@^16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-on-rails@^10.1.4:
+  version "10.1.4"
+  resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-10.1.4.tgz#50e1b7596928746cff2ef90c00adb8e7cd41fe98"
+
 react@^16.3.2:
   version "16.3.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9"