react_on_rails 12.0.1 → 12.0.5.beta.0

data/CONTRIBUTING.md

@@ -62,7 +62,7 @@ cd react_on_rails/
 yarn
 
 # Update the lib directory with babel compiled files
-yarn run build:watch
+yarn run build-watch
 ```
    
 You need to do this once:

data/Gemfile

@@ -5,36 +5,4 @@ source "https://rubygems.org"
 # Specify your gem"s dependencies in react_on_rails.gemspec
 gemspec
 
-# The following gems are dependencies of the gem's dummy/example apps, not the gem itself.
-# They must be defined here because of the way Travis CI works, in that it will only
-# bundle install from a single Gemfile. Therefore, all gems that we will need for any dummy/example
-# app have to be manually added to this file.
-gem "bootsnap", ">= 1.1.0", require: false
-gem "bootstrap-sass"
-gem "jbuilder"
-gem "jquery-rails"
-gem "mini_racer"
-gem "puma"
-gem "rails_12factor"
-gem "ruby-lint", require: false
-gem "sass-rails"
-gem "scss_lint", require: false
-gem "sdoc", group: :doc
-gem "spring"
-gem "sprockets", "~>3.0"
-gem "sqlite3", "~> 1.3.6"
-gem "turbolinks"
-gem "uglifier"
-gem "web-console", group: :development
-
-# below are copied from spec/dummy/Gemfile
-gem "capybara"
-gem "capybara-screenshot"
-gem "launchy"
-gem "rspec-rails"
-gem "rspec-retry"
-gem "selenium-webdriver"
-gem "webpacker", ">= 4.0.0"
-
-gem "equivalent-xml", github: "mbklein/equivalent-xml"
-gem "rainbow"
+eval_gemfile File.expand_path("./Gemfile.development_dependencies", __dir__)

data/Gemfile.development_dependencies

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+gem "webpacker"
+gem "bootsnap", ">= 1.1.0", require: false
+gem "rails"
+gem "sqlite3"
+gem "sass-rails"
+gem "uglifier"
+gem "jquery-rails"
+gem "puma"
+
+# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
+gem "turbolinks" if ENV["DISABLE_TURBOLINKS"].nil? || ENV["DISABLE_TURBOLINKS"].strip.empty?
+
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem "jbuilder"
+# bundle exec rake doc:rails generates the API under doc/api.
+gem "sdoc", group: :doc
+
+gem "sprockets"
+
+gem "amazing_print"
+gem "mini_racer"
+
+group :development, :test do
+  gem "listen"
+  gem "pry"
+  gem "pry-byebug"
+  gem "pry-doc"
+  gem "pry-rails"
+  gem "pry-rescue"
+  gem "rubocop", require: false
+  gem "rubocop-performance", require: false
+  gem "scss_lint", require: false
+  gem "spring"
+end
+
+group :test do
+  gem "capybara"
+  gem "capybara-screenshot"
+  gem "coveralls", require: false
+  gem "equivalent-xml"
+  gem "generator_spec"
+  gem "launchy"
+  gem "rspec_junit_formatter"
+  gem "rspec-rails"
+  gem "rspec-retry"
+  gem "selenium-webdriver"
+  gem "webdrivers", "~> 3.0"
+end

data/NEWS.md

@@ -2,6 +2,11 @@
 
 *We'll keep a history of the news. A few bullets at the top will also show on the [README.md](./README.md).*
 
+* July 8, 2020: Release **v12**.
+  1. **React Hooks Support** for top level components
+  2. **Typescript bindings**
+  3. **rails/webpacker** "just works" with React on Rails by default.
+  4. i18n support for generating a JSON file rather than a JS file.
 * 2018-02-27: **Version 10.1.2** Supports the React API for ReactDOM.hydrate.
 * 2017-09-06: **VERSION 9.0.0 shipped!** This version depends on Webpacker directly. See [Upgrading React on Rails](./docs/basics/upgrading-react-on-rails.md) for more concise instructions on upgrading.
 * Always see the [CHANGELOG.md](./CHANGELOG.md) for the latest project changes.

data/README.md

@@ -14,6 +14,15 @@
 *These are the docs for React on Rails 12. To see the version 11 docs, [click here](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
 
 #### News
+
+**October 14, 2020**: [RUBY ROGUES
+RR 474: React on Rails V12 – Don’t Shave That Yak! with Justin Gordon](https://devchat.tv/ruby-rogues/rr-474-react-on-rails-v12-dont-shave-that-yak-with-justin-gordon/).
+
+**October 1, 2020**: See the [spec/dummy](./spec/dummy) example repo for a simple configuration of webpack via the rails/webpacker gem
+that supports SSR.
+
+**August 2, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
+
 **July 8, 2020**: Release v12 of React on Rails.
 
 **Major Improvements**
@@ -27,16 +36,14 @@ Be sure to see the [CHANGELOG.md](./CHANGELOG.md) and read the upgrade instructi
 [docs/basics/upgrading-react-on-rails](./docs/basics/upgrading-react-on-rails.md#upgrading-to-v12).
    
 * See Justin's RailsConf talk: [Webpacker, It-Just-Works, But How?](http://railsconf.com/2020/video/justin-gordon-webpacker-it-just-works-but-how).
-* Are you interested in support for React on Rails? If so check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
+* Are you interested in support for React on Rails? Do you want to use Node.js to do your server-side rendering so libraries like Emotion and Loadable Components just work, as compared to rendering via Ruby embedded JS? If so check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
 * HMR is working with [Loadable Components](https://loadable-components.com) for a both amazing hot-reloading developer experience and great runtime performance. Please [email me](mailto:justin@shakacode.com) if you'd like to use [Loadable Components Code Splitting](https://loadable-components.com/docs/code-splitting/) to speed up your app by reducing your bundle sizes and lazily loading the code that's needed.
-* `react_on_rails` fully supports `rails/webpacker`. The example test app in `spec/dummy` was recently converted over to use rails/webpacker v4+. It's a good example of how to leverage rails/webpacker's webpack configuration. 
-
 ---
 
 #### About
 React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
 
-This project is sponsored by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on React front-ends, often with Ruby on Rails or Gatsby, using TypeScript or ReasonML. The best way to see what we do is to see the details of [our recent work](https://www.shakacode.com/recent-work).
+This project is maintained by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on Ruby on Rails applications with React front-ends, often using TypeScript or ReasonML. We also build Gatsby sites. See [our recent work](https://www.shakacode.com/recent-work) for examples of what we do.
 
 Interested in optimizing your webpack setup for React on Rails including code
 splitting with [react-router](https://github.com/ReactTraining/react-router#readme), 
@@ -62,7 +69,7 @@ Given that `rails/webpacker` gem already provides basic React integration, why w
 1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `rails/webpacker`.
 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration with server-side-rendering.
 1. [Internationalization (I18n) and (localization)](https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md)
-1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com/).
+1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/).
 1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example).
 
 See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
@@ -87,35 +94,35 @@ Ruby on Rails >=5 and rails/webpacker 4.2+.
 Note, the best way to understand how to use ReactOnRails is to study a few simple examples. You can do a quick demo setup, either on your existing app or on a new Rails app. 
 
 1. Do the quick [tutorial](docs/tutorial.md).
-2. Add React on Rails to an existing Rails app per [the instructions](docs/basics/installation-into-an-existing-rails-app.md).
-3. Look at [spec/dummy](spec/dummy), a simple, no DB example.
-3. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [www.reactrails.com](http://www.reactrails.com).
+1. Add React on Rails to an existing Rails app per [the instructions](docs/basics/installation-into-an-existing-rails-app.md).
+1. Look at [spec/dummy](spec/dummy), a simple, no DB example. This has an example of using `rails/webpacker` to configure server-side rendering.
+1. See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
+1. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [www.reactrails.com](http://www.reactrails.com).
 
 ## Basic Installation
 
 *See also [the instructions for installing into an existing Rails app](docs/basics/installation-into-an-existing-rails-app.md).*
 
-2. Add the `react_on_rails` gem to Gemfile:
-
-   ```bash
-   bundle add react_on_rails --strict
-   ```
-
-4. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
+1. Add the `rails/webpacker` gem if you don't yet have it.
+   
+1. Add the `react_on_rails` gem to Gemfile. _Use the latest version for react_on_rails._
+  ```bash
+    bundle add react_on_rails --version=12.0.4 --strict
+  ```
 
-5. Run the generator:
+1. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
 
+1. Run the generator:
    ```bash
    rails generate react_on_rails:install
    ```
 
-6. Start the app:
-
+1. Start the app:
    ```bash
    rails s
    ```
 
-7. Visit http://localhost:3000/hello_world.
+1. Visit http://localhost:3000/hello_world.
 
   
 ### Turning on server rendering
@@ -275,7 +282,6 @@ Browse the links in the [Summary Table of Contents](./SUMMARY.md)
 Here are some highly recommended next articles to read:
 
 1. [How React on Rails Works](docs/outdated/how-react-on-rails-works.md)
-1. [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
 1. [Webpack Configuration](./docs/basics/webpack-configuration.md)
 1. [View Helpers API](./docs/api/view-helpers-api.md) 
 1. [Caching and Performance: React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).

data/SUMMARY.md

@@ -8,7 +8,6 @@
   + [How React on Rails Works](docs/outdated/how-react-on-rails-works.md)
   + [Client vs. Server Rendering](./docs/basics/client-vs-server-rendering.md)
   + [React Server Rendering](./docs/basics/react-server-rendering.md)
-  + [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
   + [Render-Functions and the RailsContext](docs/basics/render-functions-and-railscontext.md)
   + [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
   + [Deployment](docs/basics/deployment.md).
@@ -28,6 +27,7 @@
   + [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
   + [Manual Installation Overview](docs/outdated/manual-installation-overview.md)
   + [Upgrading from rails/webpacker v3 to v4](docs/additional-reading/upgrade-webpacker-v3-to-v4.md)
+  + [Recommended Project Structure](docs/additional-reading/recommended-project-structure.md)
   
 ## **Rails**
   + [Rails Engine Integration](./docs/additional-reading/rails-engine-integration.md)

data/docs/additional-reading/recommended-project-structure.md

@@ -0,0 +1,69 @@
+# Recommended Project structure
+
+The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
+
+```yml
+app/javascript:
+  ├── bundles:
+  │   # Logical groups of files that can be used for code splitting
+  │   └── hello-world-bundle.js
+  ├── packs:
+  │   # only webpack entry files here
+  │   └── hello-world-bundle.js
+```
+
+Per the example repo [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh),
+you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
+
+## Steps to convert from the generator defaults to use a `/client` directory for source code 
+
+1. Move the directory:
+
+```
+mv app/javascript client
+```
+
+2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+
+```yml
+  source_path: client
+```
+
+## Moving node_modules from `/` to `/client` with a custom webpack setup.
+
+`rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
+
+1. Move the `/package.json` to `/client/package.json`
+2. Create a `/package.json` that delegates to `/client/package.json`. 
+   ```
+     "scripts": {
+       "heroku-postbuild": "cd ./client && yarn"
+     },
+   ```
+3. If your node_modules directory is not at the top level of the Rails project, then you will need to set the
+ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
+
+## CSS, Sass, Fonts, and Images
+Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends!
+
+Here's a good discussion of this option: [Why does Rails 6 include both Webpacker and Sprockets?](https://rossta.net/blog/why-does-rails-install-both-webpacker-and-sprockets.html). 
+
+You have 2 basic choices:
+
+### Simple Rails Way
+This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.
+
+#### Advantages to the Simple Rails Way
+1. Much simpler! There's no changes really from your current processes.
+
+### Using Webpack to Manage Styling Assets
+This technique involves customization of the webpack config files to generate CSS, image, and font assets. 
+
+#### Directory structure
+1. `/client/app/assets`: Assets for CSS for client app.
+1. `/client/app/assets/fonts` and `/client/app/assets/styles`: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.
+
+#### Advantages to having Webpack Manage Styles
+1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
+1. You can use CSS in JS.
+1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.

