diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index fe5f36dbe..c1d4b1693 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -240,11 +240,7 @@ React 18 の strict モードでは、開発時にコンポーネントがマウ #### useTransition {/*usetransition*/} -<<<<<<< HEAD `useTransition` と `startTransition` により、一部の更新は緊急性が低いということをマークできるようになります。その他の更新はデフォルトで緊急性が高いものとして扱われます。React は緊急性の高い更新（例えばテキスト入力の更新）が、緊急性の低い更新（例えば検索結果のリストのレンダー）を中断できるようになります。[こちらのドキュメントを参照](/reference/react/useTransition)。 -======= -`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/reference/react/useTransition). ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 #### useDeferredValue {/*usedeferredvalue*/} 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 cf1bb654a..91f70057c 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 @@ -1,41 +1,19 @@ --- -<<<<<<< HEAD -title: "React 19 Beta アップグレードガイド" +title: "React 19 RC アップグレードガイド" author: Ricky Hanlon date: 2024/04/25 -description: React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、ライブラリを React 19 Beta にアップグレードする手順をご案内します。 -======= -title: "React 19 RC Upgrade Guide" -author: Ricky Hanlon -date: 2024/04/25 -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. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +description: React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、アプリやライブラリを React 19 にアップグレードする手順をご案内します。 --- April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii) --- -<<<<<<< HEAD - - -このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。 - - - React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。 -アップグレードを容易にするために、本日 React 18.3 も公開します。 -======= - - - -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. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 - @@ -50,30 +28,17 @@ React 19 にアップグレードする前に、問題点を見つけるため -<<<<<<< HEAD -この投稿では、ライブラリを React 19 Beta 版にアップグレードする手順をご案内します。 +この投稿では、React 19 にアップグレードする手順をご案内します。 - [インストール](#installing) +- [Codemod](#codemods) - [破壊的変更](#breaking-changes) - [新たな非推奨化](#new-deprecations) - [注目すべき変更点](#notable-changes) - [TypeScript 関連の変更](#typescript-changes) - [Changelog](#changelog) -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)をご覧ください。 -======= -In this post, we will guide you through the steps for upgrading to React 19: - -- [Installing](#installing) -- [Codemods](#codemods) -- [Breaking changes](#breaking-changes) -- [New deprecations](#new-deprecations) -- [Notable changes](#notable-changes) -- [TypeScript changes](#typescript-changes) -- [Changelog](#changelog) - -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). ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +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)をご覧ください。 --- ## インストール {/*installing*/} @@ -108,11 +73,7 @@ React と React DOM の最新バージョンをインストールするには以 npm install react@rc react-dom@rc ``` -<<<<<<< HEAD -TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り `@types/react` と `@types/react-dom` から型をインストールできます。ベータ期間中は `package.json` で強制的に別のパッケージを指定することで、新しい型を利用できます。 -======= -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`: ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り `@types/react` と `@types/react-dom` から型をインストールできます。安定版になるまでは `package.json` で強制的に別のパッケージを指定することで、新しい型を利用できます。 ```json { @@ -129,37 +90,37 @@ If you're using TypeScript, you also need to update the types. Once React 19 is また、最も一般的な書き換えのための codemod も含まれています。下記の [TypeScript 関連の変更](#typescript-changes)を参照してください。 -## Codemods {/*codemods*/} +## codemod {/*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. +アップグレードを支援するため、[codemod.com](https://codemod.com) のチームと協力し、React 19 の新しい API やパターンにコードを自動的に更新するための codemod を公開しました。 -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. +すべての codemod は [`react-codemod` リポジトリ](https://github.com/reactjs/react-codemod)で利用可能であり、Codemod チームも codemod の保守に参加しています。これらの codemod を実行するには、`react-codemod` コマンドではなく `codemod` コマンドの使用をお勧めします。こちらのコマンドの方が高速に実行され、複雑なコードの移行を処理でき、TypeScript のサポートもより良好です。 -#### Run all React 19 codemods {/*run-all-react-19-codemods*/} +#### React 19 関連の codemod をすべて実行 {/*run-all-react-19-codemods*/} -Run all codemods listed in this guide with the React 19 `codemod` recipe: +このガイドにある codemode をすべて実行するには React 19 の `codemod` レシピを以下のように実行します。 ```bash npx codemod@latest react/19/migration-recipe ``` -This will run the following codemods from `react-codemod`: +これにより以下の `react-codemod` の 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. +これには TypeScript 関連の変更は含まれていません。以下の [TypeScript 関連の変更](#typescript-changes)を参照してください。 -Changes that include a codemod include the command below. +変更のうち codemod が利用できるものは以下で紹介されています。 -For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod). +利用可能なすべての codemod の一覧については、[`react-codemod` リポジトリ](https://github.com/reactjs/react-codemod)を参照してください。 ## 破壊的変更 {/*breaking-changes*/} @@ -190,13 +151,8 @@ const root = createRoot(container, { ### 非推奨化 React API の削除 {/*removed-deprecated-react-apis*/} -<<<<<<< HEAD #### 廃止：関数コンポーネントの `propTypes` と `defaultProps` {/*removed-proptypes-and-defaultprops*/} `PropTypes` は [2017 年 4 月 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings) に非推奨化されました。 -======= -#### 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). ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 React 19 では、React パッケージから `propTypes` チェックが削除されており、使用しても無視されるようになります。`propTypes` を使用している場合は、TypeScript または他の型チェックソリューションへの移行をお勧めします。 @@ -226,12 +182,9 @@ function Heading({text = 'Hello, world!'}: Props) { } ``` -<<<<<<< HEAD -#### 廃止：`contextTypes` と `getChildContext` を使用したレガシーコンテクスト {/*removed-removing-legacy-context*/} -======= -Codemod `propTypes` to TypeScript with: +codemod で以下のように `propTypes` を TypeScript に変換できます。 ```bash npx codemod@latest react/prop-types-typescript @@ -239,8 +192,7 @@ npx codemod@latest react/prop-types-typescript -#### Removed: Legacy Context using `contextTypes` and `getChildContext` {/*removed-removing-legacy-context*/} ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +#### 廃止：`contextTypes` と `getChildContext` を使用したレガシーコンテクスト {/*removed-removing-legacy-context*/} レガシーコンテクストは [2018 年 10 月 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html) に非推奨化されました。 @@ -335,15 +287,11 @@ class MyComponent extends React.Component { -<<<<<<< HEAD -移行を支援するために、文字列 ref を `ref` コールバックに自動的に置き換える [react-codemod](https://github.com/reactjs/react-codemod/#string-refs) を公開する予定です。最新情報や試用については[この PR](https://github.com/reactjs/react-codemod/pull/309) をフォローしてください。 -======= -Codemod string refs with `ref` callbacks: +codemod で以下のように文字列形式の ref をコールバック形式の `ref` に変換できます。 ```bash npx codemod@latest react/19/replace-string-ref ``` ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 @@ -430,12 +378,9 @@ npm install react-shallow-renderer --save-dev 代替手段については、[警告ページ](https://react.dev/warnings/react-dom-test-utils)をご覧ください。 -<<<<<<< HEAD -#### 削除：`ReactDOM.render` {/*removed-reactdom-render*/} -======= -Codemod `ReactDOMTestUtils.act` to `React.act`: +codemod で以下のように `ReactDOMTestUtils.act` を `React.act` に変換できます。 ```bash npx codemod@latest react/19/replace-act-import @@ -443,8 +388,7 @@ npx codemod@latest react/19/replace-act-import -#### Removed: `ReactDOM.render` {/*removed-reactdom-render*/} ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +#### 削除：`ReactDOM.render` {/*removed-reactdom-render*/} `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) を使用するよう移行する必要があります。 @@ -459,12 +403,9 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -<<<<<<< HEAD -#### 削除：`ReactDOM.hydrate` {/*removed-reactdom-hydrate*/} -======= -Codemod `ReactDOM.render` to `ReactDOM.createRoot`: +codemod で以下のように `ReactDOM.render` を `ReactDOM.createRoot` に変換できます。 ```bash npx codemod@latest react/19/replace-reactdom-render @@ -472,8 +413,7 @@ npx codemod@latest react/19/replace-reactdom-render -#### Removed: `ReactDOM.hydrate` {/*removed-reactdom-hydrate*/} ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +#### 削除：`ReactDOM.hydrate` {/*removed-reactdom-hydrate*/} `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) を使用するよう移行する必要があります。 diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/04/25/react-19.md index 874824ad8..6069ef489 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/04/25/react-19.md @@ -2,40 +2,20 @@ title: "React 19 RC" author: The React Team date: 2024/04/25 -<<<<<<< HEAD -description: React 19 Beta が npm で利用可能になりました！ この投稿では React 19 の新機能、およびそれらをどのように採用するかについて概説します。 -======= -description: React 19 RC is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +description: React 19 RC が npm で利用可能になりました！ この投稿では React 19 の新機能、およびそれらをどのように採用するかについて概説します。 --- April 25, 2024 by [The React Team](/community/team) --- -<<<<<<< HEAD - - -このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。 - - - npm で React 19 Beta が利用可能になりました！ -[React 19 Beta アップグレードガイド](/blog/2024/04/25/react-19-upgrade-guide)では、アプリを React 19 Beta にアップグレードするためのステップバイステップガイドをお示ししました。この投稿では、React 19 の新機能と、それらをどのように採用するかについて概説します。 -======= - - -React 19 RC is now available on npm! - - - -In our [React 19 RC Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +[React 19 RC アップグレードガイド](/blog/2024/04/25/react-19-upgrade-guide)では、アプリを React 19 にアップグレードするためのステップバイステップガイドをお示ししました。この投稿では、React 19 の新機能と、それらをどのように採用するかについて概説します。 - [React 19 の新機能](#whats-new-in-react-19) - [React 19 の改善点](#improvements-in-react-19) @@ -125,17 +105,10 @@ function UpdateName({}) { アクションはあなたの代わりに自動的にデータの送信を管理してくれます。 -<<<<<<< HEAD - **送信中状態**：アクションは送信中状態を提供します。これはリクエストと共に開始され、最終的な state の更新がコミットされると自動的にリセットされます。 -- **楽観的更新**：アクションは新しい [`useOptimistic`](#new-feature-optimistic-updates) フックをサポートしており、リクエスト送信中にユーザに対し即時のフィードバックを表示することができます。 +- **楽観的更新**：アクションは新しい [`useOptimistic`](#new-hook-optimistic-updates) フックをサポートしており、リクエスト送信中にユーザに対し即時のフィードバックを表示することができます。 - **エラー処理**：アクションはエラー処理を提供するため、リクエストが失敗した場合にエラーバウンダリを表示し、楽観的更新を自動的に元の状態に復元できます。 - **フォーム**：`
` 要素は、props である `action` および `formAction` に関数を渡すことをサポートするようになりました。`action` に関数を渡すことでデフォルトでアクションとして扱われ、送信後にフォームを自動的にリセットします。 -======= -- **Pending state**: Actions provide a pending state that starts at the beginning of a request and automatically resets when the final state update is committed. -- **Optimistic updates**: Actions support the new [`useOptimistic`](#new-hook-optimistic-updates) hook so you can show users instant feedback while the requests are submitting. -- **Error handling**: Actions provide error handling so you can display Error Boundaries when a request fails, and revert optimistic updates to their original value automatically. -- **Forms**: `` elements now support passing functions to the `action` and `formAction` props. Passing functions to the `action` props use Actions by default and reset the form automatically after submission. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 @@ -531,12 +504,7 @@ ref クリーンアップ関数の導入により、`ref` コールバックか 元のコードは `HTMLDivElement` のインスタンスを返していますが、TypeScript はこれがクリーンアップ関数を返すつもりでミスをしたのか、クリーンアップ関数を返したくないのか判断できないのです。 -<<<<<<< HEAD このパターンは [`no-implicit-ref-callback-return`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return) の codemod を用いて修正できます。 -======= -You can codemod this pattern with [`no-implicit-ref-callback-return`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return). ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 - ### `useDeferredValue` の初期値 {/*use-deferred-value-initial-value*/} diff --git a/src/content/blog/index.md b/src/content/blog/index.md index a312f22d1..1971355ea 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -14,17 +14,6 @@ React チームからの公式な更新のお知らせはこのブログに掲
-<<<<<<< HEAD - - -React 19 Beta アップグレードガイドでは、アプリを React 19 Beta にアップグレードするためのステップバイステップガイドをお示ししました。この投稿では、React 19 の新機能と、それらをどのように採用するかについて概説します。 - - - - - -React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、ライブラリを React 19 Beta にアップグレードする手順をご案内します。 -======= Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ... @@ -33,14 +22,13 @@ Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada w -In the React 19 RC Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ... +React 19 RC アップグレードガイドでは、アプリを React 19 にアップグレードするためのステップバイステップガイドをお示ししました。この投稿では、React 19 の新機能と、それらをどのように採用するかについて概説します。 - + -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 libraries to React 19 ... ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、ライブラリを React 19 Beta にアップグレードする手順をご案内します。 diff --git a/src/content/community/team.md b/src/content/community/team.md index 5bd9499cc..b627dbb56 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -31,11 +31,7 @@ React コアチームのメンバーは、コアコンポーネントの API、R -<<<<<<< HEAD - Jason のお気に入りは、職場に大量の Amazon のパッケージを届けてもらい、それを使って要塞を築くことです。チームとの間に（物理的な意味で）よく壁を作っており、for-of ループの動作も理解していないにも関わらず、我々は彼が仕事に持ち込むユニークさを評価しています。 -======= - Jason abandoned embedded C for a career in front-end engineering and never looked back. Armed with esoteric CSS knowledge and a passion for beautiful UI, Jason joined Facebook in 2010, where he now feels privileged to have seen JavaScript development come of age. Though he may not understand how `for...of` loops work, he loves getting to work with brilliant people on projects that enable amazing UX. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 + Jason は、組み込み C 開発を完全に捨ててフロントエンドエンジニアとしてのキャリアを選びました。難解な CSS の知識と美しい UI への情熱を武器に 2010 年に Facebook に参加し、JavaScript 開発の成長を見届けることができたことを光栄に思っています。`for...of` ループの動作は理解していないかもしれませんが、素晴らしい人々と一緒に、素晴らしい UX を実現するプロジェクトに取り組むことを愛しています。 diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 8e24e1df2..0adf5a0f6 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -45,15 +45,9 @@ title: 'エフェクトを使って同期を行う' エフェクトを書くには、以下の 3 つのステップに従ってください。 -<<<<<<< HEAD -1. **エフェクトを宣言する**。デフォルトでは、エフェクトはすべてのレンダー後に実行されます。 +1. **エフェクトを宣言する**。デフォルトでは、エフェクトはすべての[コミット](/learn/render-and-commit)後に実行されます。 2. **エフェクトの依存値 (dependency) の配列を指定する**。ほとんどのエフェクトは、レンダー後に毎回ではなく、*必要に応じて*再実行されるべきものです。例えば、フェードインアニメーションの開始は、コンポーネントが表示されるときにのみ行われるべきです。チャットルームへの接続と切断は、コンポーネントが表示されたり消えたりするときや、チャットルームが変更されたときにのみ行われるべきです。*依存配列*を指定してこれをコントロールする方法について、後で説明します。 3. **必要に応じてクリーンアップを追加する**。一部のエフェクトは、行っていたことを停止、元に戻す、またはクリーンアップする方法を指定する必要があります。例えば、「接続」には「切断」が必要で、「登録」には「解除」が必要で、「取得」には「キャンセル」または「無視」が必要です。*クリーンアップ関数*を返すことで、これを行う方法を学びます。 -======= -1. **Declare an Effect.** By default, your Effect will run after every [commit](/learn/render-and-commit). -2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* -3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 それぞれのステップを詳しく見ていきましょう。 @@ -604,14 +598,11 @@ React は、開発中に意図的にコンポーネントを再マウントし ほとんどのエフェクトは、以下の一般的なパターンのいずれかに合致します。 -<<<<<<< HEAD -### React 以外のウィジェットを制御する {/*controlling-non-react-widgets*/} -======= -#### Don't use refs to prevent Effects from firing {/*dont-use-refs-to-prevent-effects-from-firing*/} +#### ref を使ってエフェクトの実行を抑止しようとしない {/*dont-use-refs-to-prevent-effects-from-firing*/} -A common pitfall for preventing Effects firing twice in development is to use a `ref` to prevent the Effect from running more than once. For example, you could "fix" the above bug with a `useRef`: +開発時にエフェクトが 2 回実行されるのを抑止しようとして `ref` を使おうとするのはよくある誤りです。上記のバグを `useRef` を使って以下のように「修正」しようと思うかもしれません。 ```js {1,3-4} const connectionRef = useRef(null); @@ -624,18 +615,17 @@ A common pitfall for preventing Effects firing twice in development is to use a }, []); ``` -This makes it so you only see `"✅ Connecting..."` once in development, but it doesn't fix the bug. +これにより `"✅ Connecting..."` が開発時に 1 回だけ表示されるようにはなるのですが、これでバグが修正されるわけではありません。 -When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix". +ユーザが他のページに移動しても、接続は閉じられず、戻ってきたときに新しい接続が作成されます。ユーザがアプリ内を移動するたびに接続が積み重なっていきます。「修正」前と同じ状況です。 -To fix the bug, it is not enough to just make the Effect run once. The effect needs to work after re-mounting, which means the connection needs to be cleaned up like in the solution above. +このバグを修正するには、エフェクトを一度だけ実行するようにするだけでは不十分です。エフェクトは再マウント時にも機能する必要があり、接続は上記の解決策のようにクリーンアップされる必要があるのです。 -See the examples below for how to handle common patterns. +以下の例を参考に、一般的なパターンの処理方法を確認してください。 -### Controlling non-React widgets {/*controlling-non-react-widgets*/} ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +### React 以外のウィジェットを制御する {/*controlling-non-react-widgets*/} 時に、React で書かれていない UI ウィジェットを追加したい場合があります。例えば、ページに地図コンポーネントを追加しようとしているとします。`setZoomLevel()` メソッドがあり、React のコード内の `zoomLevel` という state 変数と同期させたいとします。エフェクトは次のようになります。 diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 843773691..a57fe33af 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2915,8 +2915,4 @@ body { 1. どちらかが勝利したときに、勝利につながった 3 つのマス目をハイライト表示する。引き分けになった場合は、引き分けになったという結果をメッセージに表示する。 1. 着手履歴リストで、各着手の場所を (row, col) という形式で表示する。 -<<<<<<< HEAD -このチュートリアルを通じて、React のコンセプトである React 要素、コンポーネント、props、state に触れてきました。ゲーム制作においてこれらの概念がどのように機能するかが分かったので、次は [React の流儀](/learn/thinking-in-react)をチェックして、アプリの UI を構築する際にこれらの React のコンセプトがどのように機能するのかを確認してください。 -======= -Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when building an app's UI. ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +このチュートリアルを通じて、React のコンセプトである React 要素、コンポーネント、props、state に触れてきました。ゲーム制作においてこれらの概念がどのように機能するかが分かったので、次は [React の流儀](/learn/thinking-in-react)をチェックして、アプリの UI を構築する際にこれらの React のコンセプトがどのように機能するのかを確認してください。 \ No newline at end of file diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index d72e78859..04ac4e80d 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -386,11 +386,7 @@ export async function signUpNewUser(newEmail) { -<<<<<<< HEAD -フォームアクションから state を更新する方法については、[`useActionState`](/reference/react/hooks/useActionState) のドキュメントを参照してください。 -======= -Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs ->>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4 +フォームアクションから state を更新する方法については、[`useActionState`](/reference/react/useActionState) のドキュメントを参照してください。 ### 複数の送信タイプを処理する {/*handling-multiple-submission-types*/} diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index 37811221e..3bfdf71c4 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -43,27 +43,15 @@ React による `` の機能拡張は、現在 React の Canary および 以下の props は `rel="stylesheet"` の場合に適用されます。 -<<<<<<< HEAD -* `precedence`: 文字列。React がドキュメントの `` 内で `` DOM ノードを他と比較してどのように順序付けるかを指定します。これによりどのスタイルシートが他のスタイルシートを上書きできるかが決まります。可能な値は優先度が低い順に `"reset"`、`"low"`、`"medium"`、`"high"` です。同じ優先順位を持つスタイルシートは、`` の場合でもインライン `