A Practical 2025 Guide to Combining React with Ruby on Rails

React and Ruby on Rails remain a strong pairing for full‑stack development. Rails provides a mature backend with powerful conventions, while React delivers flexible UI rendering and component-driven architecture. Although both ecosystems continue to evolve—Rails 7+ adopting esbuild and import maps, and React 19 refining server-side rendering—developers still rely on a few core integration strategies. This guide covers these approaches in detail, showing how to choose and implement the one that fits your project best.

1. Rails as an API + React as a Completely Separate Frontend

This is the most popular approach today. Rails handles the backend (API, authentication, business logic), while React is a standalone client application.

Step 1: Create Rails API

rails new backend --api -d postgresql
cd backend

Step 2: Enable CORS

Gemfile:

gem "rack-cors"

config/initializers/cors.rb:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:5173"
    resource "*", headers: :any, methods: %i[get post patch put delete options]
  end
end

Step 3: Create React App

npm create vite@latest frontend --template react-ts
cd frontend
npm install

Step 4: Connect React to Rails API

const res = await fetch("http://localhost:3000/tasks");
const data = await res.json();

Pros

• Fully independent frontend and backend.
• Modern tooling: Vite, SWC, React 19.
• Easy to scale and deploy separately.

Cons

• Requires handling CORS.
• Two repositories unless you use monorepo.

2. Integrating React Directly Inside Rails (Rails + esbuild)

Rails 7 introduced a modern JavaScript toolchain using jsbundling-rails.

Step 1: Create Rails Project with esbuild

rails new myapp -j esbuild
cd myapp

Step 2: Install React

npm install react react-dom

Step 3: Configure esbuild for JSX

package.json:

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds --loader:.js=jsx --loader:.tsx=tsx"
}

Step 4: Create React Component

app/javascript/components/App.jsx:

export default function App() {
  return <h1>Hello from React inside Rails</h1>;
}

Step 5: Mount It in Rails

app/javascript/application.js:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App";

document.addEventListener("DOMContentLoaded", () => {
  const el = document.getElementById("root");
  if (el) ReactDOM.createRoot(el).render(<App />);
});

Rails view:

<div id="root"></div>

Pros

• Single repository.
• Uses Rails asset pipeline.
• Ideal for apps where React enhances parts of pages.

Cons

• Not ideal for large SPAs.
• Coupling between Rails and React build paths.

3. Using the react-rails Gem

This long‑standing gem integrates React directly with Rails and even supports server‑side rendering.

Step 1: Install the Gem

gem "react-rails"

Then:

bundle install
rails generate react:install

Step 2: Generate a Component

rails generate react:component Greeting name:string

Step 3: Render in Views

<%= react_component("Greeting", {name: "Anton"}) %>

Pros

• Very simple integration.
• Server‑side rendering option.
• Perfect for legacy Rails apps upgrading UI gradually.

Cons

• Not as flexible as Vite or esbuild.
• Less adoption in new Rails 7+ apps.

4. Using Rails + Superglue (Full‑stack Rails + React Integration)

Superglue makes Rails behave more like Remix or Next.js—server-rendered pages enhanced by React “islands.”

Features

• Rails form helpers usable inside React.
• Server-driven navigation with React hydration.
• Code splitting and SSR built-in.

Example

import { form } from "@superglue/form";

<form {...form("/articles")}>
  <input type="text" name="title" />
  <button>Create</button>
</form>

Pros

• Full-stack development without API boilerplate.
• Deep Rails integration.
• Modern DX with SSR and islands.

Cons

• Still evolving.
• Smaller ecosystem.

Choosing the Right Approach

Best Practices for Rails + React (2025)

1. Use TypeScript in React

Improves maintainability and safety.

2. Use JWT or Session Cookies for Auth

Rails API + cookies with SameSite=Lax works great.

3. For Production: Put Rails Behind Nginx

Serve /api/* to Rails and everything else to React build.

4. Use Redis + Sidekiq for Background Jobs

React frontend + WebSockets (ActionCable) = real‑time updates.

5. Prefer Vite Over Webpack

Much faster, simpler, and works with Ruby gems via plugin ecosystem.

Final Thoughts

React and Rails continue to complement each other remarkably well. Whether you prefer a clear separation of concerns or a unified full‑stack environment, Rails offers multiple integration paths. The best choice depends on your project size, deployment strategy, and workflow preferences.

In 2025, the most future‑proof setup for large applications remains:

Rails as an API + React 19 with Vite as the frontend.

But Rails still shines when used with embedded React components, especially for traditional server‑rendered apps.