6 Essential Steps to Set Up React in Rails Using Webpacker

Integrating a modern JavaScript framework like React into a Ruby on Rails application used to feel like a messy puzzle. With the old asset pipeline and Sprockets, developers often struggled to manage dependencies, compile JSX, and maintain a smooth development workflow. Everything changed when Rails introduced Webpacker—a seamless wrapper around Webpack that brings modern JavaScript tooling to Rails developers. In Rails 6, Webpacker became the default JavaScript compiler, making it easier than ever to incorporate libraries like React. This guide walks you through six focused steps to configure ReactJS in a fresh Rails app using Webpacker. You'll learn how to set up the environment, install necessary gems, write your first component, and avoid common pitfalls—all while maintaining a fast, live-updating development experience.

Prepare Your Development Environment
Generate a New Rails App with Webpacker
Install React via Webpacker
Add the react-rails Gem and Helper
Create an Organized Component Structure
Connect Components to Your Views

1. Prepare Your Development Environment

Before diving into code, ensure your system meets the baseline requirements. Webpacker plays nicely with Ruby 2.5.1 or higher and Rails 5.2.1 or higher—but for the smoothest experience, use Rails 6.0 or later, where Webpacker is the default. You'll also need Node.js and Yarn installed (Webpacker relies on Yarn for dependency management). A quick check with ruby -v, node -v, and yarn -v confirms you're ready. Additionally, Webpacker itself should be version 3.5.5 or higher—though the version bundled with recent Rails releases is more than sufficient. If you're upgrading an existing app, make sure your Gemfile includes gem 'webpacker' and run bundle update webpacker. Having these prerequisites in place avoids frustrating hiccups later.

6 Essential Steps to Set Up React in Rails Using Webpacker — Source: dev.to

2. Generate a New Rails App with Webpacker

Create a new Rails application using the --webpack flag to automatically configure Webpacker. This command skips the default test suite (you can add it later) and sets up everything you need:

rails new rails-with-react --skip-test --webpack

After the generator finishes, navigate into the project directory. You'll notice a app/javascript/ folder—this is where all your modern JavaScript will live. Webpacker also creates app/javascript/packs/, the default entry point for your bundled files. The --webpack flag installs and configures Webpacker with sensible defaults. If you ever need to verify the installation, run ./bin/webpack-dev-server to start the dev server and see if it compiles without errors. This foundation sets the stage for adding React in the next step.

3. Install React via Webpacker

Webpacker includes a dedicated installer for React. Run:

bundle exec rails webpacker:install:react

This command does four things automatically: it adds a Babel configuration to the root of your app so that JSX is transpiled correctly; it creates an example file at app/javascript/packs/hello_react.jsx; it updates the Webpacker configuration to recognize .jsx extensions; and it installs all necessary React and Babel dependencies via Yarn. The example file is a simple component that injects itself into the page's <body>—but this approach is often too simplistic for real projects. You'll likely want to ignore that file and build your own component architecture. The important thing is that your environment now understands React syntax. You can confirm by running yarn list react to see that the library is present.

4. Add the react-rails Gem and Helper

To easily mount React components inside Rails views, install the react-rails gem. Add this line to your Gemfile:

gem 'react-rails'

Then run bundle install. Next, install the corresponding JavaScript library via Yarn:

yarn add react_ujs

react_ujs is the client-side driver that scans your page for elements with data-react-class and data-react-props attributes and mounts the appropriate React component. This is much cleaner than manually injecting components into the DOM. The gem also provides a react_component helper that you'll use in your views. After these steps, your Rails app is fully equipped to communicate between server-rendered HTML and client-side React components.

5. Create an Organized Component Structure

Forget the auto-generated hello_react.jsx—instead, create a dedicated directory for your custom components. This keeps your code clean and scalable:

mkdir app/javascript/components
cd app/javascript/components
touch hello_world.jsx

Inside hello_world.jsx, write a simple React component:

import React, { Component } from 'react'

export default class HelloWorld extends Component {
  render() {
    return <h1>Hello World</h1>
  }
}

Now you need to tell Webpacker to look inside the components folder. Open app/javascript/packs/application.js and add these lines at the end:

const componentRequireContext = require.context('components', true)
const ReactRailsUJS = require('react_ujs')
ReactRailsUJS.useContext(componentRequireContext)

This code dynamically requires all files inside app/javascript/components and registers them with react_ujs. Now you can use the react_component helper in any view.

6. Connect Components to Your Views

Now it's time to actually render your component on a page. In your layout (app/views/layouts/application.html.erb), replace the old asset pipeline JavaScript tag with the Webpacker pack tag:

<!-- Remove this -->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- Add this -->
<%= javascript_pack_tag 'application' %>

Then, in any view (e.g., app/views/welcome/index.html.erb), mount your component using the helper:

<%= react_component('HelloWorld') %>

When the page loads, react_ujs will instantiate the HelloWorld component and render it exactly where you placed the helper. You can pass props as a second argument: <%= react_component('HelloWorld', { name: 'World' }) %>. This gives you full control over component placement and data flow.

Conclusion

Setting up React in Rails with Webpacker no longer needs to be a headache. By following these six steps—preparing your environment, generating a Webpacker-powered app, installing React via the dedicated generator, adding the react-rails gem, creating a structured component folder, and using the helper to mount components—you get a robust, scalable foundation. You now have live compilation during development (thanks to webpack-dev-server) and minified bundles for production. Experiment with more complex components, state management, and routing. The Rails + React ecosystem is powerful—and with these steps, you're already on the right track.

💬 Comments ↑ Share ☆ Save