data/docs/basics/client-vs-server-rendering.md

@@ -1,5 +1,7 @@
 # Client-Side Rendering vs. Server-Side Rendering
 
+*See also [react-server-rendering.md](./react-server-rendering.md).*
+
 In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
 
 Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime.

data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md

@@ -8,22 +8,18 @@ The webpack-dev-server provides:
    abruptly lose any tweaks within the Chrome development tools.
 3. Optional hot-reloading. The older react-hot-loader has been deprecated in 
    favor of [fast-refresh](https://reactnative.dev/docs/fast-refresh).
-   For use with webpack, see [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
+   For use with webpack, see **Client Side rendering and HMR using react-refresh-webpack-plugin** section bellow or visit [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) for additional details.
 
 If you are ***not*** using server-side rendering (***not*** using `prerender: true`),
 then you can follow all the regular docs for using the `bin/webpack-dev-server` 
 during development.
 
-
 # Server Side Rendering with the Default rails/webpacker bin/webpack-dev-server
 
 If you are using server-side rendering, then you have a couple options. The
 recommended technique is to have a different webpack configuration for server
 rendering.  
 
-
-
-
 ## If you use the same Webpack setup for your server and client bundles 
 If you do use the webpack-dev-server for prerendering, be sure to set the
 `config/initializers/react_on_rails.rb` setting of 
@@ -43,7 +39,66 @@ If you don't configure these two to false, 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)
 
-
-
-
-
+# Client Side rendering with HMR using react-refresh-webpack-plugin
+## Basic installation
+To enable HMR functionality you have to use `./bin/webpack-dev-server`
+1. In `config/webpacker.yml` set **hmr** and **inline** `dev_server` properties to true. 
+    ```
+    dev_server:
+      https: false
+      host: localhost
+      port: 3035
+      public: localhost:3035
+      hmr: true
+      # Inline should be set to true if using HMR
+      inline: true
+    ```
+
+2. Add react refresh packages:
+    ` yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D`
+
+3. HMR is for use with the webpack-dev-server, so we only add this for the webpack-dev-server.
+   ```
+   const { devServer } = require('@rails/webpacker')
+
+   const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
+
+   //plugins
+   if (isWebpackDevServer) {
+     environment.plugins.append(
+       'ReactRefreshWebpackPlugin',
+       new ReactRefreshWebpackPlugin({
+         overlay: {
+           sockPort: devServer.port
+         }
+       })
+     )
+   }
+    ```
+    We added overlay.sockedPort option in `ReactRefreshWebpackPlugin` to match the webpack dev-server port specified in config/webpacker.yml. Thats way we make sockjs works properly and suppress error in browser console `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`. 
+
+4. Add react-refresh plugin in `babel.config.js`
+```
+  module.export = function(api) {
+    return {
+      plugins: [process.env.WEBPACK_DEV_SERVER && 'react-refresh/babel'].filter(Boolean)
+    }
+  }
+```
+That's it :).
+Now Browser should reflect .js along with .css changes without reloading.
+
+If by some reason plugin doesn't work you could revert changes and left only devServer hmr/inline to true affecting only css files.
+
+These plugins are working and tested with 
+   - babel 7
+   - webpacker 5
+   - bootstrap 4
+   - jest 26
+   - core-js 3
+   - node 12.10.0
+   - react-refresh-webpack-plugin@0.4.1
+   - react-refresh 0.8.3 
+   - react_on_rails 11.1.4 
+   
+   configuration.

data/docs/basics/installation-into-an-existing-rails-app.md

@@ -4,19 +4,26 @@
 
 **If you have rails-5 API only project**, first [convert the rails-5 API only app to rails app](#convert-rails-5-api-only-app-to-rails-app) before [getting started](#getting-started-with-an-existing-rails-app).
 
-1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `client/package.json` file.
+1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `package.json` file.
 
    ```ruby
    gem "react_on_rails", "12.0.0" # Update to the current version
    gem "webpacker", "~> 5"
    ```
 
-2. Run the following 2 commands to install Webpacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
+1. Add the webpacker and react_on_rails gems
+_Use the latest version for react_on_rails._
 
+```
+bundle add webpacker                 
+bundle add react_on_rails --version=12.0.4 --strict
+```
+
+2. Run the following 2 commands to install Webpacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
 
    ```bash
-   $ bundle exec rails webpacker:install
-   $ bundle exec rails webpacker:install:react
+   bundle exec rails webpacker:install
+   bundle exec rails webpacker:install:react
    ```
 
 3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).

data/docs/basics/react-server-rendering.md

@@ -1,6 +1,9 @@
 # React Server Rendering
 
-See also [Client vs. Server Rendering](./client-vs-server-rendering.md)
+See also [Client vs. Server Rendering](./client-vs-server-rendering.md).
+
+## What is the easiest way to setup a webpack configuration for server-side-rendering?
+See the example webpack setup here: [github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
 
 ## What is Server Rendering?
 
@@ -10,13 +13,13 @@ During the Rails rendering of HTML per a browser request, the Rails server will
 
 The default JavaScript interpretter is [ExecJS](https://github.com/rails/execjs). If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
 
-See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering)
-
+See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering).
 
 ## How do you do Server Rendering with React on Rails?
 1. The `react_component` view helper method provides the `prerender:` option to switch on or off server rendering.
 1. Configure your Webpack setup to create a different server bundle per your needs. While you may reuse the same bundle as for client rendering, this is not common in larger apps for many reasons, such as as code splitting, handling CSS and images, different code paths for React Router on the server vs. client, etc.
-1. You need to configure `config.server_bundle_js_file = "my-server-bundle.js"` in your `config/initializers/react_on_rails.rb`
+1. You need to configure `config.server_bundle_js_file = "server-bundle.js"` in your `config/initializers/react_on_rails.rb`
+1. You should ***not*** put a hash on the server-bundle so that you can easily use the webpack-dev-server for client bundles and have the server bundle generated by a watch process. 
 
 ## Do you need server rendering?
 
@@ -26,4 +29,4 @@ Server rendering is used for either SEO or performance reasons.
 
 1. Never access `window`. Animations, globals on window, etc. just don't make sense when you're trying to run some JavaScript code to output a string of HTML.
 2. JavaScript calls to `setTimeout`, `setInterval`, and `clearInterval` similarly don't make sense when server rendering.
-3. Promises don't work when server rendering. Anything to be done in a promise will never complete. This includes concepts such as asynchronous code loading and AJAX calls. If you want to do server rendering with asynchronous calls, [get in touch](mailto:justin@shakacode.com) as we're working on a Node renderer that handles asynchronous calls.
+3. Promises and file system access don't work when server rendering with ExecJS. Instead, you can use the Node renderer or [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).