React-Rails Gem or React/Node?

Our team was tasked with building a React front end for a job search application created by mod 4 Turing students over the past couple of modules. Here is what the current front end looks like:

It’s pretty simple, just a list of many jobs scraped from Authentic Jobs, Stack Overflow, and We Work Remotely. The links on the left would theoretically filter jobs by stack, but right now they are not active. To spice things up, we decided to build a React front end to the Rails app. We were quickly faced with the decision of using the react-rails gem or having a completely separate front end app. After a bit of discussion, we decided to have a completely separate JavaScript client-side app and make AJAX calls to our Rails API. The decision came down to a few points:

  • A separate client-side app allows more freedom. Sure, there are some downsides- setup is definitely more complex. You have to setup your CSS, Bootstrap, and your module bundler (we are using Webpack). But theoretically, once the setup is complete, you can go about building your components.
  • More flexible- not embedded in a Rails app. Could be more easily reused for other projects.
  • Better learning opportunity. The setup may be painful, but we will learn a lot from the experience.
  • You can still easily implement routes with react-routes.

If, however, you have a small application or are short on time, the react-rails gem is easy to implement. The setup is much faster than a React/Node app. Installation is easy-

Add the gem:

gem ‘react-rails’

And in command line:

rails g react:install

All components should be added to app/assets/javascripts/components and have the js.jsx extension.

In your Rails views, render component:

<%= react_component 'Main' %>

So far, we have had a pretty positive experience with our decision to make a React/Node front end. Sure, there are some growing pains, but our pages render quickly!

Like what you read? Give Chelsea Johnson a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.