React on Rails Explained: Modern Frontend Development with Rails 8

As of early 2026, ルビー・オン・レール (commonly called Rails) continues to be a leading framework for building robust, convention-driven web applications. Rails 8.0, released in November 2024, introduced significant simplifications with features like Kamal for deployment, Solid Cache/Queue/Cable for built-in alternatives to external services, Propshaft as the default asset pipeline, and a native authentication generator. Rails 8.1, released in October 2025, added further enhancements such as Active Job Continuations and Local CI.

Rails’ default frontend stack emphasizes Hotwire (Turbo and Stimulus), delivering highly interactive experiences through server-rendered HTML updates—”HTML over the wire.” This approach minimizes JavaScript complexity and enables rapid development for many applications.

However, for projects demanding rich client-side interactivity, advanced state management, or extensive component ecosystems, developers often integrate 反応する. This “React on Rails” hybrid leverages Rails’ backend strengths (API, authentication, routing) while using React for dynamic UI components.

This guide covers the rationale, setup options, best practices, and real-world considerations for using React with Rails 8 in 2026.

Why Integrate React with Rails 8?

Rails 8’s Hotwire stack excels at progressive enhancement: fast page loads, real-time updates via Turbo Streams, and sprinkle-style JavaScript with Stimulus. It’s ideal for CRUD apps, admin panels, and content-driven sites.

React shines when you need:

• Complex, stateful interfaces (e.g., drag-and-drop, real-time collaboration tools, canvas editors).
• Reusable component libraries (e.g., Material UI, Chakra UI, or custom design systems).
• Advanced client-side routing and state (e.g., Redux Toolkit, Zustand).
• Shared code with mobile apps via React Native.
• SEO-friendly server-side rendering (SSR) for dynamic content.

Many production apps combine Rails backends with React frontends. The hybrid model balances Rails’ productivity with React’s interactivity. In 2026, community trends favor “islands” architecture: Hotwire for most pages, React for specific complex sections.

Hotwire vs. React: Choose Hotwire for simplicity and speed in server-heavy apps; React for SPA-like experiences, accepting added build complexity.

Benefits of Combining Rails and React

Rails handles:

• Robust API endpoints, authentication, and database interactions.
• Rapid prototyping with generators and conventions.
• Real-time features via Action Cable.

React adds:

• Declarative, reusable components for complex UIs.
• Efficient updates via Virtual DOM.
• Mature libraries (e.g., TanStack Query, Framer Motion, Shadcn UI).

Together, they enable:

• Progressive enhancement: Hotwire for simple pages, React for interactive sections.
• Scalable apps: From MVPs to enterprise dashboards.
• Team flexibility: Ruby experts on backend, JS specialists on frontend.

In 2026, trends favor hybrids—Rails for core logic, React for “islands” of interactivity—avoiding full SPA overhead unless needed.

Setting Up React in a New Rails 8 App

Rails 8 defaults to importmap-rails for lightweight JavaScript (no bundler needed) and Propshaft for assets. For React, which requires JSX transformation and module bundling, use a JavaScript bundler.

Popular options in 2026:

• jsbundling-rails with esbuild (simple, fast).
• vite_ruby (Vite integration—excellent HMR, ecosystem support).

Setup with jsbundling-rails and esbuild (Recommended for Simplicity)

1. Create the app, skipping default JavaScript:

   bash
   rails new myapp --skip-javascript
   cd myapp

2. Add bundling support:

   bash
   bundle add jsbundling-rails
   rails javascript:install:esbuild

3. Install React:

   bash
   npm install react react-dom
   # Or yarn add react react-dom

4. Configure esbuild for JSX (edit package.json scripts if needed):

   json
   "scripts": {
     "build": "esbuild app/javascript/application.js --bundle --sourcemap --loader:.js=jsx --outdir=app/assets/builds --minify",
     "build:watch": "esbuild app/javascript/application.js --bundle --sourcemap --loader:.js=jsx --outdir=app/assets/builds --watch"
   }

