3 Simple Ways of Integrating React.js with Ruby on Rails

Ruby on Rails has proved to be a really productive monolith web application framework. It is a full-stack framework that allows developers to develop and deploy applications easily. For businesses and startups, it acts as a platform that helps in getting the product among the customers easily.

Ruby on Rails is used to ship with jQuery by default. jQuery is a great library. It is also small and robust. It makes things like HTML document easy to traverse and manipulate. Even event handling, animation, and Ajax becomes simpler. This can be done with an easy-to-use API.The plugin architecture is also pretty good for extensibility. Ruby on Rails has a wide community support.

In applications where the key factor is performance, the DOM-manipulation is like a congestion because it needs traversing the entire web page or document. This is done to change or update a part of the view. Another holdup is the actual refresh of the page. It requires the assets to be loaded along with the actual content of the page. One way to handle this is with the help of Single Page Applications (SPA's).

In this article, we will discuss some of the ways in which you can integrate React with Ruby on Rails:

React is a JavaScript library that is created and maintained by Facebook. It is mainly used for building user interfaces. The major aim of React is to be declarative. It makes the code more predictable and also easier to debug. React can be considered as the "V" (View) in "MVC" (Model, View, Controller architecture). Views are modeled as components. The advantage of this is that the rich data can be passed through the app. The state can also be maintained outside the DOM.

Integrating React with Ruby on Rails:

1. react-rails gem and webpacker gem -

The react-rails gem is by far the simplest way for getting started with React and JSX in a rails application. The Ruby on Rails asset pipeline is used here to automatically transform JSX into Ruby on Rails compatible assets through the Ruby Babel Transpiler. For advanced use cases, you can easily integrate react-rails gem with webpacker gem. This can be done to integrate webpack with Rails using ReactRailsUJS. Another positive side of using this gem is that it is easily compatible starting from Ruby on Rails 3.2+ Take a look at how you can integrate this with an existing Ruby on Rails application. Implementation.

Let us assume you already have a Ruby on Rails application. You can then start by adding the gem to the dependencies.

# Gemfile
.
.

gem 'react-rails'
.

Installing the Gem with

bundle install

Running the generator.

rails g react:install

This way we get a components directory. It is under app/assets/javascripts/. It is a manifest file which further adds them to the application.js's dependency.

A simple component can now be created by creating a file under the components folder. You can call this greet_user.jsx

// app/assets/javascripts/components/greet_user.jsx

window.GreetUser = React.createClass({
  render: function() {
    ( <h1>Hello {this.props.name}!</h1> 
) 
} 
}); 

This component can be invoked from any of the views.

<!-- app/views/greet/index.html.erb --> 
<%= react_component('GreetUser', name: 'Icicle') %> 
<!-- becomes: --> <div data-react- data-react-props="{&quot;name&quot;:&quot;Icicle&quot;}"></div>

The actual component is identified by the name of the component GreetUser by the helper react_component. The props are then accepted as the second argument.

2. react_on_rails gem -

React on Rails gem is another popular gem. It helps in integrating React with Rails. This is often considered to be a good choice for developers, especially for those who are aware or already comfortable with javascript toolings like webpack. The main difference here that react_on_rails gem introduces us with is that it will allow us to create React Components using ES6. It further makes use of webpack to compile the React components to JS. This is understood by Rails in opposition to relying on the Rails assets Pipeline.

Now that you have the power of webpack, you can easily configure it as per your needs. But there is a drawback here. You need to install tools like npm. In addition to that, you also have to understand how webpack works.

In order to get started with this Gem, you will first require nodejs. This is done because the gem will be using npm. It is used to download and install the necessary JavaScript dependencies.

The instructions to install NodeJS can be found on NodeJS website.

Once you are done installing node and npm, you can then start by adding the gem to the Gemfile.

Gemfile gem "react_on_rails", '8.0.0' # use latest gem version, prefer exact version

You need to have git. You also need to commit your work. If not, rails generate will not work properly when you actually generate react_on_rails.

git add --all git commit -am "Adding react_on_rails gem"

The generator can now be run to install and setup the folder structures.

bundle install && npm install

You can then start your rails server using foreman.

react_on_rails is internally dependent on forman, It is required to start an instance of the Rails server and also starting Webpack. You need to configure it to watch and compile the javascript changes.

foreman start -f Procfile.dev

3. Ruby on Rails API with ReactJS Front-End

Ruby on Rails can be used as an API only application while ReactJS can be used as a standalone application.

• To develop and maintain a stack that separates the backend application for the front-end seems scary. But it has its advantages.
• It allows the front-end team to make use of the vast JavaScript libraries. These are available without being bothered by the constraint of Rails.
• Allows you to bring in other clients that also talks to the same Rails API which is initially responsible for serving data to the Web interface.
• It is also easier to scale if you are considering the Rails API to be communicating over JSON.

Conclusion

After going through the article, you will be able to integrate ReactJS with Ruby on Rails. These ways can be used for both mobile and web applications. It can be helpful for those who are not quite aware of how to do the integration. A lot of React native developers out there are comfortable with this, who can help you out.

Hopefully, the article was helpful. Happy developing!