-
Notifications
You must be signed in to change notification settings - Fork 752
Documentation for react-rails to react_on_rails migration #1304
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,40 +41,44 @@ Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by= | |
| <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
| ## Contents | ||
|
|
||
| - [Get started with Shakapacker](#get-started-with-shakapacker) | ||
| - [Component name](#component-name) | ||
| - [File naming](#file-naming) | ||
| - [Typescript support](#typescript-support) | ||
| - [Test component](#test-component) | ||
| - [Use with Asset Pipeline](#use-with-asset-pipeline) | ||
| - [Custom JSX Transformer](#custom-jsx-transformer) | ||
| - [Transform Plugin Options](#transform-plugin-options) | ||
| - [React.js versions](#reactjs-versions) | ||
| - [View Helper](#view-helper) | ||
| - [Custom View Helper](#custom-view-helper) | ||
| - [UJS](#ujs) | ||
| - [Mounting & Unmounting](#mounting--unmounting) | ||
| - [Event Handling](#event-handling) | ||
| - [`getConstructor`](#getconstructor) | ||
| - [Server-Side Rendering](#server-side-rendering) | ||
| - [Configuration](#configuration) | ||
| - [JavaScript State](#javascript-state) | ||
| - [Custom Server Renderer](#custom-server-renderer) | ||
| - [Controller Actions](#controller-actions) | ||
| - [Component Generator](#component-generator) | ||
| - [Use with JBuilder](#use-with-jbuilder) | ||
| - [Camelize Props](#camelize-props) | ||
| - [Changing Component Templates](#changing-component-templates) | ||
| - [Upgrading](#upgrading) | ||
| - [2.7 to 3.0](#27-to-30) | ||
| - [2.3 to 2.4](#23-to-24) | ||
| - [Common Errors](#common-errors) | ||
| - [Getting warning for `Can't resolve 'react-dom/client'` in React < 18](#getting-warning-for-cant-resolve-react-domclient-in-react--18) | ||
| - [Undefined Set](#undefined-set) | ||
| - [Using TheRubyRacer](#using-therubyracer) | ||
| - [HMR](#hmr) | ||
| - [Related Projects](#related-projects) | ||
| - [Contributing](#contributing) | ||
| - [Get started with Shakapacker](#get-started-with-shakapacker) | ||
| - [Component name](#component-name) | ||
| - [File naming](#file-naming) | ||
| - [Typescript support](#typescript-support) | ||
| - [Test component](#test-component) | ||
| - [Use with Asset Pipeline](#use-with-asset-pipeline) | ||
| - [Custom JSX Transformer](#custom-jsx-transformer) | ||
| - [Transform Plugin Options](#transform-plugin-options) | ||
| - [React.js versions](#reactjs-versions) | ||
| - [View Helper](#view-helper) | ||
| - [Custom View Helper](#custom-view-helper) | ||
| - [UJS](#ujs) | ||
| - [Mounting & Unmounting](#mounting--unmounting) | ||
| - [Event Handling](#event-handling) | ||
| - [`getConstructor`](#getconstructor) | ||
| - [Server-Side Rendering](#server-side-rendering) | ||
| - [Configuration](#configuration) | ||
| - [JavaScript State](#javascript-state) | ||
| - [Custom Server Renderer](#custom-server-renderer) | ||
| - [Controller Actions](#controller-actions) | ||
| - [Component Generator](#component-generator) | ||
| - [Use with JBuilder](#use-with-jbuilder) | ||
| - [Camelize Props](#camelize-props) | ||
| - [Changing Component Templates](#changing-component-templates) | ||
| - [Upgrading](#upgrading) | ||
| - [2.7 to 3.0](#27-to-30) | ||
| - [2.3 to 2.4](#23-to-24) | ||
| - [Migrating from `react-rails` to `react_on_rails`](#migrating-from-react-rails-to-react_on_rails) | ||
| - [Why to migrate?](#why-to-migrate) | ||
| - [Steps to migrate](#steps-to-migrate) | ||
| - [Common Errors](#common-errors) | ||
| - [Getting warning for `Can't resolve 'react-dom/client'` in React < 18](#getting-warning-for-cant-resolve-react-domclient-in-react--18) | ||
| - [Undefined Set](#undefined-set) | ||
| - [Using TheRubyRacer](#using-therubyracer) | ||
| - [HMR](#hmr) | ||
| - [Related Projects](#related-projects) | ||
| - [Contributing](#contributing) | ||
| - [Supporters](#supporters) | ||
|
|
||
| <!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
|
|
||
|
|
@@ -801,6 +805,61 @@ For the vast majority of cases this will get you most of the migration: | |
| - add `import PropTypes from 'prop-types'` (Webpacker only) | ||
| - re-run `bundle exec rails webpacker:install:react` to update npm packages (Webpacker only) | ||
|
|
||
| ## Migrating from `react-rails` to `react_on_rails` | ||
|
|
||
| ### Why to migrate? | ||
|
|
||
| [`react_on_rails`](https://github.com/shakacode/react_on_rails/) offers several additional features for a Rails + React application. The following is a table of features comparison. | ||
|
|
||
| | **Feature** | **react-rails** | **react-on-rails** | | ||
| | ----------------------- |:---------------:|:------------------:| | ||
| | Sprockets | ✅ | ❌ | | ||
| | Shakapacker | ✅ | ✅ | | ||
| | SSR | ✅ | ✅ | | ||
| | SSR with HMR | ✅ | ✅ | | ||
| | SSR with React-Router | ❌ | ✅ | | ||
| | SSR with Code Splitting | ❌ | ✅ | | ||
| | Node SSR | ❌ | ✅ | | ||
|
Comment on lines
+818
to
+822
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry to say that now it's been merged, you haven't mentioned what parts aren't free in react-on-rails, it seems to be a very important distinction to make a decision. |
||
| | Advanced Redux support | ❌ | ✅ | | ||
| | ReScript support | ❌ | ✅ | | ||
| | I18n support | ❌ | ✅ | | ||
|
|
||
| `react_on_rails` offers better performance and bundle optimizations, especially with the option of getting a subscription to `react_on_rails_pro`. | ||
|
|
||
| ### Steps to migrate | ||
|
|
||
| In this guide, it is assumed that you have upgraded the `react-rails` project to use `shakapacker` version 7. To this end, check out [Shakapacker v7 upgrade guide](https://github.com/shakacode/shakapacker/tree/master/docs/v7_upgrade.md). Upgrading `react-rails` to version 3 can make the migration smoother but it is not required. | ||
|
|
||
| 1. Update Deps | ||
|
|
||
| 1. Replace `react-rails` in `Gemfile` with the latest version of `react_on_rails` and run `bundle install`. | ||
| 2. Remove `react_ujs` from `package.json` and run `yarn install`. | ||
| 3. Commit changes! | ||
|
|
||
| 2. Run `rails g react_on_rails:install` but do not commit the change. `react_on_rails` installs node dependencies and also creates sample react component, Rails view/controller, and update `config/routes.rb`. | ||
|
|
||
| 3. Adapt the project: Check the changes and carefully accept, reject, or modify them as per your project's needs. Besides changes in `config/shakapacker` or `babel.config` which are project-specific, here are the most noticeable changes to address: | ||
|
|
||
| 1. Check webpack config files at `config/webpack/*`. If coming from `react-rails` v3, the changes are minor since you have already made separate configurations for client and server bundles. The most important change here is to notice the different names for the server bundle entry file. You may choose to stick with `server_rendering.js` or use `server-bundle.js` which is the default name in `react_on_rails`. The decision made here, affects the other steps. | ||
|
|
||
| 2. In `app/javascript` directory you may notice some changes. | ||
|
|
||
| 1. `react_on_rails` by default uses `bundles` directory for the React components. You may choose to rename `components` into `bundles` to follow the convention. | ||
|
|
||
| 2. `react_on_rails` uses `client-bundle.js` and `server-bundle.js` instead of `application.js` and `server_rendering.js`. There is nothing special about these names. It can be set to use any other name (as mentioned above). If you too choose to follow the new names, consider updating the relevant `javascript_pack_tag` in your Rails views. | ||
|
|
||
| 3. Update the content of these files to register your React components for client or server-side rendering. Checking the generated files by `react_on_rails` installation process should give enough hints. | ||
|
|
||
| 3. Check Rails views. In `react_on_rails`, `react_component` view helper works slightly differently. It takes two arguments: the component name, and options. Props is one of the options. Take a look at the following example: | ||
|
|
||
| ```diff | ||
| - <%= react_component('Post', { title: 'New Post' }, { prerender: true }) %> | ||
| + <%= react_component('Post', { props: { title: 'New Post' }, prerender: true }) %> | ||
| ``` | ||
|
|
||
| You can also check [react-rails-to-react-on-rails](https://github.com/shakacode/react-rails-example-app/tree/react-rails-to-react-on-rails) branch on [react-rails example app](https://github.com/shakacode/react-rails-example-app) for an example of migration from `react-rails` v3 to `react_on_rails` v13.4. | ||
|
|
||
|
|
||
| ## Common Errors | ||
| ### Getting warning for `Can't resolve 'react-dom/client'` in React < 18 | ||
|
|
||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.