Ruby on Rails(RoR) is great for web development but when you want more dynamic pages on your front end, it might be time to bring a library like React into your project.

I was recently tasked with integrating React into an existing RoR project and couldn’t find a simple explanation of how to do the previous. Here’s the blog post I wish I would have had a week ago.

Note: I’ll be assuming you have a basic understanding of RoR, React, Redux, and Webpack for the rest of this post. If you don’t, message or leave a comment and I’ll direct you to some learning resources I found helpful.

The Big Picture

You could use React to build the entire Front-End of your application and then use Rails as a backend API, but for now we’re going to focus on only converting a portion of your app to React.

Let’s say we have a Banking app that we already created with RoR and we have pages for a user’s Deposits and Withdrawals. We want to re-write the Withdrawals page in React so that we can make it more interactive for our users.

We don’t have time to remake the entire front end, so we’re just going to create a React component for Withdrawals and then drop that component into the RoR’s view for Withdrawals.

Here we go!

Step 1: Add React on Rails to your project

  1. Add the following to your Gemfile and bundle install:
gem "react_on_rails", "~> 6"

2. Commit these changes (this allows us to use the generator in the next step)

3. Run the generator in the root of your project directory:

$ rails generate react_on_rails:install --redux
$ bundle && npm i
$ npm run rails-server //this will be used to run your dev server from now on

3. Visit localhost:3000/hello_world

After running the above your file directory should look something like this:

.
├── Gemfile
├── Gemfile.lock
├── Procfile.dev
├── README.md
├── Rakefile
├── app
├── bin
├── client
├── config
├── config.ru
├── db
├── lib
├── log
├── node_modules
├── package.json
├── public
├── test
├── tmp
└── vendor

The generator added the bolded elements and the client directory is where all of our React code will live.

Step 2: Create your React Component

The generator creates a HelloWorld component for you and that provides a good starting point for creating new components but here’s a few important points:

  1. In order for Rails to know about our React component we need to register it with React on Rails at the bottom of your /client/app/bundlesComponentName.jsx file. For our Withdrawals component that would look like this:
ReactOnRails.register({ Withdrawals });

2. Then to use the React component in a Rails view we would place this line of code in our /app/views/view_name/index.html.erb:

<%= react_component("Withdrawals", props: @some_props) %>
How I felt when I got React working with Rails

That’s pretty much it for adding React to your Rails project, you’re now ready to start improving your projects Front-End!

Note 1: If you plan on using any packages from npm, make sure you are in the ‘client’ directory when installing them

Note 2: If you want a background of React on Rails, read this and checkout this tutorial. Also, checkout this book for React on Rails to learn about everything you can do with it, we only scratched the surface.