11---
2- title : " React 19 Beta アップグレードガイド"
2+ title : " React 19 RC アップグレードガイド"
33author : Ricky Hanlon
44date : 2024/04/25
5- description : React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、ライブラリを React 19 Beta にアップグレードする手順をご案内します。
5+ description : React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、アプリやライブラリを React 19 にアップグレードする手順をご案内します。
66---
77
88April 25, 2024 by [ Ricky Hanlon] ( https://twitter.com/rickhanlonii )
99
1010---
1111
12- <Note >
13-
14- このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。
15-
16- </Note >
17-
1812
1913<Intro >
2014
2115React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。
2216
23- アップグレードを容易にするために、本日 React 18.3 も公開します。
24-
2517</Intro >
2618
2719<Note >
@@ -36,16 +28,17 @@ React 19 にアップグレードする前に、問題点を見つけるため
3628
3729</Note >
3830
39- この投稿では、ライブラリを React 19 Beta 版にアップグレードする手順をご案内します 。
31+ この投稿では、React 19 にアップグレードする手順をご案内します 。
4032
4133- [ インストール] ( #installing )
34+ - [ Codemod] ( #codemods )
4235- [ 破壊的変更] ( #breaking-changes )
4336- [ 新たな非推奨化] ( #new-deprecations )
4437- [ 注目すべき変更点] ( #notable-changes )
4538- [ TypeScript 関連の変更] ( #typescript-changes )
4639- [ Changelog] ( #changelog )
4740
48- React 19 をテストしていただける方は、このアップグレードガイドに従い、遭遇した[ 問題を報告] ( https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D ) してください。React 19 Beta 版に追加された新機能のリストについては 、[ React 19 リリースのお知らせ] ( /blog/2024/04/25/react-19 ) をご覧ください。
41+ React 19 をテストしていただける方は、このアップグレードガイドに従い、遭遇した[ 問題を報告] ( https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D ) してください。React 19 に追加された新機能のリストについては 、[ React 19 リリースのお知らせ] ( /blog/2024/04/25/react-19 ) をご覧ください。
4942
5043---
5144## インストール {/* installing* /}
@@ -77,26 +70,57 @@ Your app (or one of its dependencies) is using an outdated JSX transform. Update
7770React と React DOM の最新バージョンをインストールするには以下のようにします。
7871
7972``` bash
80- npm install react@beta react-dom@beta
73+ npm install react@rc react-dom@rc
8174```
8275
83- TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り ` @types/react ` と ` @types/react-dom ` から型をインストールできます。ベータ期間中は ` package.json ` で強制的に別のパッケージを指定することで、新しい型を利用できます。
76+ TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り ` @types/react ` と ` @types/react-dom ` から型をインストールできます。安定版になるまでは ` package.json ` で強制的に別のパッケージを指定することで、新しい型を利用できます。
8477
8578``` json
8679{
8780 "dependencies" : {
88- "@types/react" : " npm:types-react@beta "
89- "@types/react-dom" : " npm:types-react-dom@beta "
81+ "@types/react" : " npm:types-react@rc "
82+ "@types/react-dom" : " npm:types-react-dom@rc "
9083 },
9184 "overrides" : {
92- "@types/react" : " npm:types-react@beta "
93- "@types/react-dom" : " npm:types-react-dom@beta "
85+ "@types/react" : " npm:types-react@rc "
86+ "@types/react-dom" : " npm:types-react-dom@rc "
9487 }
9588}
9689```
9790
9891また、最も一般的な書き換えのための codemod も含まれています。下記の [ TypeScript 関連の変更] ( #typescript-changes ) を参照してください。
9992
93+ ## codemod {/* codemods* /}
94+
95+ アップグレードを支援するため、[ codemod.com] ( https://codemod.com ) のチームと協力し、React 19 の新しい API やパターンにコードを自動的に更新するための codemod を公開しました。
96+
97+ すべての codemod は [ ` react-codemod ` リポジトリ] ( https://github.com/reactjs/react-codemod ) で利用可能であり、Codemod チームも codemod の保守に参加しています。これらの codemod を実行するには、` react-codemod ` コマンドではなく ` codemod ` コマンドの使用をお勧めします。こちらのコマンドの方が高速に実行され、複雑なコードの移行を処理でき、TypeScript のサポートもより良好です。
98+
99+
100+ <Note >
101+
102+ #### React 19 関連の codemod をすべて実行 {/* run-all-react-19-codemods* /}
103+
104+ このガイドにある codemode をすべて実行するには React 19 の ` codemod ` レシピを以下のように実行します。
105+
106+ ``` bash
107+ npx codemod@latest react/19/migration-recipe
108+ ```
109+
110+ これにより以下の ` react-codemod ` の codemod が実行されます。
111+ - [ ` replace-reactdom-render ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render )
112+ - [ ` replace-string-ref ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref )
113+ - [ ` replace-act-import ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import )
114+ - [ ` replace-use-form-state ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state )
115+ - [ ` prop-types-typescript ` ] ( TODO )
116+
117+ これには TypeScript 関連の変更は含まれていません。以下の [ TypeScript 関連の変更] ( #typescript-changes ) を参照してください。
118+
119+ </Note >
120+
121+ 変更のうち codemod が利用できるものは以下で紹介されています。
122+
123+ 利用可能なすべての codemod の一覧については、[ ` react-codemod ` リポジトリ] ( https://github.com/reactjs/react-codemod ) を参照してください。
100124
101125## 破壊的変更 {/* breaking-changes* /}
102126
@@ -158,6 +182,16 @@ function Heading({text = 'Hello, world!'}: Props) {
158182}
159183```
160184
185+ <Note >
186+
187+ codemod で以下のように ` propTypes ` を TypeScript に変換できます。
188+
189+ ``` bash
190+ npx codemod@latest react/prop-types-typescript
191+ ```
192+
193+ </Note >
194+
161195#### 廃止：` contextTypes ` と ` getChildContext ` を使用したレガシーコンテクスト {/* removed-removing-legacy-context* /}
162196
163197レガシーコンテクストは [ 2018 年 10 月 (v16.6.0)] ( https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html ) に非推奨化されました。
@@ -253,7 +287,11 @@ class MyComponent extends React.Component {
253287
254288<Note >
255289
256- 移行を支援するために、文字列 ref を ` ref ` コールバックに自動的に置き換える [ react-codemod] ( https://github.com/reactjs/react-codemod/#string-refs ) を公開する予定です。最新情報や試用については[ この PR] ( https://github.com/reactjs/react-codemod/pull/309 ) をフォローしてください。
290+ codemod で以下のように文字列形式の ref をコールバック形式の ` ref ` に変換できます。
291+
292+ ``` bash
293+ npx codemod@latest react/19/replace-string-ref
294+ ```
257295
258296</Note >
259297
@@ -340,6 +378,16 @@ npm install react-shallow-renderer --save-dev
340378
341379代替手段については、[ 警告ページ] ( https://react.dev/warnings/react-dom-test-utils ) をご覧ください。
342380
381+ <Note >
382+
383+ codemod で以下のように ` ReactDOMTestUtils.act ` を ` React.act ` に変換できます。
384+
385+ ``` bash
386+ npx codemod@latest react/19/replace-act-import
387+ ```
388+
389+ </Note >
390+
343391#### 削除：` ReactDOM.render ` {/* removed-reactdom-render* /}
344392
345393` ReactDOM.render ` は [ 2022 年 3 月 (v18.0.0)] ( https://react.dev/blog/2022/03/08/react-18-upgrade-guide ) に非推奨化されました。React 19 では ` ReactDOM.render ` が削除されており、[ ` ReactDOM.createRoot ` ] ( https://react.dev/reference/react-dom/client/createRoot ) を使用するよう移行する必要があります。
@@ -355,6 +403,16 @@ const root = createRoot(document.getElementById('root'));
355403root .render (< App / > );
356404```
357405
406+ <Note >
407+
408+ codemod で以下のように ` ReactDOM.render ` を ` ReactDOM.createRoot ` に変換できます。
409+
410+ ``` bash
411+ npx codemod@latest react/19/replace-reactdom-render
412+ ```
413+
414+ </Note >
415+
358416#### 削除：` ReactDOM.hydrate ` {/* removed-reactdom-hydrate* /}
359417
360418` ReactDOM.hydrate ` は [ 2022 年 3 月 (v18.0.0)] ( https://react.dev/blog/2022/03/08/react-18-upgrade-guide ) に非推奨化されました。React 19 では ` ReactDOM.hydrate ` が削除されており、[ ` ReactDOM.hydrateRoot ` ] ( https://react.dev/reference/react-dom/client/hydrateRoot ) を使用するよう移行する必要があります。
0 commit comments