Blending React into a Rails Project
With the release of Rails 5.1 and the integration of webpack and yaml into rails all that is described here can be done much more simply using what is integrated into rail. That said, if you can't upgrade yet or require serverside render the solutions below are still great options for you.
While the dawn of the large JS frontend app is long past and there is a new magical unicorn and pixi dust JS framework every time you turn around, there are still a lot of stock standard web apps out there. As a web consultancy, these apps have been our bread and butter for quite some time and there is no real need to change them. They just work.
But as things change, it would be nice to add some of the dynamic features of the new javascript hottness to our standard rails apps. Here are a few ways to integrate React into rails.
Notice: there is going to be a stupid amount of alliteration in this post. Fair warning. React rendering in Rails rendered radical web app.
React-Rails gem
I am starting here because this is the easiest way to get started with React on Rails. Per usual, just include the gem in your gem file gem react-rails, bundle install, and then run the install generator rails g react:install.
The reason I say this is it is fully integrated with sprockets and the current rails asset pipeline. if you already understand the asset pipeline and helper methods, then you’re good to go. Also, there is no dependacy on npm.
This is all you need to mount a React component to a spot on the page. That is this helper react_component.
<%= react_component("MyCoolWidget", prop1: "123", prop2: "abcd") %>
Other features include the ablitiy to render the components on the server for faster rendering and SEO, rendering a component as a view, and writing your components in ES2015 syntax or CoffeeScript.
One problem to note is that this doesn't support a module system for JavaScript like Common-JS or ES6 imports. So, working with packages for React that do not have a version that does not export a useable variable is difficult.
React-on-Rails gem
React-on-Rails takes a different approach to fitting React into your Rails app. It sets you up with Webpack, Babel, React, Redux, and React-router which is likely more than you need if you are just adding some fancy widgets to a few pages, but it sets you up nicely to build a full frontend with React.However, just because there is more going on with React on Rails does not mean it's harder to get going. Even though it does a lot for you, the creators really wanted to make it easy to set it up. Add to your gemfile gem "react_on_rails", "~> 6.0", run bundle install and commit to git. Then you can run the generator rails generate react_on_rails:install and run bundle && npm install. So, it is a bit more involved of a setup, but still loads faster than setting this up from scratch with npm.
Using React on Rails is almost Identical to React-Rails:
<%= react_component("HelloWorldApp", props: hash_of_props) %>
While React on Rails is certainly more involved, it has a much higher ceiling in terms of what you can do. Also, since it uses Webpack, which is almost a standard in the React world, it can integrate easily with the many packages out there for React.
Other features include server side rendering and many helper functions on both the Rails side and React side.
Browserify-Rails gem
This is not a way of directly getting React into your Rails app. It is more of a do it yourself approach that makes all of npm’s frontend goodness importable in the asset pipeline.
The install is familiar with adding gem "browserify-rails" to your gemfile and running bundle install. After that, create a package.json file in the root of your Rails app. (you can also do this with npm init) Then use npm to install React npm install --save react. Now you can require and use React in your Rails app.
There are no React specific features. This is truly the do it yourself approach which has its benefits depending on your use case or opinions on how React apps should be built.