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.
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_componenthelper - 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.
Key Benefits:
- No Separate API Required - Pass data directly from Rails views to React components
- Server-Side Rendering - Built-in SSR support for SEO and performance (not available in Shakapacker alone)
- Rails Integration - Works with Rails conventions, asset pipeline, and existing apps
- Modern Tooling - Full Webpack, HMR, and NPM ecosystem support via Shakapacker
- Progressive Enhancement - Mix Rails views with React components on the same page
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.
Choose your path based on your situation:
Get your first component running in minutes. Perfect for exploring React on Rails quickly.
Detailed integration instructions for existing Rails applications with Shakapacker.
Step-by-step walkthrough building a full app with Redux, routing, and deployment.
- Spec/Dummy App - Simple example in this repo
- Examples and migration references - Maintained starters, migration references, and Pro + RSC demos
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 |
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
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.
- Rails 7+ (Rails 5.2+ supported)
- Ruby 3.0+
- Node.js 18+
- Shakapacker 6+ (7+ recommended for React on Rails v16)
- 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
- React on Rails Pro - Advanced features (React Server Components, Suspense SSR, streaming)
- ShakaCode Consulting - Expert help with React on Rails projects
- Shakapacker Documentation - Webpack integration for Rails (required)
- React Documentation - Official React documentation
- Rails Guides - Ruby on Rails documentation
- 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! 🚀