Description
React on Rails integrates Rails with (server rendering of) Facebook's React front-end framework.
Features and Why React on Rails?
Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"? Server rendering, often used for SEO and performance, is not offered by rails/webpacker.
* The easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate 1request to your API.
* Redux and React Router integration.
* Internationalization (I18n) and (localization)
* RSpec Test Helpers Configuration to ensure your Webpack bundles are ready for tests.
* A supportive community. This web search shows how live public sites are using React on Rails.
* Reason ML Support
ReactOnRails alternatives and similar gems
Based on the "Web Frameworks" category.
Alternatively, view react-on-rails alternatives based on common mentions on social networks and blogs.
-
Glimmer DSL for Web
Glimmer DSL for Web (Ruby-in-the-Browser Web Frontend Framework). The "Rails" of Frontend Frameworks!!! -
Glimmer DSL for Opal
DISCONTINUED. Glimmer DSL for Opal (Pure-Ruby Web GUI and Auto-Webifier of Desktop Apps)
CodeRabbit: AI Code Reviews for Developers

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of ReactOnRails or a related project?
README
News
- ShakaCode now maintains the official successor to
rails/webpacker
,shakapacker
. - Project is updated to support Rails 7 and Shakapacker v6+!
These are the docs for React on Rails 13. To see the older docs: v12 and v11.
About
React on Rails integrates Rails with (server rendering of) Facebook's React front-end framework.
This project is maintained by the software consulting firm ShakaCode. We focus on Ruby on Rails applications with React front-ends, often using TypeScript or ReScript (ReasonML). We also build React Native apps and Gatsby sites. See our recent work for examples of what we do. ShakaCode.com (HiChee.com) is hiring developers that like working on open-source.
Are you interested in optimizing your webpack setup for React on Rails including code splitting with react-router and loadable-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 is serving millions of SSR requests per day with React on Rails.
Check out React on Rails Pro. For more information, feel free to contact Justin Gordon, [email protected], maintainer of React on Rails.
Documentation
See the documentation at shakacode.com/react-on-rails/docs.
Project Objective
To provide a high performance framework for integrating Ruby on Rails with React via the Webpacker gem, especially regarding React Server-Side Rendering for better SEO and improved performance.
Features and Why React on Rails?
Given that rails/webpacker
gem already provides basic React integration, why would you use "React on Rails"?
- Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API. Tight integration with shakapacker (or it's predecessor rails/webpacker).
- Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance.
- Automated optimized entry-point creation and bundle inclusion when placing a component on a page. With this feature, you no longer need to configure
javascript_pack_tags
andstylesheet_pack_tags
on your layouts based on what’s shown. “It just works!” - Redux and React Router integration with server-side-rendering.
- Internationalization (I18n) and (localization)
- A supportive community. This web search shows how live public sites are using React on Rails.
- ReScript Support.
See Rails/Webpacker React Integration Options for comparisons to other gems.
Online demo
- See the react-webpack-rails-tutorial for an example of a live implementation and code.
- A deployed version of the project
spec/dummy
which demonstrates several uses ofreact_on_rails
is available on heroku through this link
ShakaCode Forum Premium Content
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
Prerequisites
Ruby on Rails >=5, rails/webpacker >= 4.2 or shakapacker > 6, Ruby >= 2.7
Support
- Click to join React + Rails Slack.
- Subscribe for announcements of new releases of React on Rails and of our latest blog articles and tutorials.
- Discussions: Post your questions regarding React on Rails
- forum.shakacode.com: Other discussions
- @railsonmaui on Twitter
- See NEWS.md for more notes over time.
- See Projects using and KUDOS for React on Rails. Please submit yours! Please edit either page or email us and we'll add your info. We also love stars as it helps us attract new users and contributors.
Contributing
Bug reports and pull requests are welcome. See Contributing to get started, and the list of help wanted issues.
Work with Us
ShakaCode is hiring passionate software engineers to work on our projects, including HiChee!
License
The gem is available as open source under the terms of the MIT License.
Supporters
The following companies support our open source projects, and ShakaCode uses their products!
*Note that all licence references and agreements mentioned in the ReactOnRails README section above
are relevant to that project's source code only.