Rails + React(react_on_rails) + Heroku

The purpose of this blog is to save people from a headache in which I have been since past one week. It took me too much time to figure out all the configurations to setup react_on_rails in my existing rails api only project. In this blog we will start a rails project from scratch and then we will see how you can add react to it. It is very easy to integrate react_on_rails if you haven’t yet started, but if you already have a project which is API only rails app then it becomes very difficult to add react_on_rails in it. Once we have rails+react running project we will deploy it on Heroku. We will divide this tutorial in the following parts.

  1. Introduction to some important terms
  2. Create and understand hello-world rails+react app using react_on_rails
  3. Add react_on_rails in existing rails project
  4. Deployment on Heroku

Introduction to some important terms

This section is for beginners. If you are already familiar with the concept of Reactjs, Babel, Webpack, Meterial-ui, Foreman, Puma and some more of these then you can surely skip this section and go ahead.


It is a javascript library to create user interface. To understand in simple terms, think of a component or self-sufficient component. Now, what is a component?

A component can be anything. It can be a very small button or may be an entire login page. It is up to you how you want to define it and reuse it. You can create a component in one application and use it anywhere by supplying it’s properties. Components have some properties and those properties can have different states. To understand it better look at the diagram. It has single input area which have three different state. Every time you update this input value, the state of the component changes. Every component has one render function which renders your component on web page. Whenever you change the state of you component this render function updates the content accordingly.

This much content should be enough for you to understand further tutorials. If you want to know more please refer to reactjs official documentation.

Diagram of input areas


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.