React with Rails will make you awesome Web Developer

Background:
I have been working with Rails from last three year and I love it so much.
Recently react is gaining attraction. Most new projects in my company is of react now. And Rails is favourite option for back end with React as a front end. The main aim for this article is to kick start with React on Rails. I can’t hold myself so, let’s begin.

Basic of React:
React is view part of MVC framework. It helps us to build user interface. Three major features of React from it’s Github page as;

Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.

Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

We will not go in depth for react as a JS library. I am assuming you know a bit about React JS and if not then follow React documentations.

Basic Environment config:

• Ruby v 2.3.1p112
• Rails 5.0.4
• Node JS 7.3.0 (above 5 is recommended)
• Linux Ubuntu 14.04 LTS

Step-1 Environment Setup:

Create new Rails app with Rails new command: rails new react_on_rails
Add following gems to Gemfile

• gem ‘react-rails’, ‘~> 1.7’, ‘>= 1.7.1’
• gem ‘webpacker’, ‘~> 2.0’

Since current version of react-rails gem has some problem so, you need to mention version of react-rails gem as of now otherwise you will get an error:

/home/mayur/.rvm/gems/ruby-2.3.1@app/gems/react-rails-1.0.0/lib/react/rails/railtie.rb:49:in `block in <class:Railtie>’: undefined method ‘prepend_path’ for nil:NilClass (NoMethodError)

Please make sure that you have nodejs installed prior to the above step. If you don’t have nodejs installed then use following quick steps to setup node.

(1) curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
(2) sudo apt-get install nodejs

Install Yarn: https://yarnpkg.com/lang/en/docs/install/

For installing Yarn create file /etc/apt/sources.list.d/yarn.list with this line:
deb https://dl.yarnpkg.com/debian/ stable main and run sudo apt-get update && sudo apt-get install yarn

We are using webpacker here. Webpacker makes it easy to use the JavaScript pre-processor and bundler Webpack 2.x.x+ to manage application-like JavaScript in Rails. It provides following tasks:

• rails webpacker:install
• rails webpacker:install:react
• rails generate react:install

You would also like to install atom plugin for JSX. It will help you to highlight JSX syntax and closing of tags. To install this run:

apm install react for atom plugin

Step 2 Create first component:

Now our environment for making our first move is ready. When you run rails generate react:install command, it will generate:

• components/ directory for your React components
• ReactRailsUJS setup in packs/application.js
• packs/server_rendering.js for server-side rendering

We have to put all our components under components/ directory.
Let’s create out first component named hello_world.jss with following content.

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  render() {
    return(
      <div>
        <h1>Hello World from React</h1>
      </div>
    )
  }
}

We have React component and we can render it on our views by:

<%= react_component("HelloWorld") %>

I have added a view page and made necessary changes to render this component. You can have this code on Github.

Step 3 Deploy to Server

Deploy React on Rails application to server using Capistrano is made so easy. I am deploying this app to EC2 server. You need Yarn for installing dependencies. Yarn is a package manager for your code. For that, add

gem ‘capistrano-yarn’

to Gemfile and require this to your Capfile: require 'capistrano/yarn' Then just run cap production deploy

Summary

This is very basic tutorial for beginners and we have covered following topics:

• Setup React environment with necessary gems and nodejs
• Install React in our Rails Application
• Create React component and render it to Rails view

I will cover more topics for React on Rails in my following articles.

Reference:

• https://github.com/facebook/react
• https://facebook.github.io/react/
• https://github.com/reactjs/react-rails
• https://github.com/rails/webpacker

Call To Action

Do you want to be awesome React on Rails developer? Subscribe my weekly tutorials by clicking over here. This will make you really awesome React on Rails Developer.

About Author

Mayur is a Chief Technical Architect in his organisation. He has more than three years of experience in designing and building scale able applications using different technologies.