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.
Notice: there is going to be a stupid amount of alliteration in this post. Fair warning. React rendering in Rails rendered radical web app.
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
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("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.
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.
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.
Rails and React – React and Rails
React and Rails do work well together and these gems make that marraige of frontend magic with backend magic much easier. Just choose the level of integration that you need and even the level at which you have to deal with npm. Each of these options leverage the awesome ecosystem around the Rails asset pipeline to make your job easier. Happy coding.