Modern Javascript uses a lot of libraries and processing tools, including NPM, Yarn and Webpack. So when you use React, you need all these tools. Rails has had the asset pipeline for a long time and used Sprockets as the main tool.
Since Rails 5.1 there's an alternative to Sprockets for Javascript: Webpacker. In Rails 6.0, Webpacker became the default. It uses Webpack to compile all your Javascript files.
One of the big advantages of Webpack is that, in your development environment, it offers live Javascript compilation via webpack-dev-server. You change a file and it gets compiled automatically and even pushed to the browser. This makes development really fast. Of course, in production you want pre-compilation, bundling all Javascript files into a single minified one.
Here I'll show how to create a Ruby on Rails app from scratch with Webpacker and set up ReactJS through Webpacker.
What we'll need
- Ruby 2.5.1 or higher
- Rails 5.2.1 or higher
- Webpacker 3.5.5 or higher
Creating the app
rails new rails-with-reactjs --skip-test --webpack
This command creates the app and sets up Webpacker. It skips the test structure.
bundle exec rails webpacker:install:react
This installs and configures ReactJS as follows:
- Adds babel config at the root
- Creates an example at
app/javascript/packs/hello_react.jsx - Updates Webpacker config to accept
.jsxfiles - Installs all the dependencies React needs
The generated hello_react.jsx example injects a component directly into the app's <body>. I find this pointless, with no structure, and if we use it the component shows up on every page. So I always ignore it and use a folder structure separating all React components inside it. To use a component I rely on a helper from the react-rails gem.
Configuring ReactJS
Add to your Gemfile:
gem 'react-rails'
After saving the file don't forget to run bundle install to download and install the gem.
Install react_ujs:
yarn add react_ujs
react_ujs is a driver from react-rails. It scans the page and mounts components using data-react-class and data-react-props.
Now let's create a simple structure to keep components organized and build our component.
mkdir app/javascript/components
touch app/javascript/components/hello_world.jsx
Inside hello_world.jsx add the following code:
import React, { Component } from 'react'
export default class HelloWorld extends Component {
render() {
return <h1>Hello World</h1>
}
}
To call the component from within a page, we need to add the following config at the end of:
app/javascript/packs/application.js
const componentRequireContext = require.context('components', true)
const ReactRailsUJS = require('react_ujs')
ReactRailsUJS.useContext(componentRequireContext)
In:
app/views/layouts/application.html.erb
# Remove the asset pipeline javascript.
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
# Add the webpacker javascript.
<%= javascript_pack_tag 'application' %>
Using the component in views
Now let's create a page where the magic happens.
rails g controller pages index --no-helper --no-assets --no-controller-specs --no-view-specs
This creates a controller called pages with an index action. It skips test structure, assets and helpers.
In:
config/routes.rb
# Remove
get 'pages/index'
# Add
root 'pages#index'
Call the component in the view using the react-rails helper:
app/views/pages/index.html.erb
<%= react_component 'hello_world' %>
To start the app:
rails s
In another terminal tab:
bin/webpack-dev-server
Done. Now you can create ReactJS components to help develop your Rails app, without using React as a Single Page Application.
I put the example code on Github:
https://github.com/guilhermeyo/rails-com-reactjs
Sources:
Originally posted at guilherme44.com.
Top comments (0)