11---
2- <<<<<<< HEAD
3- title : " React 19 Beta アップグレードガイド"
2+ title : " React 19 RC アップグレードガイド"
43author : Ricky Hanlon
54date : 2024/04/25
6- description : React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、ライブラリを React 19 Beta にアップグレードする手順をご案内します。
7- =======
8- title : " React 19 RC Upgrade Guide"
9- author : Ricky Hanlon
10- date : 2024/04/25
11- description : The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading apps and libraries to React 19.
12- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
5+ description : React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、アプリやライブラリを React 19 にアップグレードする手順をご案内します。
136---
147
158April 25, 2024 by [ Ricky Hanlon] ( https://twitter.com/rickhanlonii )
169
1710---
1811
19- <<<<<<< HEAD
20- <Note >
21-
22- このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。
23-
24- </Note >
25-
2612
2713<Intro >
2814
2915React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。
3016
31- アップグレードを容易にするために、本日 React 18.3 も公開します。
32- =======
33-
34- <Intro >
35-
36- The improvements added to React 19 RC require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps.
37- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
38-
3917</Intro >
4018
4119<Note >
@@ -50,30 +28,17 @@ React 19 にアップグレードする前に、問題点を見つけるため
5028
5129</Note >
5230
53- <<<<<<< HEAD
54- この投稿では、ライブラリを React 19 Beta 版にアップグレードする手順をご案内します。
31+ この投稿では、React 19 にアップグレードする手順をご案内します。
5532
5633- [ インストール] ( #installing )
34+ - [ Codemod] ( #codemods )
5735- [ 破壊的変更] ( #breaking-changes )
5836- [ 新たな非推奨化] ( #new-deprecations )
5937- [ 注目すべき変更点] ( #notable-changes )
6038- [ TypeScript 関連の変更] ( #typescript-changes )
6139- [ Changelog] ( #changelog )
6240
63- 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 ) をご覧ください。
64- =======
65- In this post, we will guide you through the steps for upgrading to React 19:
66-
67- - [ Installing] ( #installing )
68- - [ Codemods] ( #codemods )
69- - [ Breaking changes] ( #breaking-changes )
70- - [ New deprecations] ( #new-deprecations )
71- - [ Notable changes] ( #notable-changes )
72- - [ TypeScript changes] ( #typescript-changes )
73- - [ Changelog] ( #changelog )
74-
75- If you'd like to help us test React 19, follow the steps in this upgrade guide and [ report any issues] ( https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D ) you encounter. For a list of new features added to React 19, see the [ React 19 release post] ( /blog/2024/04/25/react-19 ) .
76- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
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 ) をご覧ください。
7742
7843---
7944## インストール {/* installing* /}
@@ -108,11 +73,7 @@ React と React DOM の最新バージョンをインストールするには以
10873npm install react@rc react-dom@rc
10974```
11075
111- <<<<<<< HEAD
112- TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り ` @types/react ` と ` @types/react-dom ` から型をインストールできます。ベータ期間中は ` package.json ` で強制的に別のパッケージを指定することで、新しい型を利用できます。
113- =======
114- 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 ` . Until the stable release, the types are available in different packages which need to be enforced in your ` package.json ` :
115- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
76+ TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り ` @types/react ` と ` @types/react-dom ` から型をインストールできます。安定版になるまでは ` package.json ` で強制的に別のパッケージを指定することで、新しい型を利用できます。
11677
11778``` json
11879{
@@ -129,37 +90,37 @@ If you're using TypeScript, you also need to update the types. Once React 19 is
12990
13091また、最も一般的な書き換えのための codemod も含まれています。下記の [ TypeScript 関連の変更] ( #typescript-changes ) を参照してください。
13192
132- ## Codemods {/* codemods* /}
93+ ## codemod {/* codemods* /}
13394
134- 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.
95+ アップグレードを支援するため、 [ codemod.com] ( https://codemod.com ) のチームと協力し、React 19 の新しい API やパターンにコードを自動的に更新するための codemod を公開しました。
13596
136- 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.
97+ すべての codemod は [ ` react-codemod ` リポジトリ ] ( https://github.com/reactjs/react-codemod ) で利用可能であり、 Codemod チームも codemod の保守に参加しています。これらの codemod を実行するには、 ` react- codemod` コマンドではなく ` codemod ` コマンドの使用をお勧めします。こちらのコマンドの方が高速に実行され、複雑なコードの移行を処理でき、 TypeScript のサポートもより良好です。
13798
13899
139100<Note >
140101
141- #### Run all React 19 codemods {/* run-all-react-19-codemods* /}
102+ #### React 19 関連の codemod をすべて実行 {/* run-all-react-19-codemods* /}
142103
143- Run all codemods listed in this guide with the React 19 ` codemod ` recipe:
104+ このガイドにある codemode をすべて実行するには React 19 の ` codemod ` レシピを以下のように実行します。
144105
145106``` bash
146107npx codemod@latest react/19/migration-recipe
147108```
148109
149- This will run the following codemods from ` react-codemod ` :
110+ これにより以下の ` react-codemod ` の codemod が実行されます。
150111- [ ` replace-reactdom-render ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render )
151112- [ ` replace-string-ref ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref )
152113- [ ` replace-act-import ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import )
153114- [ ` replace-use-form-state ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state )
154115- [ ` prop-types-typescript ` ] ( TODO )
155116
156- This does not include the TypeScript changes. See [ TypeScript changes ] ( #typescript-changes ) below.
117+ これには TypeScript 関連の変更は含まれていません。以下の [ TypeScript 関連の変更 ] ( #typescript-changes ) を参照してください。
157118
158119</Note >
159120
160- Changes that include a codemod include the command below.
121+ 変更のうち codemod が利用できるものは以下で紹介されています。
161122
162- For a list of all available codemods, see the [ ` react-codemod ` repo ] ( https://github.com/reactjs/react-codemod ) .
123+ 利用可能なすべての codemod の一覧については、 [ ` react-codemod ` リポジトリ ] ( https://github.com/reactjs/react-codemod ) を参照してください。
163124
164125## 破壊的変更 {/* breaking-changes* /}
165126
@@ -190,13 +151,8 @@ const root = createRoot(container, {
190151
191152### 非推奨化 React API の削除 {/* removed-deprecated-react-apis* /}
192153
193- <<<<<<< HEAD
194154#### 廃止:関数コンポーネントの ` propTypes ` と ` defaultProps ` {/* removed-proptypes-and-defaultprops* /}
195155` PropTypes ` は [ 2017 年 4 月 (v15.5.0)] ( https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings ) に非推奨化されました。
196- =======
197- #### Removed: ` propTypes ` and ` defaultProps ` for functions {/* removed-proptypes-and-defaultprops* /}
198- ` 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 ) .
199- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
200156
201157React 19 では、React パッケージから ` propTypes ` チェックが削除されており、使用しても無視されるようになります。` propTypes ` を使用している場合は、TypeScript または他の型チェックソリューションへの移行をお勧めします。
202158
@@ -226,21 +182,17 @@ function Heading({text = 'Hello, world!'}: Props) {
226182}
227183```
228184
229- <<<<<<< HEAD
230- #### 廃止:` contextTypes ` と ` getChildContext ` を使用したレガシーコンテクスト {/* removed-removing-legacy-context* /}
231- =======
232185<Note >
233186
234- Codemod ` propTypes ` to TypeScript with:
187+ codemod で以下のように ` propTypes ` を TypeScript に変換できます。
235188
236189``` bash
237190npx codemod@latest react/prop-types-typescript
238191```
239192
240193</Note >
241194
242- #### Removed: Legacy Context using ` contextTypes ` and ` getChildContext ` {/* removed-removing-legacy-context* /}
243- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
195+ #### 廃止:` contextTypes ` と ` getChildContext ` を使用したレガシーコンテクスト {/* removed-removing-legacy-context* /}
244196
245197レガシーコンテクストは [ 2018 年 10 月 (v16.6.0)] ( https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html ) に非推奨化されました。
246198
@@ -335,15 +287,11 @@ class MyComponent extends React.Component {
335287
336288<Note >
337289
338- <<<<<<< HEAD
339- 移行を支援するために、文字列 ref を ` ref ` コールバックに自動的に置き換える [ react-codemod] ( https://github.com/reactjs/react-codemod/#string-refs ) を公開する予定です。最新情報や試用については[ この PR] ( https://github.com/reactjs/react-codemod/pull/309 ) をフォローしてください。
340- =======
341- Codemod string refs with ` ref ` callbacks:
290+ codemod で以下のように文字列形式の ref をコールバック形式の ` ref ` に変換できます。
342291
343292``` bash
344293npx codemod@latest react/19/replace-string-ref
345294```
346- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
347295
348296</Note >
349297
@@ -430,21 +378,17 @@ npm install react-shallow-renderer --save-dev
430378
431379代替手段については、[ 警告ページ] ( https://react.dev/warnings/react-dom-test-utils ) をご覧ください。
432380
433- <<<<<<< HEAD
434- #### 削除:` ReactDOM.render ` {/* removed-reactdom-render* /}
435- =======
436381<Note >
437382
438- Codemod ` ReactDOMTestUtils.act ` to ` React.act ` :
383+ codemod で以下のように ` ReactDOMTestUtils.act ` を ` React.act ` に変換できます。
439384
440385``` bash
441386npx codemod@latest react/19/replace-act-import
442387```
443388
444389</Note >
445390
446- #### Removed: ` ReactDOM.render ` {/* removed-reactdom-render* /}
447- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
391+ #### 削除:` ReactDOM.render ` {/* removed-reactdom-render* /}
448392
449393` 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 ) を使用するよう移行する必要があります。
450394
@@ -459,21 +403,17 @@ const root = createRoot(document.getElementById('root'));
459403root .render (< App / > );
460404```
461405
462- <<<<<<< HEAD
463- #### 削除:` ReactDOM.hydrate ` {/* removed-reactdom-hydrate* /}
464- =======
465406<Note >
466407
467- Codemod ` ReactDOM.render ` to ` ReactDOM.createRoot ` :
408+ codemod で以下のように ` ReactDOM.render ` を ` ReactDOM.createRoot ` に変換できます。
468409
469410``` bash
470411npx codemod@latest react/19/replace-reactdom-render
471412```
472413
473414</Note >
474415
475- #### Removed: ` ReactDOM.hydrate ` {/* removed-reactdom-hydrate* /}
476- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
416+ #### 削除:` ReactDOM.hydrate ` {/* removed-reactdom-hydrate* /}
477417
478418` 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 ) を使用するよう移行する必要があります。
479419
0 commit comments