1
1
---
2
- <<<<<<< HEAD
3
- title : " React 19 Beta アップグレードガイド"
2
+ title : " React 19 RC アップグレードガイド"
4
3
author : Ricky Hanlon
5
4
date : 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 にアップグレードする手順をご案内します。
13
6
---
14
7
15
8
April 25, 2024 by [ Ricky Hanlon] ( https://twitter.com/rickhanlonii )
16
9
17
10
---
18
11
19
- <<<<<<< HEAD
20
- <Note >
21
-
22
- このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。
23
-
24
- </Note >
25
-
26
12
27
13
<Intro >
28
14
29
15
React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。
30
16
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
-
39
17
</Intro >
40
18
41
19
<Note >
@@ -50,30 +28,17 @@ React 19 にアップグレードする前に、問題点を見つけるため
50
28
51
29
</Note >
52
30
53
- <<<<<<< HEAD
54
- この投稿では、ライブラリを React 19 Beta 版にアップグレードする手順をご案内します。
31
+ この投稿では、React 19 にアップグレードする手順をご案内します。
55
32
56
33
- [ インストール] ( #installing )
34
+ - [ Codemod] ( #codemods )
57
35
- [ 破壊的変更] ( #breaking-changes )
58
36
- [ 新たな非推奨化] ( #new-deprecations )
59
37
- [ 注目すべき変更点] ( #notable-changes )
60
38
- [ TypeScript 関連の変更] ( #typescript-changes )
61
39
- [ Changelog] ( #changelog )
62
40
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 ) をご覧ください。
77
42
78
43
---
79
44
## インストール {/* installing* /}
@@ -108,11 +73,7 @@ React と React DOM の最新バージョンをインストールするには以
108
73
npm install react@rc react-dom@rc
109
74
```
110
75
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 ` で強制的に別のパッケージを指定することで、新しい型を利用できます。
116
77
117
78
``` json
118
79
{
@@ -129,37 +90,37 @@ If you're using TypeScript, you also need to update the types. Once React 19 is
129
90
130
91
また、最も一般的な書き換えのための codemod も含まれています。下記の [ TypeScript 関連の変更] ( #typescript-changes ) を参照してください。
131
92
132
- ## Codemods {/* codemods* /}
93
+ ## codemod {/* codemods* /}
133
94
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 を公開しました。
135
96
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 のサポートもより良好です。
137
98
138
99
139
100
<Note >
140
101
141
- #### Run all React 19 codemods {/* run-all-react-19-codemods* /}
102
+ #### React 19 関連の codemod をすべて実行 {/* run-all-react-19-codemods* /}
142
103
143
- Run all codemods listed in this guide with the React 19 ` codemod ` recipe:
104
+ このガイドにある codemode をすべて実行するには React 19 の ` codemod ` レシピを以下のように実行します。
144
105
145
106
``` bash
146
107
npx codemod@latest react/19/migration-recipe
147
108
```
148
109
149
- This will run the following codemods from ` react-codemod ` :
110
+ これにより以下の ` react-codemod ` の codemod が実行されます。
150
111
- [ ` replace-reactdom-render ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render )
151
112
- [ ` replace-string-ref ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref )
152
113
- [ ` replace-act-import ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import )
153
114
- [ ` replace-use-form-state ` ] ( https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state )
154
115
- [ ` prop-types-typescript ` ] ( TODO )
155
116
156
- This does not include the TypeScript changes. See [ TypeScript changes ] ( #typescript-changes ) below.
117
+ これには TypeScript 関連の変更は含まれていません。以下の [ TypeScript 関連の変更 ] ( #typescript-changes ) を参照してください。
157
118
158
119
</Note >
159
120
160
- Changes that include a codemod include the command below.
121
+ 変更のうち codemod が利用できるものは以下で紹介されています。
161
122
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 ) を参照してください。
163
124
164
125
## 破壊的変更 {/* breaking-changes* /}
165
126
@@ -190,13 +151,8 @@ const root = createRoot(container, {
190
151
191
152
### 非推奨化 React API の削除 {/* removed-deprecated-react-apis* /}
192
153
193
- <<<<<<< HEAD
194
154
#### 廃止:関数コンポーネントの ` propTypes ` と ` defaultProps ` {/* removed-proptypes-and-defaultprops* /}
195
155
` 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
200
156
201
157
React 19 では、React パッケージから ` propTypes ` チェックが削除されており、使用しても無視されるようになります。` propTypes ` を使用している場合は、TypeScript または他の型チェックソリューションへの移行をお勧めします。
202
158
@@ -226,21 +182,17 @@ function Heading({text = 'Hello, world!'}: Props) {
226
182
}
227
183
```
228
184
229
- <<<<<<< HEAD
230
- #### 廃止:` contextTypes ` と ` getChildContext ` を使用したレガシーコンテクスト {/* removed-removing-legacy-context* /}
231
- =======
232
185
<Note >
233
186
234
- Codemod ` propTypes ` to TypeScript with:
187
+ codemod で以下のように ` propTypes ` を TypeScript に変換できます。
235
188
236
189
``` bash
237
190
npx codemod@latest react/prop-types-typescript
238
191
```
239
192
240
193
</Note >
241
194
242
- #### Removed: Legacy Context using ` contextTypes ` and ` getChildContext ` {/* removed-removing-legacy-context* /}
243
- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
195
+ #### 廃止:` contextTypes ` と ` getChildContext ` を使用したレガシーコンテクスト {/* removed-removing-legacy-context* /}
244
196
245
197
レガシーコンテクストは [ 2018 年 10 月 (v16.6.0)] ( https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html ) に非推奨化されました。
246
198
@@ -335,15 +287,11 @@ class MyComponent extends React.Component {
335
287
336
288
<Note >
337
289
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 ` に変換できます。
342
291
343
292
``` bash
344
293
npx codemod@latest react/19/replace-string-ref
345
294
```
346
- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
347
295
348
296
</Note >
349
297
@@ -430,21 +378,17 @@ npm install react-shallow-renderer --save-dev
430
378
431
379
代替手段については、[ 警告ページ] ( https://react.dev/warnings/react-dom-test-utils ) をご覧ください。
432
380
433
- <<<<<<< HEAD
434
- #### 削除:` ReactDOM.render ` {/* removed-reactdom-render* /}
435
- =======
436
381
<Note >
437
382
438
- Codemod ` ReactDOMTestUtils.act ` to ` React.act ` :
383
+ codemod で以下のように ` ReactDOMTestUtils.act ` を ` React.act ` に変換できます。
439
384
440
385
``` bash
441
386
npx codemod@latest react/19/replace-act-import
442
387
```
443
388
444
389
</Note >
445
390
446
- #### Removed: ` ReactDOM.render ` {/* removed-reactdom-render* /}
447
- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
391
+ #### 削除:` ReactDOM.render ` {/* removed-reactdom-render* /}
448
392
449
393
` 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 ) を使用するよう移行する必要があります。
450
394
@@ -459,21 +403,17 @@ const root = createRoot(document.getElementById('root'));
459
403
root .render (< App / > );
460
404
```
461
405
462
- <<<<<<< HEAD
463
- #### 削除:` ReactDOM.hydrate ` {/* removed-reactdom-hydrate* /}
464
- =======
465
406
<Note >
466
407
467
- Codemod ` ReactDOM.render ` to ` ReactDOM.createRoot ` :
408
+ codemod で以下のように ` ReactDOM.render ` を ` ReactDOM.createRoot ` に変換できます。
468
409
469
410
``` bash
470
411
npx codemod@latest react/19/replace-reactdom-render
471
412
```
472
413
473
414
</Note >
474
415
475
- #### Removed: ` ReactDOM.hydrate ` {/* removed-reactdom-hydrate* /}
476
- >>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
416
+ #### 削除:` ReactDOM.hydrate ` {/* removed-reactdom-hydrate* /}
477
417
478
418
` 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 ) を使用するよう移行する必要があります。
479
419
0 commit comments