In this course, we'll look at four ways:
Separate frontend React app with a Rails API
Initially, we are going to focus on using React inside Rails with webpacker and later on using React in a separate frontend app with a Rails API.
We’ll place less emphasis on the other two methods using third party gems. But let’s have a quick look at the first three methods in this lesson.
This tutorial is based on Ruby 2.6.5 and the latest Rails gem (6.0.1 at the time of writing this tutorial). You can install and use Ruby 2.6.5 using Ruby version manager (rvm) like this:
$ rvm install 2.6.5
$ rvm use 2.6.5
You can install Rails 6.0.1 like this:
gem install rails -v=6.0.1
Create a new Rails app with React support via webpacker:
$ rails new eventlite --webpack=react
There’s one example React file hello_react.jsx, which defines a simple functional React component called Hello that can display the words “Hello React!” on a page. It can also take a prop called name to display it instead of the word “React”.
react-rails is the official React community gem for integrating React with Rails. The main benefit of using this gem is the react_component helper method which makes it easy to pass Rails data to components.
You can use react-rails with webpacker or with Sprockets (to bundle the JSX into the asset pipeline).
a. Using react-rails with webpacker
Add the react-rails gem to the Gemfile of the app we created above and install it:
$ bundle install
Then run the react-rails generator:
$ rails generate react:install
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
We can use the same Hello component we created earlier with webpacker by moving it to the new components directory. We also need to rename the file to ‘Hello.jsx’ (case sensitive).
react-rails provides a convenient helper method called react_component to render React components inside views.
First let’s export the component and remove the call to ReactDOM.render on document load. The component code will now look like this:
Now if you restart the Rails server, you can see the gem in action in your browser at http://localhost:3000:
The react-rails gem also provides a component generator to automatically create a basic component by passing it a component name and props (with their proptypes). It’s similar to Rails generators for creating models and scaffolds:
react-rails also gives you the option to continue using the default Rails asset pipeline to serve your React code, instead of using webpacker.
You can use this option by installing just the react-rails gem without the webpacker gem, and following the same steps as above.
The other most popular third-party gem for integrating React into Rails is the react_on_rails gem created by ShakaCode.
Similar to the react-rails gem, now that Rails already provides an easy way to use React via webpacker, you have to see if the stated benefits of the react_on_rails gem apply to your situation.
The main benefits include better support for server side rendering, easy passing of props to React components (with the react_component method just like react-rails), and Redux and React Router integration.
This gem requires webpacker. To use it in a new Rails app with webpacker, let’s install the gem first.
Add it to to the Gemfile:
gem 'react_on_rails', '11.1.4'
$ bundle install
After installing the gem, we must first commit the code to git or the gem’s install generator won’t run. This is an easy step to miss, so make sure you do it before you proceed.
$ git add -A && git commit -m "initial commit"
Once you’ve committed the code to git, run the install generator and start the Rails server:
$ rails generate react_on_rails:install
This generates some example code and configuration and installs some dependencies.
import ReactOnRails from 'react-on-rails';
import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';
// This is how react_on_rails can see the HelloWorld in the browser.
react_on_rails also provides a react_component helper method for rendering components inside views and pass props to them. You can see an example in the automatically generated view app/views/hello_world/index.html.erb: