Magic happens when React & Rails come together

A couple of months ago, after a long hacking night, Juan and I were discussing front-end library options for our upcoming app project over Slack. Overloaded with client work, we were looking for a library we can learn in a short time.

So Ember.js seemed like a great choice at first. There is a good amount of documentation about Ember in the Rails community and there are many popular apps built with Ember.js already. However, the learning curve for Ember is a bit hard to get along, especially if you are just getting into Javascript development as we were.

Then we tried React.js, even though the official React documentation is not as great as Rails’ documentation, after a couple of hours of hacking, React felt very simple to learn and in a week or so we decided to re-build all our apps with React.

The Javascript language has improved significantly over the past few years; partly due to the advent of ES6 (ECMAscript 2015). React utilizes ES6 along with JSX, which is a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render subcomponents.

Coming from Rails mindset, JSX felt like what ERB is to Rails. It makes it very easy to put out conditional HTML and interact with javascript actions.

React community is growing fast and while it is possible to develop an app just using React; we prefer to merge magic of React with the power of Rails. Rails 5.1 is out and it comes with out of the box support for Webpack/React/Angular/Vue.js. It includes webpacker gem which lets us use Webpack to manage app-like JavaScript modules in Rails.

Webpacker in Rails coexists with the asset pipeline. This structure provides a powerful separation of front-end from the back-end. While benefiting all great features comes out of the box with Rails, front-end development gets done much faster with ES6 + JSX combination and React flow. The code becomes easier to work on and maintain for teams.

And as Terry Pratchett said, “It’s still magic even if you know how it’s done.

by Ugurcan Kaya