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 shakapacker compilation system.
Add the following line to the end of the Gemfile:
Then install the newly added gem:
Setup React Shakapacker pipeline
Shakapacker also contains support for integrating many of the popular JavaScript
frameworks and tools. Here we are going to integrate ReactJS into our
environment.
First let's install react and some other required npm packages:
Let's complete setting up the React-Shakapacker pipeline by running the
following command:
Executing the command above installs the most recent edition of react_ujs, which brings about certain disruptive modifications. To revert, let's downgrade it to version 3.1.1 using the subsequent command:
And now we have successfully added React.js support to our application.
We have to delete the components folder which was automatically created upon
running the above command, since we will be creating the same folder in the
appropriate path later.
Run the following from the root of project to delete the components folder:
Remove unnecessary pack files
Let's remove the unwanted files which were generated after running the above
commands:
Keeping src folder as the entry point
Running the previous Shakapacker commands might have redeclared
componentRequireContext with components as the argument in the
application.js file.
We have to remove those redeclaration's from packs/application.js if it
exists.
Thus fully replace app/javascript/packs/application.js with the following
lines of code:
We are retaining the declaration with src folder because src folder is the
entry point in our application to load React components. Removing this
declaration will lead to the failure of the app since the App component
wouldn't be within the scope of our Rails view pipeline.
Directory structure
The src folder is where the JavaScript code specific to the application is
handled at. This includes apis, commons etc.
In upcoming chapters, when we create the components folder, we will be adding
it under the src folder.
This is done so as to handle all the JavaScript/client code under a single path
and have more control over it.
With the last change we made to application.js, we have ensured that Shakapacker
knows that our application relevant code and its context should be loaded from
the src folder.
The require.context statement within the packs/application.js is used to get
the src folder context.
If you want to load components or JavaScript files from a different directory,
then override the path by calling ReactRailsUJS.useContext with a different
argument. If require of such a path fails to find any relevant files or
folder, then ReactRailsUJS falls back to the global namespace.
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 the package-lock.json file. Add package-lock.json to the
.gitignore file. Use yarn add command for installing new packages.
Now let's commit the changes: