How to use React.js with Ruby on Rails 5
Tags: rails, ruby, react, javascript
Published: 2017-07-24 09:08:54

---
title: "How to use React.js with Ruby on Rails 5"
published: true
description: A quick look at 4 different ways of using React.js with Ruby on Rails
tags: rails, ruby, react, javascript
canonical_url: https://learnetto.com/blog/3-ways-to-use-react-with-ruby-on-rails-5
---

![React with Ruby on Rails](https://learnetto-blog.s3.amazonaws.com/blog/2017-07-15/1500116627139-howtousereactwithrails.png)  

_Originally published at [Learnetto.com](https://learnetto.com/blog/3-ways-to-use-react-with-ruby-on-rails-5)_.


**IMPORTANT UPDATE (6 July 2017)**:Â  With the release of Rails 5.1, Rails now has native support for using React via the webpacker gem. Check out the free lesson on how to do this in theÂ [Free React on Rails course](https://learnetto.com/users/hrishio/courses/the-free-react-on-rails-5-course)Â or seeÂ [this blog post](https://medium.com/react-on-rails/free-tutorial-how-to-use-react-with-webpacker-and-rails-5-1-92af8e8d9d63).  

There are a few different ways to useÂ [React](https://facebook.github.io/react/)Â inside Ruby on Rails apps. In this post, I'll cover 3 of the most popular ways.  

**1.Â **[react-rails gem (https://github.com/reactjs/react-rails)](https://github.com/reactjs/react-rails)  

The react-rails gem is the simplest and quickest way to start using React inside your Rails app.  

It uses the default Rails asset management and automatically transforms JSX into the asset pipeline using the Ruby Babel transpiler.  

Assuming you already have a recent version of Ruby and the Rails gem installed, here's how you get started with react-rails.  

Add the gem to your Gemfile:  


```
gem 'react-rails'</pre>
```

Install the gem:  


```
bundle install
```

Run the react-rails installation script:  


```
rails g react:install
```

This will create a components directory, manifest file and add them to the application.js file.

Then create your React component file with a .jsx extension and save it underÂ _app/assets/javascripts/components_.  

```
var HelloMessage = React.createClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});
```

Finally, use the component in your view with theÂ _react_component_Â helper method.  

```
<%= react_component('HelloMessage', name: 'John') %>
```

The method takes the name of the component as the first argument and any props as the second argument. It adds a div with the relevant class and props, which is then used by the react_ujs driver to mount and render the component.  

That's all you need to get started!Â   

There's a whole lot more react-rails offers, including choosing react builds for your environment, server-side rendering, writing components in ES6 and component generators, which are covered in ourÂ [React on Rails course](https://learnetto.com/users/hrishio/courses/the-react-on-rails-course).  

This gem allows you to start with React gradually and test the waters by converting individual views into React components. Once you're happy and confident with it, you can convert more and/or move to a more powerful setup.  

**2.Â **[react_on_rails gem (https://github.com/shakacode/react_on_rails)](https://github.com/shakacode/react_on_rails)  

This is another very popular gem for integrating React in Rails. The key difference with react-rails is that it uses EcmaScript 6 (ES6) by default and state-of-the-art JavaScript tooling, including Webpack, instead of relying completely on the Rails asset pipepline. It alsoÂ  doesn't depend on jQuery.  

Instead of using the Rails asset pipeline for ES6 compilation, react_on_rails only uses it for including the JS that Webpack compiles.  

You can use npm to install JavaScript libraries, instead of having to use gems or manually downloading and including them.  

It gives you a lot more power at the cost of installing and managing a few extra things.  

To get started, you need to install node so that you can use npm to install JavaScript dependencies. You can download node directly fromÂ [their website](https://nodejs.org/en/)Â or install it usingÂ [nvm](https://github.com/creationix/nvm).  

Once node is installed, we can start by adding the gem to the Gemfile of our Rails app:  

```
gem "react_on_rails", "~> 6"
```

Install it by running bundle:  

```
bundle
```

Now, we need to commit this to git, otherwise the gem's installation script won't work.  

```
git init
git add -A
git commit -m "Initial commit"
```

Then run the gem's generator to create the package.json and Procfile.dev files:  

```
rails generate react_on_rails:install
```

Then run bundle again for installing execjs and npm install for installing JS dependencies:  

```
bundle && npm install
```

Then, start the Rails server with foreman:

```
foreman start -f Procfile.dev
```

We're using foreman to run Webpack, in addition to the Rails server.

Now that everything is set up, we can create and use React components.Â   

The gem's generator also creates a client directory, which is where all client-side code needs to go.Â   

A Hello World example is included under the client directory. Below is a simplified extract of the code for a component displaying a Hello message with a name passed as a prop.  

```
import React from 'react';

export default class HelloWorld extends React.Component {
  constructor(props, _railsContext) {
    super(props);
  }

  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}
```

We can use the react_component helper method to render the component in a view in the same way we did with the react-rails gem.  

```
<%= react_component("HelloWorldApp", props: {name: 'John'}) %>
```

If you're already familiar with Webpack and modern JavaScript concepts and tooling, then go right ahead and start with react_on_rails. Otherwise, it might be better to get a feel for the core concepts of React with react-rails first and then move on to react_on_rails.  

Have a look at theÂ [React on Rails doctrine](https://blog.shakacode.com/the-react-on-rails-doctrine-3c59a778c724)Â to get some insight into the design decisions behind react_on_rails.  

**3\. Rails API with a separate frontend React app (Nodejs + Express)  

**A third option for using React with Rails is to separate the backend and frontend into two different apps.Â   

The backend can either be a standard Rails app exposing some API endpoints with JSON output or it can be a Rails API-only app. The frontend is an Express app running on Nodejs, which uses React and talks to the Rails API.  

Obviously, building, running and maintaining two separate apps is much more work. But there are some benefits.  

Making an API may be a good idea anyway to enable you to build other clients like mobile apps (although note that you can use a Rails API with the gems too).  

A Node app is the natural environment for a JavaScript library like React, so you may find you're more productive and always have access to the latest JS tooling by default. Server-side rendering of components is also faster.  

If you work in a medium-large company with dedicated teams for backend and frontend development, then separating the two code bases makes sense.  

You do have to deal with the complexities of running two apps. You either have to implement Cross Origin Resource Sharing (CORS) or proxy requests through a server like nginx.  

[This article](https://medium.com/@alexfedoseev/isomorphic-react-with-rails-part-i-440754e82a59)Â by Alex Fedoseev goes into some detail on what such a setup would look like. It's an excellent read to get an insight into what's involved and whether it's a suitable approach for you.  

So that's 4 of the most popular methods of using React with Rails. Research and experiment with the ones you think make most sense for your situation and please leave a comment to share your experiences!  

If you found this article useful, check outÂ [The Complete React on Rails course](https://learnetto.com/users/hrishio/courses/the-react-on-rails-course)for detailed hands-on video lessons on using React with Rails.