amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add ts to upgrade guide

Browse Source
This commit is contained in:
Ricky Hanlon
2024-04-25 10:58:24 -04:00
parent cd1580e6bc
commit a2d6135e0a
1 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/content/blog/2024/04/01/react-19-upgrade-guide.md
View File

@@ -36,26 +36,12 @@ For a list of new features added to React 19 beta, see the [React 19 release pos
---
## Installing {/*installing*/}
To install the latest version of React and React DOM:
```bash
npm install react@beta react-dom@beta
```
Typescript users will also need to update their types:
```bash
npm install @types/react@beta @types/react-dom@beta
```
For a full list of type changes, see the type [CHANGELOG](TODO).
<Note>
#### New JSX Transform is now required {/*new-jsx-transform-is-now-required*/}
We introduced a [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in 2020 to improve bundle size and use JSX without importing React. In React 19, we're adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform.
If you the new transform is not enabled, you will see this warning:
<ConsoleBlockMulti>
@@ -73,6 +59,31 @@ We expect most apps will not be affected since the transform is enabled in most
</Note>
To install the latest version of React and React DOM:
```bash
npm install react@beta react-dom@beta
```
If you're using TypeScript, you also need to update the types. Once React 19 is released as stable, you can install the types as usual from `@types/react` and `@types/react-dom`. During the beta period, the types are available in different packages which need to be enforced in your `package.json`:
```json
{
"dependencies": {
"@types/react": "npm:types-react@alpha",
"@types/react-dom": "npm:types-react-dom@alpha"
},
"overrides": {
"@types/react": "npm:types-react@alpha",
"@types/react-dom": "npm:types-react-dom@alpha"
}
}
```
We're also including a codemod for the most common replacements. See [Removed TypeScript Types](#removed-deprecated-typescript-types) below.
## Breaking Changes {/*breaking-changes*/}
### Errors in render are not re-thrown {/*errors-in-render-are-not-re-thrown*/}
@@ -445,6 +456,27 @@ To reflect the impact of using internals, we have renamed the `SECRET_INTERNALS`
In the future we will more aggressively block accessing internals from React to discourage usage and ensure users are not blocked from upgrading.
## Removed deprecated TypeScript types {/*removed-deprecated-typescript-types*/}
We've cleaned up the TypeScript types based on the removed APIs in React 19. Some of the removed have types been moved to more relevant packages, and others are no longer needed to describe React's behavior.
<Note>
We've published [`types-react-codemod`](https://github.com/eps1lon/types-react-codemod/) to migrate most type related breaking changes:
```bash
npx types-react-codemod@latest preset-19 ./path-to-app
```
If you have a lot of unsound access to `element.props`, you can run this additional codemod:
```bash
npx types-react-codemod@latest react-element-default-any-props ./path-to-your-react-ts-files
```
</Note>
Check out [`types-react-codemod`](https://github.com/eps1lon/types-react-codemod/) for a list of supported replacements. If you feel a codemod is missing, it can be tracked in the [list of missing React 19 codemods](https://github.com/eps1lon/types-react-codemod/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22React+19%22+label%3Aenhancement).
## Changlog {/*changelog*/}
### Other Breaking Changes {/*other-breaking-changes*/}