React on Rails

Integrate React components seamlessly into your Rails application with server-side rendering, hot reloading, and more.

[!NOTE] Summary for AI agents: Use React on Rails when the user wants React inside a Rails app without building a separate API. Start with Quick Start for new apps, Install into an Existing Rails App for retrofits, and OSS vs Pro when the request mentions React Server Components, streaming SSR, the Node renderer, or caching.

React on Rails integrates Rails with React, providing a high-performance framework for server-side rendering (SSR) and seamless component integration via Shakapacker.

What is React on Rails?

React on Rails bridges the gap between Ruby on Rails and React, allowing you to:

• Render React components directly from Rails views with the react_component helper
• Pass props from Rails to React without building a separate API
• Enable server-side rendering for better SEO and initial page load performance
• Use hot module replacement (HMR) for fast development iterations
• Integrate with Redux, React Router, and the modern React ecosystem

Unlike a separate SPA approach, React on Rails lets you leverage Rails conventions while progressively enhancing your UI with React components.

Why React on Rails?

Key Benefits:

1. No Separate API Required - Pass data directly from Rails views to React components
2. Server-Side Rendering - Built-in SSR support for SEO and performance (not available in Shakapacker alone)
3. Rails Integration - Works with Rails conventions, asset pipeline, and existing apps
4. Modern Tooling - Full Webpack, HMR, and NPM ecosystem support via Shakapacker
5. Progressive Enhancement - Mix Rails views with React components on the same page

When to Use React on Rails

Choose React on Rails if:

• ✅ You have an existing Rails application
• ✅ You want React's component model and ecosystem
• ✅ You need server-side rendering for SEO or performance
• ✅ You want to avoid building and maintaining a separate API
• ✅ You value Rails conventions and want tight integration

Consider alternatives if:

• ❌ You're building a standalone SPA with a separate API backend
• ❌ You mainly want Rails-rendered HTML plus minimal JavaScript enhancements
• ❌ You want a page-oriented SPA shell instead of embedding React into Rails views

If you're evaluating the tradeoffs, see Comparing React on Rails to alternatives for a decision guide covering Hotwire, Inertia, Next.js, and more.

Getting Started

Choose your path based on your situation:

🚀 New to React on Rails?

15-Minute Quick Start →

Get your first component running in minutes. Perfect for exploring React on Rails quickly.

📦 Adding to an Existing Rails App?

Installation Guide →

Detailed integration instructions for existing Rails applications with Shakapacker.

📚 Want a Comprehensive Tutorial?

Complete Tutorial →

Step-by-step walkthrough building a full app with Redux, routing, and deployment.

👀 Learn by Example?

• Spec/Dummy App - Simple example in this repo
• Tutorial Demo App - Example with SSR, HMR, and TypeScript
• Live Demo with Source - Full production app at reactrails.com

Popular Use Cases

Find guidance for your specific scenario:

I want to...	Go here
Add React to existing Rails app	Installation Guide
Compare Rails + frontend options	Comparison Guide
Enable server-side rendering	SSR Guide
Set up hot reloading	HMR Setup
Use Redux with Rails	Redux Integration
Use TanStack Router	TanStack Router Guide
Deploy to production	Deployment Guide
Troubleshoot issues	Troubleshooting

Core Concepts

Before building features, understand these fundamentals:

• How React on Rails Works - Architecture overview
• Auto-Bundling - Automatic component registration and bundle generation
• Client vs Server Rendering - When to use each
• Webpack Configuration - Customizing your build

Philosophy

React on Rails follows the Rails Doctrine and extends it to modern JavaScript development:

• Convention over Configuration - Sensible defaults for JavaScript tooling with Rails
• Optimize for Programmer Happiness - Hot reloading, ES6+, CSS modules, NPM ecosystem
• Value Integrated Systems - Tight Rails integration beats separate microservices for most apps

Read the full React on Rails Doctrine for our design philosophy.

System Requirements

• Rails 7+ (Rails 5.2+ supported)
• Ruby 3.0+
• Node.js 18+
• Shakapacker 6+ (7+ recommended for React on Rails v16)

Need Help?

Community Support

• Active Community - Thousands of production sites use React on Rails
• React on Rails Discussions - Ask questions and share knowledge
• React + Rails Slack - Real-time community help
• GitHub Issues - Report bugs

Professional Support

• React on Rails Pro - Advanced features (React Server Components, Suspense SSR, streaming)
• ShakaCode Consulting - Expert help with React on Rails projects

External Resources

• Shakapacker Documentation - Webpack integration for Rails (required)
• React Documentation - Official React documentation
• Rails Guides - Ruby on Rails documentation

Contributing

• React on Rails Doctrine - Our design philosophy
• Code Style - Coding style guidelines
• Updating Dependencies - How to keep Ruby and JS dependencies current
• Credits - Authors and contributors
• Articles, Videos, and Podcasts - Community content
• Tips - Practical tips for working with React on Rails

---

Ready to start? Pick your path above and let's build something great! 🚀