{"id":13400804,"url":"https://github.com/reactjs/react-rails","last_synced_at":"2025-05-14T08:05:19.473Z","repository":{"id":9713637,"uuid":"11667865","full_name":"reactjs/react-rails","owner":"reactjs","description":"Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.","archived":false,"fork":false,"pushed_at":"2024-10-19T00:57:08.000Z","size":8642,"stargazers_count":6762,"open_issues_count":23,"forks_count":756,"subscribers_count":109,"default_branch":"master","last_synced_at":"2025-05-06T01:03:13.313Z","etag":null,"topics":["jsx","rails","react","react-rails","ruby","sprockets","webpacker"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-07-25T18:27:18.000Z","updated_at":"2025-05-05T16:44:45.000Z","dependencies_parsed_at":"2024-11-06T06:37:05.787Z","dependency_job_id":"b1266c34-77a3-47eb-a610-6d24b7ba1791","html_url":"https://github.com/reactjs/react-rails","commit_stats":{"total_commits":1081,"total_committers":185,"mean_commits":"5.8432432432432435","dds":0.8048103607770583,"last_synced_commit":"6e811b6bc3634112a269821ee2f5b512167d39ae"},"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactjs","download_url":"https://codeload.github.com/reactjs/react-rails/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252681923,"owners_count":21787765,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsx","rails","react","react-rails","ruby","sprockets","webpacker"],"created_at":"2024-07-30T19:00:55.669Z","updated_at":"2025-05-14T08:05:19.455Z","avatar_url":"https://github.com/reactjs.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","Awesome React","Tools","**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Ruby Tools","Ruby Tools and Frameworks","Python Frameworks and Tools","React [🔝](#readme)","Gems"],"sub_categories":["Uncategorized","Tools","React","Interfaces","E-Books","Mesh networks","JavaScript Libraries for Machine Learning","Articles"],"readme":"# React-Rails v3\n\n[![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)\n[![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs)\n[![Ruby](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml/badge.svg)](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml)\n\nFor version 2.7 documentation, visit the [2.7-stable](https://github.com/reactjs/react-rails/tree/2.7-stable) branch.\n\n## Summary\nReact-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:\n* Automatically renders React server-side and client-side\n* Supports [Shakapacker](https://github.com/shakacode/shakapacker) v7\n* Supports Sprockets 4.x, 3.x\n* Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)\n\n---\n\nWhile ShakaCode will continue to support this gem, you might consider migrating to [React on Rails](https://github.com/shakacode/react_on_rails) or [React on Rails Pro with proper Node rendering](https://www.shakacode.com/react-on-rails-pro/).\n\nWhy? React on Rails code receives much more active development and testing. For example, consider the [ReactRailsUJS](https://github.com/reactjs/react-rails/blob/master/react_ujs/index.js) implementation compared to the [ReactOnRails Node package](https://github.com/shakacode/react_on_rails/tree/master/node_package) which is written in TypeScript. For another example, React on Rails has work underway to support the latest React features, such as [React Server Components](https://react.dev/reference/rsc/server-components).\n\nYou can find [migration to React on Rails steps here](https://github.com/reactjs/react-rails/blob/master/docs/migrating-from-react-rails-to-react_on_rails.md).\n\n---\n## ShakaCode Support\n\n[ShakaCode](https://www.shakacode.com) focuses on helping Ruby on Rails teams use React and Webpack better. We can upgrade your project and improve your development and customer experiences, allowing you to focus on building new features or fixing bugs instead. \n\nFor an overview of working with us, see our [Client Engagement Model](https://www.shakacode.com/blog/client-engagement-model/) article and [how we bill for time](https://www.shakacode.com/blog/shortcut-jira-trello-github-toggl-time-and-task-tracking/).\n\nWe also specialize in helping development teams lower infrastructure and CI costs. Check out our project [Control Plane Flow](https://github.com/shakacode/control-plane-flow/), which can allow you to get the ease of Heroku with the power of Kubernetes and big cost savings.\n\nIf you think ShakaCode can help your project, [click here](https://meetings.hubspot.com/justingordon/30-minute-consultation) to book a call with [Justin Gordon](mailto:justin@shakacode.com), the creator of React on Rails and Shakapacker.\n\nHere's a testimonial of how ShakaCode can help from [Florian Gößler](https://github.com/FGoessler) of [Blinkist](https://www.blinkist.com/), January 2, 2023:\n\u003e Hey Justin 👋\n\u003e\n\u003e I just wanted to let you know that we today shipped the webpacker to shakapacker upgrades and it all seems to be running smoothly! Thanks again for all your support and your teams work! 😍\n\u003e\n\u003e On top of your work, it was now also very easy for me to upgrade Tailwind and include our external node_module based web component library which we were using for our other (more modern) apps already. That work is going to be shipped later this week though as we are polishing the last bits of it. 😉\n\u003e\n\u003e Have a great 2023 and maybe we get to work together again later in the year! 🙌\n\nRead the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=date_DESC#review-2118154).\n\n## Resources\n* [Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE). Then join the channel `#react-rails`.\n* If upgrading, consider migrating to the [react_on_rails](https://github.com/shakacode/react_on_rails) gem.\n* Source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app\n\n## Documentation\n\n- [Get started](docs/get-started.md)\n  - [Use with Shakapacker](docs/get-started.md#use-with-shakapacker)\n    - [Component name](docs/get-started.md#component-name)\n    - [File naming](docs/get-started.md#file-naming)\n    - [Typescript support](docs/get-started.md#typescript-support)\n    - [Test component](docs/get-started.md#test-component)\n  - [Use with Asset Pipeline](docs/get-started.md#use-with-asset-pipeline)\n    - [Custom JSX Transformer](docs/get-started.md#custom-jsx-transformer)\n      - [Transform Plugin Options](docs/get-started.md#transform-plugin-options)\n    - [React.js versions](docs/get-started.md#reactjs-versions)\n- [View Helper](docs/view-helper.md)\n  - [Custom View Helper](docs/view-helper.md#custom-view-helper)\n- [UJS](docs/ujs.md)\n  - [Mounting \u0026 Unmounting](docs/ujs.md#mounting--unmounting)\n  - [Event Handling](docs/ujs.md#event-handling)\n  - [`getConstructor`](docs/ujs.md#getconstructor)\n- [Server-Side Rendering](docs/server-side-rendering.md)\n  - [Configuration](docs/server-side-rendering.md#configuration)\n  - [JavaScript State](docs/server-side-rendering.md#javascript-state)\n  - [Custom Server Renderer](docs/server-side-rendering.md#custom-server-renderer)\n- [Controller Actions](docs/controller-actions.md)\n- [Component Generator](docs/component-generator.md)\n  - [Use with JBuilder](docs/component-generator.md#use-with-jbuilder)\n  - [Camelize Props](docs/component-generator.md#camelize-props)\n  - [Changing Component Templates](docs/component-generator.md#changing-component-templates)\n- [Upgrading](docs/upgrading.md)\n  - [2.7 to 3.0](docs/upgrading.md#27-to-30)\n  - [2.3 to 2.4](docs/upgrading.md#23-to-24)\n- [Migrating from `react-rails` to `react_on_rails`](docs/migrating-from-react-rails-to-react_on_rails.md)\n  - [Why migrate?](docs/migrating-from-react-rails-to-react_on_rails.md#why-migrate)\n  - [Steps to migrate](docs/migrating-from-react-rails-to-react_on_rails.md#steps-to-migrate)\n- [Common Errors](docs/common-errors.md)\n  - [Getting warning for `Can't resolve 'react-dom/client'` in React \u003c 18](docs/common-errors.md#getting-warning-for-cant-resolve-react-domclient-in-react--18)\n  - [Undefined Set](docs/common-errors.md#undefined-set)\n  - [Using TheRubyRacer](docs/common-errors.md#using-therubyracer)\n  - [HMR](docs/common-errors.md#hmr)\n  - [Tests in component directory](docs/common-errors.md#tests-in-component-directory)\n\nAfter reading this README file, additional information about React-Rails can be found on the Wiki page:\nhttps://github.com/reactjs/React-Rails/wiki\nThe Wiki page features a significant amount of additional information about React-Rails, including instructional articles and answers to the most frequently asked questions.\n\n## Related Projects\n\n- [react\\_on\\_rails](https://github.com/shakacode/react_on_rails): Integration of React with Rails utilizing Webpack, Redux, React-Router.\n- [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/):React on Rails with Node rendering and many other performance enhancements.\n- [react-rails-benchmark_renderer](https://github.com/pboling/react-rails-benchmark_renderer) adds performance instrumentation to server rendering.\n- [Ruby Hyperstack](https://hyperstack.org/): Use Ruby to build reactive user interfaces with React.\n\n## Contributing\n\n🎉 Thanks for taking the time to contribute! 🎉 See [CONTRIBUTING.md](./CONTRIBUTING.md) for more details.\n\n# Supporters\n\nThe following companies provide licenses to the ShakaCode team, supporting the development of this and other open-source projects maintained by ShakaCode. ShakaCode stands by the usefulness of these products!\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003ca href=\"https://www.jetbrains.com\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png\" alt=\"JetBrains\" height=\"120px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://scoutapp.com\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881147-0d077438-3978-40da-ace9-4f650d2efe2e.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png\"\u003e\n    \u003cimg alt=\"ScoutAPM\" src=\"https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png\" height=\"120px\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://controlplane.com\"\u003e\n  \u003cpicture\u003e\n    \u003cimg alt=\"Control Plane\" src=\"https://github.com/shakacode/.github/assets/20628911/90babd87-62c4-4de3-baa4-3d78ef4bec25\" height=\"120px\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://www.browserstack.com\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881122-407dcc29-df78-4b20-a9ad-f597b56f6cdb.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png\"\u003e\n    \u003cimg alt=\"BrowserStack\" src=\"https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png\" height=\"55px\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.honeybadger.io/\"\u003e\n  \u003cpicture\u003e\n    \u003cimg alt=\"HoneyBadger\" src=\"https://user-images.githubusercontent.com/4244251/184881133-79ee9c3c-8165-4852-958e-31687b9536f4.png\" height=\"70px\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n---\n\nShakaCode is [hiring](https://jobs.lever.co/shakacode/3bdbfdb3-4495-4611-a279-01dddddb351abe)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactjs%2Freact-rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-rails/lists"}