There are different ways to use React inside Ruby on Rails apps. In this post, I’ll explain how you can integrate React with Ruby on Rails. Using the most popular ways practiced by the developers at present.

What is React?

React is a javascript library, which is used for developing interactive UI’s (User Interface) especially for single-page applications. React deals with the View component of MVC (Model – View – Controller) architecture. In react, everything is component. Using React we can pass rich data through the app and we can maintain state outside the DOM.

Integrating React with Rails

Make sure you have already installed Ruby and Rails in your system. If you are not installed you can follow this Link for details instructions and install Ruby and Rails. Once you have installed, now you can start to create rails application using the following command.

$ rails new react_integration

It will create an empty Rails application. We can integrate react with Rails application in the following way

• react-rails gem
• react_on_rails gem
• Hyperloop gem

1. react-rails gem

react-rails gem is one of the easiest way to start using react in Rails application.
It uses Ruby on Rails asset pipeline to automatically transform JSX into Ruby on Rails compatible assets using the Ruby Babel Transpiler.
Now add the react-rails gem into Gemfile.

gem 'react-rails'

Then install the gem with,

    $ bundle install

After the bundle installs completed we need to run react-rails installation script using rails generator.

$ rails generate react:install or rails g react:instal
      create  app/assets/javascripts/components
      create  app/assets/javascripts/components/.keep
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/components.js
      create  app/assets/javascripts/server_rendering.js
      create  config/initializers/react_server_rendering.rb

This will create components directory under app/assets/javascripts directory, manifest file and add them to our application.js file.
Now we can create react component file under app/assets/javascripts/components directory and save it with .jsx extension. Using the following command we can create our component.

$  rails g react:component articles
create  app/assets/javascripts/components/articles.js.jsx

Add the following code in articles.js.jsx

var Articles = createReactClass({
  propTypes: {
    articles: [
      {
        title: PropTypes.string,
        author: PropTypes.string
      }
    ]
  },
  render: function() {
    return (
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Author</th>
          </tr>
        </thead>
        <tbody>
          {this.props.articles.map(article => (
            <tr key={article.title}>
              <td>{article.title}</td>
              <td>{article.author}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
});

Now we can render our react component in rails view like following,

<%= react_component("Articles", articles: [ { title: "Ruby on Rails", author: "Arjunan" }, { title: "Python", author: "John"}]) %>

react_component helper method takes component name as first argument and props as second argument.
For more details, you can refer here.

2.react_on_rails gem

react_on_rails gem for integrating React with rails. react_on_rails allow us to create Component using ES6 and it will use javascript tools including webpack. It uses webpack to compile react component to JS instead of using Rails asset pipeline.
Since we have the power of webpack, we could configure it as per our needs but the drawback is that we need to install npm and understand how webpack works.
Using npm we can install javascript libraries, instead of using gem or downloading and adding manually.
To starting with react_on_rails gem, first we need to install Node.js, the gem uses npm to installing javascript libraries.
You can download and install Node.js from Node.js website or via nvm
Once node and npm installed we can start using react_on_rails gem. Add the gem into our Gemfile.

gem 'react_on_rails', '~> 11.2', '>= 11.2.2'
gem "webpacker"

Install it with our app using bundle install,

$ bundle install

Once the installation is complete, we need to install prerequisites, react_on_rails gem using yarn, foreman, and webpack.
You can install yarn from here.
Foreman installation we need to install foreman gem,

$ gem install foreman

react_on_rails internally depends on foreman to start rails server, start webpack and configure it to watch and compile javascript changes.
For webpack we need to run the following two commands.

$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:install:react

we need to commit our work in git, otherwise react_on_rails script does not work

$ git init
$ git add .
$ git commit -m "Adding react on rails"

Now we can run the installation script.

$ rails generate react_on_rails:install

This will create the Procfile.dev file.
Then run bundle install for installing Execjs and npm install for installing javascript dependencies.

$ bundle install && npm install

Now we can start our rails server using foreman.

$ foreman start -f Procfile.dev

While running react_on_rails: install, a simple HelloWorld component was created and it will be available under app/javascript/bundles. Now we can visit http://localhost:3000/hello_world
For more details, you can refer here

3. Hyperloop

Hyperloops main goal is to build modern web applications quickly. This allows us to create react component using ruby code. The same business logic and domain models running on the clients and the server.
Hyperloop is fully integrated with Rails and also gives you unfettered access to the complete universe of JavaScript libraries (including React) from within your Ruby code. Hyperloop lets you build beautiful interactive user interfaces in Ruby.
Hyperloop has been tested with the Rails (~> 4.2), Rails (~> 5.0) and the last Rails (5.1.0). For the final Rails (~> 5.1.0), there are still a few points to be aware of Hyperloop and Rails (~> 5.1.0)

Setup

Add hyperloop gem into you Gemfile.

gem 'hyperloop'

Then run bundle to install hyperloop in our application.

$ bundle install

Once bundle install completed, we can run hyperloop install generator.

$ rails g hyperloop:install

It will create the hyperloop structure inside the /app directory.
This how the output will look like,

create  app/hyperloop/components/
create  app/hyperloop/operations/
create  app/hyperloop/stores/
create  app/hyperloop/models/
create  app/policies/application_policy.rb

And update your app/assets/javascripts/application.js file adding this line:

      //= require hyperloop-loader

Now we can test hyperloop by creating Article Component by running hyperloop generator.

$ rails g hyper:component Article
create  app/hyperloop/components/article.rb

It created article.rb under app/hyperloop/components.
Now we can add routes to routes.rb file.

get 'article' => 'hyperloop#article', as: :article

Now start our rails application,

$ rails server

Visit http://localhost:3000/article it will display the newly generated component. For more details, you can refer hyperloop site.

Over to You

Hope you have a clear idea about integrating react within rails application. I have listed the easiest ways to start integration and which also has the most community support.
If you don’t want to integrate react within rails application you have an alternative choice. You can make rails app as API’s only application and react as a separate application.

 
If you have any doubts related to this article, connect with us in the comment section, we’ll get back to you right away. And for articles on Web development visit our blog.
If you like to get more updates on technologies, Get your subscription now! and enjoy our trending articles from Agira Technologies in your inbox.