I recently built a mostly static Ruby on Rails website that involved a couple fairly complex JavaScript features. I decided to use React.js for these features. Below are some notes about what I did and how it went.


The JavaScript features I was building mapped nicely to React components, and (initially) I didn’t see the need to share state or a lot of code between components. I could have built these features using jQuery, but I thought the code would benefit from a bit more structure. So I decided to use React, and to not use any additional tools like Flux or Redux. I kept this all in the asset pipeline, and simply embedded React components right inside my traditional Rails view files. Also, I decided to use ES6 and to not use CoffeeScript (getting JSX to work nicely in CoffeeScript seemed kind of impossible).


I used the react-rails gem to get everthing set up. It allows you render React components inside your Rails views by simply doing something like this:

    <%= react_component('HelloMessage', name: 'John') %>

As you’d probably guess, this component would have a prop “name”, set to “John”. The gem has a large number of options, few of which I used.


Overall, this was a nice experience. The react-rails gem worked well. Plain React integreated seamlessly with Rails and gave me just the right amount of structure to keep me from writing lots of boilerplate code or repeating myself. Keeping things simple meant other peeople who were not versed in React could jump in quickly without having to worry about learning something like Flux. Our designer could figure out JSX easily.


The most significant problem I ran into involved lack of a good way to share state and code among React components with different parents. I ran into this problem way earlier than I anticipated. I figured out simple solutions to both problems, but the next time I reach for React I’m going to start off with something like Redux.

Example App

Here is an example app I made using these techniques. It was part of a RailsSchool class I recently taught.