From 791bd60c829abff224b8b291122a414e5ba5c8ce Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Tue, 21 May 2024 14:42:32 -0400 Subject: [PATCH 1/3] Add codemods to upgrade guide --- .../blog/2024/04/25/react-19-upgrade-guide.md | 69 ++++++++++++++++++- 1 file changed, 67 insertions(+), 2 deletions(-) diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 4d4355a47cc..0002a24672b 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -39,6 +39,7 @@ For a list of changes in 18.3 see the [Release Notes](https://github.com/faceboo In this post, we will guide you through the steps for upgrading libraries to React 19 beta: - [Installing](#installing) +- [Codemods](#codemods) - [Breaking changes](#breaking-changes) - [New deprecations](#new-deprecations) - [Notable changes](#notable-changes) @@ -97,6 +98,36 @@ If you're using TypeScript, you also need to update the types. Once React 19 is We're also including a codemod for the most common replacements. See [TypeScript changes](#typescript-changes) below. +## Codemods {/*codemods*/} + +To help with the upgrade, we've worked with the team at [codemod.com](https://codemod.com) to publish codemods that will automatically update your code to many of the new APIs and patterns in React 19. + +The Codemod team have published all codemods to [`react-codemod`](https://github.com/reactjs/react-codemod) and will be helping maintain the React codemods moving forward, but we recommend using the `codemod` command for a better experience. + + + +#### Run all React 19 codemods {/*run-all-react-19-codemods*/} + +To run all codemods listed in this guide, you can use the command below: + +```bash +npx codemod@latest react/19/migration-recipe +``` + +This will run the following codemods from `react-codemod`: +- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) +- [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref) +- [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import) +- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) +- [`prop-types-typescript`](TODO) + +This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below. + + + +Changes that include a codemod include the command below. + +For a list of all available codemods, see the `react-codemod` [repo here](https://github.com/reactjs/react-codemod). ## Breaking changes {/*breaking-changes*/} @@ -128,7 +159,7 @@ For more info, see the docs for [`createRoot`](https://react.dev/reference/react ### Removed deprecated React APIs {/*removed-deprecated-react-apis*/} #### Removed: `propTypes` and `defaultProps` for functions {/*removed-proptypes-and-defaultprops*/} -`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). +`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). In React 19, we're removing the `propType` checks from the React package, and using them will be silently ignored. If you're using `propTypes`, we recommend migrating to TypeScript or another type-checking solution. @@ -158,6 +189,16 @@ function Heading({text = 'Hello, world!'}: Props) { } ``` + + +Codemod `propTypes` to TypeScript with: + +```bash +npx codemod@latest react/prop-types-typescript +``` + + + #### Removed: Legacy Context using `contextTypes` and `getChildContext` {/*removed-removing-legacy-context*/} Legacy Context was deprecated in [October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html). @@ -253,7 +294,11 @@ class MyComponent extends React.Component { -To help with the migration, we will be publishing a [react-codemod](https://github.com/reactjs/react-codemod/#string-refs) to automatically replace string refs with `ref` callbacks. Follow [this PR](https://github.com/reactjs/react-codemod/pull/309) for updates and to try it out. +Codemod string refs with `ref` callbacks: + +```bash +npx codemod@latest react/19/replace-string-ref +``` @@ -340,6 +385,16 @@ All other `test-utils` functions have been removed. These utilities were uncommo See the [warning page](https://react.dev/warnings/react-dom-test-utils) for alternatives. + + +Codemod `ReactDOMTestUtils.act` to `React.act`: + +```bash +npx codemod@latest react/19/replace-act-import +``` + + + #### Removed: `ReactDOM.render` {/*removed-reactdom-render*/} `ReactDOM.render` was deprecated in [March 2022 (v18.0.0)](https://react.dev/blog/2022/03/08/react-18-upgrade-guide). In React 19, we're removing `ReactDOM.render` and you'll need to migrate to using [`ReactDOM.createRoot`](https://react.dev/reference/react-dom/client/createRoot): @@ -355,6 +410,16 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` + + +Codemod `ReactDOM.render` to `ReactDOM.createRoot`: + +```bash +npx codemod@latest react/19/replace-reactdom-render +``` + + + #### Removed: `ReactDOM.hydrate` {/*removed-reactdom-hydrate*/} `ReactDOM.hydrate` was deprecated in [March 2022 (v18.0.0)](https://react.dev/blog/2022/03/08/react-18-upgrade-guide). In React 19, we're removing `ReactDOM.hydrate` you'll need to migrate to using [`ReactDOM.hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot), From 11412684d097ef21083c2a3bba9628a1a3a65796 Mon Sep 17 00:00:00 2001 From: Ricky Date: Tue, 21 May 2024 15:22:31 -0400 Subject: [PATCH 2/3] Update src/content/blog/2024/04/25/react-19-upgrade-guide.md Co-authored-by: Ahmed Abdelbaset --- src/content/blog/2024/04/25/react-19-upgrade-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 0002a24672b..c8f5e97136c 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -127,7 +127,7 @@ This does not include the TypeScript changes. See [TypeScript changes](#typescri Changes that include a codemod include the command below. -For a list of all available codemods, see the `react-codemod` [repo here](https://github.com/reactjs/react-codemod). +For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod). ## Breaking changes {/*breaking-changes*/} From ac7590eb84405454be0b5f345a3f0049617c1a6b Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Thu, 23 May 2024 11:35:26 -0400 Subject: [PATCH 3/3] Add benefits --- src/content/blog/2024/04/25/react-19-upgrade-guide.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index c8f5e97136c..cc1afe2a30d 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -102,13 +102,14 @@ We're also including a codemod for the most common replacements. See [TypeScript To help with the upgrade, we've worked with the team at [codemod.com](https://codemod.com) to publish codemods that will automatically update your code to many of the new APIs and patterns in React 19. -The Codemod team have published all codemods to [`react-codemod`](https://github.com/reactjs/react-codemod) and will be helping maintain the React codemods moving forward, but we recommend using the `codemod` command for a better experience. +All codemods are available in the [`react-codemod` repo](https://github.com/reactjs/react-codemod) and the Codemod team have joined in helping maintain the codemods. To run these codemods, we recommend using the `codemod` command instead of the `react-codemod` because it runs faster, handles more complex code migrations, and provides better support for TypeScript. + #### Run all React 19 codemods {/*run-all-react-19-codemods*/} -To run all codemods listed in this guide, you can use the command below: +Run all codemods listed in this guide with the React 19 `codemod` recipe: ```bash npx codemod@latest react/19/migration-recipe