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 integratereact-rails
gem withwebpacker gem
. This can be done to integrate webpack with Rails usingReactRailsUJS
. 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="{"name":"Icicle"}"></div>
The actual component is identified by the name of the componentGreetUser
by the helperreact_component
. Theprops
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 thatreact_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 howwebpack
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
andnpm
, 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!
Related Post
Importance of Developing Grocery Delivery Application for Grocery Industry
The retail industry has seen tremendous transformations, with mobile app development services playing a significant role. Similarly, we've...