In a previous blog post on using React with Rails, my colleague, Jason Roelofs, made the case for eschewing the react-rails gem and instead going with browserify-rails.

Jason’s argument was mainly about dependencies – the react-rails gem bundles up some JavaScript into a ruby gem and then has you //= require it in application.js. And if you want to use a third-party JavaScript module in your app, then you’re stuck with typical Rails avenues for doing that – vendor the source, or find a version that has been wrapped in a ruby gem so you can put it in your Gemfile and use bundler to manage it. Both of these options are pretty gross, and they’re also quite painful if you decide to go all-out with React and use some of many modules that are now available for the platform.

Fortunately, there’s a better way. Jason’s piece goes into detail on how to let Rails be Rails and let JavaScript be JavaScript, both in the same application, so that you can use npm to manage JavaScript dependencies and import third-party modules into your Rails app.

But as nice as it is to just let npm manage JavaScript dependencies, I really like the view helpers in react-rails, and as I worked on my toy app for converting uploaded Mint.com exports into QIF files (more on that in a later post), I realized that I wanted to be able to use those helpers while still bringing in npm modules the browserify-rails way.

Sadly, most of the instructions I found for combining react-rails with browserify-rails and npm modules were at least a year out-of-date. After an embarrassingly long time of struggling to get the two to play nicely (I’m a relative n00b to JavaScript), I finally got it all working. It turns out that it’s pretty straightforward.

In this bog post, I’ll show you how to use the convenient react-rails helpers to build views while using browserify-rails to bring in npm modules where and when you need them.

How It Works

The secret to getting react-rails and browserify-rails to work together is mostly about what you don’t do. Specifically, don’t follow the instructions in the react-rails readme for setting up your app to work with the gem. This means skipping the packaged installer and so on. Forget about that stuff for now, because we’ll have take a slightly different route to get to the same destination.

Note: The instructions below assume that you’ve followed all of the steps in Jason’s blog post to get your app set up to use browserify-rails with React. If you’re starting all of this afresh, then go ahead and do Jason’s steps first, then come back here.

Now that you’ve got browserify-rails all set up, go ahead and add react-rails to your Gemfile and bundle install. Now let’s configure the app.

Setting up application.js

Your application.js file should look as follows:

//= require_self
//= require react_ujs

window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');

require('./components');

Let’s step through what’s going on with the above lines.

The first thing you’ll notice is what’s missing: we’re not requiring React, because that module is in our package.json, so browserify-rails will automagically make it available to us. Indeed, the only things we’re requiring here are JavaScript modules that we can’t get npm packages for (in this case, there’s only one). For instance, I went ahead and did npm install jquery-ujs -~~save because there’s a version of jquery-ujs that has been extracted from a rails gem and is available via npm; so now I don’t have to require it in the application.js manifest. I also don’t need to require react-server for the same reason -~~ I just used npm for that.

The one JavaScript file I need to make react-rails work that isn’t available via npm is react_ujs, so I need to require it here. To understand the lines of code that follow this require, we need to know more about react_ujs and what it does.

The react_component helper method that react-rails gives you generates a div tag that populates data attributes with a React component’s name and props. After the DOM is loaded, the react_ujs module then goes back and puts the proper containers for the React components inside those divs.

But react_ujs doesn’t import React, ReactDOM, or JQuery itself; rather, it assumes that you’ve imported these and have defined them on window (just as react-server assumes you’ve defined them on global). If you’re just using react-rails for the handy helper features, as we are here, then you have to put these modules onto window manually so that react_ujs can find them and do its thing.

The final line requires components.js, which brings us to our next topic.

Configuring components.js

Because we didn’t run rails g react:install, we must manually create the app/assets/javascript/components/ directory and the app/assets/javascript/components.js file. We’ll still be using those just like the standard react-rails install instructions indicate – all of our components will go into the app/assets/javascript/components/ directory as specified in the react-rails docs, but the components.js file will have different contents:

 require( 'babel-polyfill' );

// Manually add components to window and global
// so that react_ujs and react-server can find them and render them.
window.FileUploadArea = global.FileUploadArea = require("./components/file_upload_area.es6.jsx").default

Just like we had to define React and other modules on window, we also have to define all of our React components there, as well. So for every component we put in our components directory, we have to manually define that component on window for react_ujs (and on global for react-server, if we’re doing server-side rendering).

In the code above, I’ve created a component called FileUploadArea that I want to make available to my Rails views, so to that end I’m defining this component on window and global.

I’ve also required babel-polyfill here so that I can use it in my components.

Speaking of components, let’s go ahead and take a look at my little FileUploadArea component, which is still a work in progress at the moment:

import React from 'react';
import ReactDOM from 'react-dom';
import Dropzone from 'react-dropzone';
import axios from 'axios';
import axiosDefaults from 'axios/lib/defaults'

class FileUploadArea extends React.Component {
  onDrop(files) {
    var authenticityToken = $('meta[name="csrf-token"]').attr('content');
    var instance = axios.create({
      timeout: 1000,
      headers: {'X-CSRF-Token': authenticityToken}
    });

    instance.post('/imports')
    .then((response) => {
      console.log(response);
    })
    .catch((response) => {
      console.log(response);
    });
  }

  render() {
    return (
      <div className="form-control">
        <Dropzone onDrop={this.onDrop}>
          <div>Drop files here</div>
        </Dropzone>
      </div>
    )
  }
}

export default FileUploadArea

I include this half-baked bit of code mainly to show that I can now use any npm package that I’ve added to package.json, and then I can add the resulting component to a Rails view as follows:

<%= react_component('FileUploadArea') %>

With that in my view, react_ujs will do its thing and turn the resulting div into a container that React can mount my FileUploadArea component onto.

Conclusions

What I’ve outlined above isn’t perfect, but it’s pretty decent. This will get me started with integrating React into a Rails app in a way that still feels “railsy” yet doesn’t force me to resort to awkward and painful methods of dealing with third-party JavaScript.

Note also that if I have JavaScript in some of the gems I’m using, I can still require those modules in the application.js manifest just like old times – I don’t technically have to use npm for everything. The old Rails way still works perfectly well alongside the new one.