Getting Started
    Core Concepts
    Building Features
    API Reference
    Deployment
    Upgrading
    Migrating
    Pro
    Advanced Topics
    Misc
    Shakacode logoShakaCodeDeveloped by

    Copyright 2020 ShakaCode

    React on rails logo
    React on Rails
    ShakaCode WebsiteCommunityReact on Rails Pro
    Press Ctrl+K to search anytime
    GithubSmallView on Github

    React on Rails

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

    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

    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?

    Find guidance for your specific scenario:

    I want to...Go here
    Add React to existing Rails appInstallation Guide
    Enable server-side renderingSSR Guide
    Set up hot reloadingHMR Setup
    Use Redux with RailsRedux Integration
    Deploy to productionDeployment Guide
    Troubleshoot issuesTroubleshooting

    Core Concepts

    Before building features, understand these fundamentals:

    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 20+
    • Shakapacker 6+ (7+ recommended for React on Rails v16)

    Need Help?

    Community Support

    Professional Support

    External Resources

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