googleads
How To Integrate Rails With React With Webpacker | A Guide
preloder
Guide For Freshers ReactJS Ruby on Rails

How To Integrate Rails with React : A Guide For Ruby On Rails & React Developers

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.

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.

Then install the gem with, 

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

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.

Add the following code in articles.js.jsx

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

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.

Install it with our app using 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,

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.

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

Now we can run the installation script.

This will create the Procfile.dev file.

Then run bundle install for installing Execjs and npm install for installing javascript dependencies.

Now we can start our rails server using foreman.

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.

Then run bundle to install hyperloop in our application.

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

It will create the hyperloop structure inside the /app directory.

This how the output will look like,

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

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

It created article.rb under app/hyperloop/components.

Now we can add routes to routes.rb file.

Now start our rails application,

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. 

Want to Build an Amazing  Web Application for your Business

 

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.

Like What You're Reading ?

 

The following two tabs change content below.

Arjunan Subramani

Senior Software Engineer | Around 4 Years of experience in Web development and Testing arena. Plus, hands on expertise in Ruby, Ruby on Rails, Watir, Ruby Cucumber.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call