Table of Contents
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.