Using React With Ruby on Rails

In the past few months, 1minus1 has been working with ReactJS, a JavaScript library used for building application interfaces. We wanted to share some of our experiences and views on using this technology in our applications and in particular, how we used it alongside our de facto choice of jQuery.

Our first major implementation of React was on the Guitar Village website (https://guitarvillage.co.uk) where we sprinkled it on top of Ruby on Rails. We used it to drive everything we would normally use jQuery for, like the menu, modals, filters, and shopping cart.

We decided to use React because we had heard a lot of good things – particularly the speed gains of using a virtual DOM, and the fact that we could use as little or as much as wanted. This part was extremely important to us as we weren’t ready to be using a fully fledged front-end framework like Ember or Angular. So React won the day.

Using React introduced us to a different paradigm to jQuery. As opposed to using jQuery, we would be building state-aware components and then reusing and chaining them. We did still use jQuery for some events and DOM interaction however, and we also used jQuery for AJAX. The nice thing about this mix is that we could use jQuery to do all the AJAX stuff and React to do nice dynamic state UI’s.

Our Front-end Developers used it most and found it fast to pick up, use and develop with. We created around 30 different components for Guitar Village and then nested these components where required which worked well as it fitted in well with the HTML. We found React fast – very fast – and we didn’t have many problems, although we think there may be a couple of areas where we over-used it which played against Rails’ strengths, but these areas were easily fixed.

React is a great library, and once you have head around components and events it makes a lot of sense keeps things separate and easy to read and understand. We will be using it again, and also using ReactNative for our mobile projects – we’ll be doing a blog post about that soon(ish). https://facebook.github.io/react/

Jonathan Hill wrote this here thing with help from the clever peeps.