Repository files navigation

🚀 React on Rails v16.0 Released! Major modernization with ESM support, enhanced React Server Components, and streamlined configuration.

• ESM-only package: Modern module system with better tree-shaking and performance
• React Server Components: Improved rendering flow and newRSCRoute component for seamless SSR
• Performance improvements: New async loading strategies and optimized bundle generation
• Webpacker removal: Streamlined for Shakapacker-only support (>= 6.0)
• React on Rails Pro supports the latest features of React 18, includingReact Server Components andstreaming. ContactJustin Gordon for more information.
• ShakaCode now maintains the official successor torails/webpacker,shakapacker.

These are the docs for React on Rails 16. To see the older docs and code:v14,v13,v12, andv11.

Seamlessly integrate React components into your Rails application with server-side rendering, hot reloading, and automatic bundle optimization.

"The easiest way to add React to Rails" - Thousands of developers rely on React on Rails for production applications.

This project is maintained byShakaCode with ❤️ from the Rails and React communities.

ShakaCode focuses on helping Ruby on Rails teams better use React and Webpack. We can upgrade your project and improve your development and customer experiences, allowing you to focus on building new features or fixing bugs instead.

For an overview of working with us, see ourClient Engagement Model article andhow we bill for time.

We also specialize in helping development teams lower infrastructure and CI costs. Check out our projectControl Plane Flow, which can allow you to get the ease of Heroku with the power of Kubernetes and big cost savings.

If you think ShakaCode can help your project,click here to book a call withJustin Gordon, the creator of React on Rails.

After upgrading to a new major version, run the generator to get latest defaults:

rails generate react_on_rails:install

Important: Review changes carefully before applying to avoid overwriting custom configurations. The generator updates:

• bin/dev (improved development workflow)
• webpack configurations
• shakapacker.yml settings
• other configuration files

If you encounter issues during installation or after upgrading, use the doctor command to diagnose your setup:

rake react_on_rails:doctor

The doctor command checks your environment, dependencies, and configuration files to identify potential issues. UseVERBOSE=true rake react_on_rails:doctor for detailed output.

For detailed upgrade instructions, seeupgrade guide documentation.

Some features of React on Rails regarding performance require a React on Rails Pro subscription.

Note: the subscription price is free for evaluation and non-production use.

Notable new features include:

• React Server Components
• Streaming SSR
• Loadable Components
• Code Splitting with React Router

React on Rails Pro is the best way to optimize your Webpack setup for React on Rails, including code splitting withReact Router andloadable-components with server-side rendering for SEO and hot-reloading for developers.

We did this for Popmenu,lowering Heroku costs 20-25% while getting a 73% decrease in average response times. Several years later, Popmenu serves tens of millions of SSR requests daily with React on Rails Pro.

If you're interested, read more aboutReact on Rails Pro andbook a call.

New to React on Rails? Get up and running in minutes:

🚀15-Minute Quick Start - Your first React component📖Complete Documentation - Comprehensive guides and API reference🎮Live Demo - See it in action withsource code

To provide a high-performance framework for integrating Ruby on Rails with React, especially regarding React Server-Side Rendering for better SEO and improved performance.

Trusted by thousands - Seereal production sites using React on Rails

SeeRails/Shakapacker React Integration Options for comparisons to other gems.

• See thereact-webpack-rails-tutorial for an example of a live implementation and code.
• A deployed version of the projectspec/dummy, which demonstrates several uses ofreact_on_rails, will soon be available onControl Plane through this link

Requires creating a free account.

• How to use different versions of a file for client and server rendering
• How to conditionally render server side based on the device type

• Ruby on Rails >= 5
• Shakapacker >= 6.0 (Webpacker is no longer supported as of v16)
• Ruby >= 3.2 (CI tested: 3.2 - 3.4)
• Node.js >= 20 (CI tested: 20 - 22)
• A JavaScript package manager (npm, yarn, pnpm, or bun)

Need immediate help? Here are your options, ordered by response time:

• 🚀Professional Support:react_on_rails@shakacode.com - Fastest resolution for bugs, upgrades, and consulting
• 💬React + Rails Slack:Join our community - Chat with other developers
• 🆓GitHub Issues:Report bugs - Community support
• 📖Discussions:Ask questions - General help

Additional Resources:

• Subscribe for announcements of new releases and tutorials
• forum.shakacode.com - Development discussions
• @railsonmaui on Twitter - Updates and tips
• Projects using React on Rails - Submit yours!

Bug reports and pull requests are welcome. To get started, seeContributing and thelist of help wanted issues.

ShakaCode ishiring passionate software engineers to work on our projects, includingHiChee!

The gem is available as open source under the terms of theMIT License.

Note, some features are available only with a React on Rails Pro subscription. SeeReact on Rails Pro for more information.

The following companies support our open-source projects, and ShakaCode uses their products!