rails generate react_on_rails:install

Author: justin808

Gemfile

@@ -50,3 +50,5 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 gem "webpacker", "~> 5.1"
 
 gem "react_on_rails", "12.0.1"
+
+gem 'mini_racer', platforms: :ruby

Gemfile.lock

@@ -84,6 +84,7 @@ GEM
       concurrent-ruby (~> 1.0)
     jbuilder (2.10.0)
       activesupport (>= 5.0.0)
+    libv8 (7.3.492.27.1-x86_64-darwin-19)
     listen (3.2.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -98,6 +99,8 @@ GEM
     mimemagic (0.3.5)
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
+    mini_racer (0.2.14)
+      libv8 (> 7.3)
     minitest (5.14.1)
     msgpack (1.3.3)
     nio4r (2.5.2)
@@ -201,6 +204,7 @@ DEPENDENCIES
   capybara (>= 2.15)
   jbuilder (~> 2.7)
   listen (~> 3.2)
+  mini_racer
   puma (~> 4.1)
   rails (~> 6.0.3, >= 6.0.3.1)
   react_on_rails (= 12.0.1)

Procfile.dev

@@ -0,0 +1,9 @@
+# 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.
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/webpack
+client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'

Procfile.dev-hmr

@@ -0,0 +1,26 @@
+# Procfile for development using HMR
+
+web: rails s -p 3000
+
+# 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 (prerender is true), you either need to
+# a. Ensure that you have dev_server.hmr and dev_server.inline BOTH set to false,
+#    and you have this option in your config/initializers/react_on_rails.rb:
+#      config.same_bundle_for_client_and_server = true
+#    If you have either config/webpacker.yml option set to true, you'll see errors like
+#    "ReferenceError: window is not defined" (if hmr is true)
+#    "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
+# b. Skip using the webpack-dev-server. bin/webpack --watch is typically
+     fast enough.
+# c. See the React on Rails README for a link to documentation for how to setup
+#    SSR with HMR and React hot loading using the webpack-dev-server only for the
+#    client bundles and a static file for the server bundle.
+
+# Run the webpack-dev-server for client and maybe server files
+webpack-dev-server: bin/webpack-dev-server
+
+# Keep the JS fresh for server rendering. Remove if not server rendering.
+# Especially if you have not configured generation of a server bundle without a hash.
+# as that will conflict with the manifest created by the bin/webpack-dev-server
+# rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch

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,25 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
+
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
+
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired, // this is passed from the Rails view
+};
+
+export default HelloWorld;

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,45 @@
+# frozen_string_literal: true
+
+# See https://github.com/shakacode/react_on_rails/blob/master/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.
+  # If nil, then the standard rails/webpacker assets:precompile will run
+  # config.build_production_command = nil
+
+  ################################################################################
+  ################################################################################
+  # 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.
+  #
+  # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
+  # and set the config/webpacker.yml option for test to true.
+  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