How to Connect Rails with React to Create Responsive Apps

Benefits of React and Ruby on Rails

ReactJS and Ruby on Rails make a great framework combination since both of them are widely known in web development. Let’s look at the benefits of creating a scalable application using React and Rails:

Constancy

Both technologies are widely known in the web development world and are also used to create well-known sites such as GitHub, Hulu, Netflix, and Facebook. Additionally, they are very reliable due to the support of a very active development community.

Speed and great service

The developers of Ruby on Rails are no longer required to write everything from scratch because Rails provides a sufficient amount of gems that offer ready-made solutions for various tasks, and this increases the speed of developers and decreases the cost. Also, Rails provides easy-to-use tools for creating backend APIs that communicate with client-side apps without much configuration. In this case, the client-side application is React.

Lightweight

Compared to any other JavaScript library, React is lighter. React’s structured components allow frontend developers to add only the modules they need, reducing unnecessary code.

Maintenance and testing

Ruby on Rails is easier to test, maintain, and develop because of the abundance of available testing libraries and frameworks such as Rspec, Capybara for Rails, etc. Also, the division (React on the frontend and Rails on the backend) helps developers make the development and testing more smooth.

How to integrate ReactJs with Ruby on Rails

There are few ways to integrate Ruby on Rails with React, and I will explain to you two different methods on how to do just that. This will give you a solid starting point in generating the connection between frontend and backend. After that, you can continue creating something amazing!

1. Webpacker gem and React-rails-gem

The quickest and the simplest way to combine React in your Rails app is by using react-rails-gem. This gem converts JSX into an asset pipeline using the Babel transformer, which comes in handy because it uses the Rails management asset.

The Webacker gem offers typical Ruby integration of Ruby on Rails with webpack and the package manager Yarn. It also includes integrations with popular frameworks and libraries such as Vue, React, and Angular simultaneously.

For every Rails starting environment, there is a corresponding file in the config/webpack directory, which is part of the shared.js configuration that is shared among all environments. There is also the configuration.js, which is responsible for processing and accepting the settings from config/webpacker.yml.

In Rails, we have two installation scripts that start the Webpacker installation process:

bin/webpack only for first-time launching
bin/webpack-dev-server for starting the installation with tracking and changing after modifying (recommended)

At this point, make sure that you already have installed Ruby and the latest version of Ruby on Rails before continuing.

First, in your gemfile add the gem ‘react-rails’ and run bundle install to install the gem and run rails g react:install to install the React script. These commands will create a brand-new directory for manifest file and components and add them to the application.js file.

Next, in your app/assets/javascripts/components, create a .jsx file and run this code:

{% code-block language="js" %}
Let GreetingMessage = React.createClass({
   render:function(){
         Return (
     <h1> Hello{this.props.name}!</h1>
)
}
})
{% code-block-end %}

Next, use this component in the view with the help of the react_component helper:

{% code-block language="js" %}
<%= react_component(“GreetingMessage”, name: “Gent”) %>
{% code-block-end %}

This will add a new div with all the props and classes that react_ujs will use later to mount and render the component.

This method is a great starting point for working with React gradually and testing everything by transforming every individual view into components of React. Once you feel more comfortable, you can gradually move to a more powerful setup.

2. React_on_rails gem

Another option to combine Rails with React is with react-on-rails gem. The significant difference between this and the above-mentioned gem is that this gem uses ES6 (ECMAScript 6) and also includes Webpack by default, which means that it does not rely on the Rails asset pipeline or jQuery, this method is recommended if you are a beginner because most of the work will be done by the gem.

In order to install JavaScript libraries, you can use NPM (Node Package Manager) instead of manually downloading gems. Integrating them will give you more possibilities for managing and installing several components.

First, install the node, which will enable you to use NPM to launch JavaScript dependencies. You can download node directly from the website, or you can install it using NVM (Node Version Manager). After installing the node, you can add the gem in your Rails app and install it by running bundle install.

{% code-block language="js" %}
gem “react_on_rails”, “->6”
{% code-block-end %}

To make the script work, we should commit this Git Branch:

{% code-block language="js" %}
Git init
Git add -A
Git commit -m “initial commit”
{% code-block-end %}

After completing this step, run generator of gem’s, which will create Procfile.dev and package.json:

{% code-block language="js" %}
Rails g react_on_rails:install
{% code-block-end %}

After completing those steps, run the bundle install again, which will install exec. Then, launch the bundle again to install execjs, and npm install will install JavaScript dependencies.

{% code-block language="js" %}
npm install && bundle install
{% code-block-end %}

Then, start the Rails server:

{% code-block language="js" %}
foreman start -f Procfile.dev
{% code-block-end %}

This gem creates a custom directory where the client-side code is saved. Now we have set up everything, and we can continue the use of React Components.

Unlock the potential of React and Rails

In this article, you just learned the two most common ways to combine ReactJS with Ruby on Rails. This combination of technologies will enable you to create functional, seamless apps. You’ll reap the benefits of React and Rails backend, mainly their speed, reliability, lightness, and boundless documentation. Most importantly, these technologies will improve your team’s efficiency.

We also talked about the two main ways of combining Ruby on Rails backend with React: