Integrating React with Rails 4

We have recently been exploring the library React JS in order to see how we could use it as a tool in our projects, here at Standard Code. While I was getting React integrated with one of our open source projects, rails-starter-kit, I encountered a few pitfalls, and I wanted to share what I learned with the world. This post will be a guide to integrating React JS with a Rails 4 application, using the 'react-rails' gem. For the most part, you can follow right along with the README on the gem's GitHub repo, however, there are some caveats that exist if you are integrating with a Rails 4 application (as opposed to Rails 5) that I will cover here. First, there are two options for installation that the README describes. The first option is to install the gem in addition to Webpacker, which will handle the compiling of the React JS files we create. The second option is to install the 'react-rails' gem by itself, and let the asset pipeline handle the preprocessing and compiling of the React JS files with the rest of the assets in the app. I chose the latter, because I am familiar with the asset pipeline, and I didn't feel like bringing some new technology into the mix. That was my first mistake. I followed the installation process closely and carefully, but for some reason I was not able to get React to load properly. After some significant time spent troubleshooting, I decided to give up on that option and try installing the gem with Webpacker. Suffice to say, it worked. So, do yourself a favor and add these to lines to your Gemfile... gem 'react-rails' gem 'webpacker' Then $ bundle install Now, we aren't in the clear yet. Following along with the README documentation, the next step is to run the command that will install the Webpacker binaries. This is where Rails 4 users will hit an obstacle. The instructions will tell you to run the following command $ rails webpacker:install That won't work. There will be an error, and it won't immediately be clear what you are doing wrong. The quick answer is that Rails 5 wrapped all of its commands in the rails namespace, in order to make the commands consistent. Because we are installing Webpacker in a Rails 4 app, you will need to use rake. So, go ahead and run the following two commands $ rake webpacker:install $ rake webpacker:install:react Your terminal output should indicate that the commands were correct and the installation will begin. However, running the commands above may still give you an error. If that's the case, then it is most likely that you need to install Yarn. Yarn is a package manager that Webpacker depends upon. It can be installed via Homebrew. $ brew install yarn After installing Yarn, run the rake commands from above again, and this time you should see the installation succeed. The final command to run is $ rails generate react:install This will finish the installation process, and create a new directory /app/javascript/components/ where all of the components we generate will be stored. You can now get started working with React inside your Rails 4 application. To test this out you can use the new generator that came with the 'react-rails' gem to generate a new component. $ rails generate react:component HelloWorld greeting:string This will generate a new file, HelloWorld.js, under /javascript/components. This file will contain all of the logic for this component. In order to render the component to the view, we first need to include a javascript tag in the head of our application.html.erb. If you look at the file /app/javascript/packs/application.js, in the commented section there is instruction to do so. Add this line to application.html.erb<%= javascript_pack_tag 'application' %> By adding that line, the app will now be able to reference the application.js file that Webpacker uses to compile all of the components. With that in order, you can now utilize the view helper method that came with the gem. Include this helper in the view you wish to render the component <%= react_component "HelloWorld", {greeting: "Hello"}%> The helper method takes two arguments; the name of the component as a String, and a Hash of props, which get passed to component. Well, that's it. I hope this helps you get up and running with React JS in Rails 4.