React JS and Rails – real-world results

There are many React JS intros out there, but too few articles about bringing React into an existing Rails app.

At Cook Smarts, we brought React JS into the core of our application, used by thousands of people each week. We moved quickly from the conceptual beauty of React to figuring out how to make it work 100% of the time.

Here’s what React JS delivered in just a bit of time:

A bug-free user experience back to IE 7

Speed, with no detectable latency on the client side

Better structured JavaScript

Thrilled users, who now have a more modern app experience

Developer happiness (that’s me!)

First, some background. Cook Smarts is a service that helps people plan their weekly at-home meals. It suggests meals for the week, and the user can choose which ones to make, add meals from other weeks, adjust serving sizes, and adjust for dietary restrictions.

This is a lot of user interaction. A month ago, users selected which meals to make through a vanilla form. We then generated a static grocery list and meal plan. If they wanted to make any changes, they had to submit the form all over again.

It worked, but it needed improvement. Users wanted the app to remember their choices and allow them to check items off the grocery list. They wanted to make their selections as they browsed, not all at once.

We chose React JS because it is un-opinionated and friendly to existing apps. We could drop React into particular parts of the app without changing any other parts.

After implementing React, the meal planning experience is this simple, with no forms:

React is based on components that you arrange in a tree that basically documents itself. Here are the basic components for grocery list page:

GroceryListContainer

GroceryListItems

GroceryListItem

… and for the menu page:

DaysContainer

Day

DayTitle

DayVersion

DayServings

With React, you code each component separately, in a mix of JavaScript and HTML called JSX. Your component code contains the layout and behavior of that component, and React makes everything happen on the client.

React has minimal impact on your Rails app’s overall structure, making it easy to bring into an existing app. Here were the basic steps to implementing it:

Create a directory in app/assets/javascript called “components” and create your components there as .JSX files

Reference your new components in your views

Create the server-side API’s necessary to feed and interact with your React components (this is not React-specific, just something an app needs to do as it implements more client-side functionality)

I presented to a local meetup about the process of implementing React for Cook Smarts, and hope to put together a how-to soon. In the mean time, check out these great resources for incorporating React and Rails: