React on Rails

What is React?

React is the JavaScript library for building user interfaces. It was created by Facebook to make frontend development faster, less error-prone and more maintainable. It is focused only on the view part of the client-side application. Many people choose to think of React as the V in MVC. It’s like ERB for rich frontend solutions. React manages how DOM elements render and behave on your website.

I can quote directly from their official documents

We built React to solve one problem: building large applications with data that changes over time.

Why React?

Simple

Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

Declarative

React makes it easy and fast to create interactive UIs. Design simple views for each state in your application, when the state changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

Composable Components React is all about building reusable components. In fact, with React the only thing you do is build components. Build encapsulated components that manage their own state, then compose them to make complex UIs. Since they're encapsulated, components make code reuse, testing, and separation of concerns easy.

Learn Once, Write Anywhere

React doesn't depend on the rest of the technology stack, so one 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.

Getting started

React comes with a nice gem that integrates this library well with Rails. react-rails is a complete solution to integrate and use all React features out of the box. It has a well documented site for easy installation and usage. https://github.com/reactjs/react-rails

Installation is very simple.

1. Add react-rails in your project’s Gemfile and bundle install.

gem 'react-rails'

1. We need to add React.js build variant (development, production, with or without add-ons) to serve in each environment by adding into config. Thus, for each environment in config/environments, under <YourAppName>::Application.configure do we have to add:

config.react.variant = :production # if you want production React variant

Or:

config.react.variant = :development # if you want development React variant

Typically we would use :development variant in config/environments/development.rb and config/environments/test.rb and :production variant in config/environments/production.rb.

1. We’ll use React addons to provide means for testing our React components later. We'll add this line to our application.rb, inside configure block:

config.react.addons = true

1. . We also have to add react to our manifest JS file. By default it is application.js:

//= require react
//= require react_ujs

We need to restart the rails server to continue. We'll try a small react method to check if react working properly with our rails application. At first make a div with id="example" in any of the view file,

<div id="example">
</div>

And we'll use React render() method for our testing. Lets add this small code in app/assets/javascripts/application.js,

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Now reload the view page and if you see Hello, world! in your div..... Congratulations! You just implement and use react succesfully in your rails app.

We'll discuss more abour react and its work mechanism with a small example. Till then make the world a happy place.

Resource:

https://facebook.github.io/react/index.html

https://github.com/reactjs/react-rails

http://blog.arkency.com/rails-react/