5. Create entrypoint app/javascript/application.js:

   javascript
   import React from 'react';
   import { createRoot } from 'react-dom/client';
   import App from './components/App.jsx';
   
   document.addEventListener('turbo:load', () => {
     const root = document.getElementById('react-root');
     if (root) {
       createRoot(root).render(<App />);
     }
   });

6. Sample component app/javascript/components/App.jsx:

   jsx
   import React from 'react';
   
   export default function App() {
     return <h1>Hello from React in Rails 8!</h1>;
   }

7. In a view (app/views/home/index.html.erb):

   アーブ
   <div id="react-root"></div>
   <%= javascript_importmap_tags %>

走る ./bin/dev (starts Rails + esbuild watch) and visit the page—React mounts seamlessly.

For TypeScript: Add --loader:.ts=tsx and rename files.

Alternative: Vite with vite_ruby (Faster Dev Experience)

Vite is widely adopted in 2026 for its speed and modern features.

1. In a new app (--skip-javascript):

   bash
   bundle add vite_rails
   bin/vite install

2. Install React:

   bash
   npm install react react-dom

3. Configure entrypoints (e.g., app/frontend/entrypoints/application.js):

   javascript
   import React from 'react';
   import { createRoot } from 'react-dom/client';
   import App from '../components/App.jsx';
   
   // Similar mounting logic

Vite handles HMR, splitting, and more out-of-the-box. Use helpers like <%= vite_javascript_tag 'application' %>.

Many prefer Vite for larger React apps due to better ecosystem compatibility.

Advanced Integration Options

Inertia.js

Inertia bridges Rails and React without a full JSON API. Pages feel server-routed but render client-side React components.

Add inertia_rails gem, configure with React adapter. Ideal for migrating from Hotwire or progressive enhancement.

Separate SPA + Rails API

For full decoupling:

bash
rails new backend --api

Build a Vite/Create React App frontend, consuming Rails JSON endpoints. Use authentication tokens (Rails 8 native auth helps).

Pros: Independent deploys, team separation. Cons: More infrastructure.

Gems for React

• react_on_rails: Mature, supports SSR for SEO/performance. Maintained in 2026.
• react-rails: Simpler view helpers, but less feature-rich for modern React.

These work with bundlers but add overhead—prefer manual setup for control.

Data Flow and Communication

In hybrid apps:

• Mount React “islands” in ERB views.
• Pass initial data via data-props attributes or inline JSON.
• 用途 fetch or libraries (TanStack Query, SWR) for API calls.
• Combine with Turbo Streams for real-time (e.g., broadcast updates to React via WebSockets).

Authentication: Rails 8’s built-in generator provides sessions/tokens—share via cookies or headers.

CSRF: Ensure protection in API endpoints.

Best Practices for Using React on Rails in 2026

• Start with Hotwire; add React only where needed (islands pattern).
• Use Propshaft for efficient asset serving.
• Pair with Tailwind CSS (easy via cssbundling-rails or Vite).
• Test: RSpec/System tests for Rails, Vitest/React Testing Library for frontend.
• Deploy with Kamal (Rails 8 default)—works great with bundled assets.
• Optimize bundles: Code-split, lazy-load components.
• Monitor size: Avoid bloat with tree-shaking.

Pitfalls:

• Premature React adoption (overcomplicates simple apps).
• Ignoring Turbo compatibility (use turbo:load events).
• Bundle bloat impacting load times.

結論

で レールカーマ, we see Rails 8 as a powerful platform that simplifies backend development and deployment while fully supporting modern frontend frameworks. By integrating React with Rails, teams gain the flexibility to build rich, dynamic user experiences without moving away from Rails’ proven conventions and productivity.

Whether it’s using esbuild for quick project kick-offs, Vite for refined development workflows, or leveraging gems like react_on_rails for server-side rendering, Rails 8 offers multiple integration paths. This hybrid approach allows developers to use Hotwire for broad, fast interactions そして React for complex, interactive components—getting the best of both worlds.

With Rails 8, experimentation is encouraged. You can start small by mounting a React component alongside Turbo and scale as your application evolves. As we move into 2026, the Rails ecosystem continues to thrive, and RailsCarma as a top Ruby on Rails開発会社 helps businesses and teams harness this flexibility to build modern, future-ready applications.