Learn Ruby on Rails Book

Bring React.js to Rails

Adding React.js to Rails

We will be building our application's frontend in React.js, and for this, we will be using react-rails gem to bring React to our Ruby on Rails application and hook it into the webpacker compilation system.

Add the following line to the end of the Gemfile:

1gem 'react-rails'

Then install the newly added gem:

1bundle install

Now let's execute the following command in the terminal and we will see the components folder being created in the app/javascript directory.

1bundle exec rails webpacker:install # enter n when prompted

In the above command, enter n (no) when prompted and continue with the rest of its execution. This should be done to discard the overwriting of the existing config/webpacker.yml file that was generated during the project setup.

Webpacker also contains support for integrating many of the popular JavaScript frameworks and tools. Here we are going to integrate ReactJS into our environment.

When integrating ReactJs, the following commands will prompt you to overwrite the babel.config.js, since it works on adding the babel presets for React.

Thus press y when prompted for this specific case, when running the following command:

1bundle exec rails webpacker:install:react # enter y when prompted

Please note that the overwrite made by the above command has removed a couple of entries from the plugins section of babel.config.js. It was added while setting up the react environment.

Let's first complete setting up the React-Webpacker pipeline by running the following command:

1bundle exec rails generate react:install

And now we have successfully added React.js support to our application.

Before committing the changes, let's first add the js-logger and ["@babel/plugin-proposal-private-methods", { "loose": true }] back into the plugins array of babel.config.js file.

1  plugins: [
2      "js-logger",
3      ["@babel/plugin-proposal-private-methods", { "loose": true }],
4      'babel-plugin-macros',
5      '@babel/plugin-syntax-dynamic-import',
6      isTestEnv && 'babel-plugin-dynamic-import-node',
7      '@babel/plugin-transform-destructuring',
8      ...
9  ]

Also, remove the unwanted files which were generated after running the above commands:

1rm -rf app/javascript/packs/server_rendering.js app/javascript/packs/hello_react.jsx

Running the previous webpacker commands might have redeclared componentRequireContext with components as the argument in the application.js file.

Thus remove the highlighted lines from packs/application.js if it exists:

1require("@rails/ujs").start();
2require("@rails/activestorage").start();
3require("channels");
4import "../stylesheets/application.scss";
5
6var componentRequireContext = require.context("src", true);
7var ReactRailsUJS = require("react_ujs");
8ReactRailsUJS.useContext(componentRequireContext);
9
10var componentRequireContext = require.context("components", true);
11var ReactRailsUJS = require("react_ujs");
12ReactRailsUJS.useContext(componentRequireContext);

We are retaining the declaration with src folder because src folder is the entry point in our application to load React components. Removing the declaration will lead to the failure of the app since the App component wouldn't be within the scope of our Rails views.

Note: npm install command would add package-lock.json which isn't required as we are using Yarn. Thus avoid using npm install. If executed then please don't commit package-lock.json file. Add package-lock.json to the .gitignore file. Use yarn add for installing new packages.

Now let's commit the changes:

1git add -A
2git commit -m "Added React.js to the project"
⌘K
    to navigateEnterto select Escto close
    Previous
    Next