merging all conflicts

reactjs · May 27, 2024 · 938ec2f · 938ec2f
2 parents 74646ec + c3bc5af
commit 938ec2f
Show file tree

Hide file tree

Showing 24 changed files with 820 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "engines": {
-    "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
+    "node": ">=16.8.0"
   },
   "nextBundleAnalysis": {
     "budget": null,

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
@@ -8,7 +8,7 @@ import {useRouter} from 'next/router';
 import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
-import SocialBanner from '../SocialBanner';
+// import SocialBanner from '../SocialBanner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import PageHeading from 'components/PageHeading';
@@ -137,7 +137,7 @@ export function Page({
           />
         </Head>
       )}
-      <SocialBanner />
+      {/*<SocialBanner />*/}
       <TopNav
         section={section}
         routeTree={routeTree}

diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
@@ -125,7 +125,7 @@ function NavItem({url, isActive, children}: any) {
       <Link
         href={url}
         className={cn(
-          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize',
+          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap',
           !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
           isActive &&
             'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'

diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
@@ -22,7 +22,6 @@ function PageHeading({
   title,
   status,
   canary,
-  description,
   tags = [],
   breadcrumbs,
 }: PageHeadingProps) {
@@ -40,11 +39,6 @@ function PageHeading({
           )}
           {status ? <em>—{status}</em> : ''}
         </H1>
-        {description && (
-          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-primary leading-large">
-            {description}
-          </p>
-        )}
         {tags?.length > 0 && (
           <div className="mt-4">
             {tags.map((tag) => (

diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md
@@ -240,7 +240,11 @@ 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
@@ -1,14 +1,22 @@
 ---
+<<<<<<< HEAD
 title: "React 19 Beta アップグレードガイド"
 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
 ---
 
 April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
 
 ---
 
+<<<<<<< HEAD
 <Note>
 
 このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。
@@ -21,6 +29,12 @@ April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
 React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。
 
 アップグレードを容易にするために、本日 React 18.3 も公開します。
+=======
+
+<Intro>
+
+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
 
 </Intro>
 
@@ -36,6 +50,7 @@ React 19 にアップグレードする前に、問題点を見つけるため
 
 </Note>
 
+<<<<<<< HEAD
 この投稿では、ライブラリを React 19 Beta 版にアップグレードする手順をご案内します。
 
 - [インストール](#installing)
@@ -46,6 +61,19 @@ React 19 にアップグレードする前に、問題点を見つけるため
 - [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
 
 ---
 ## インストール {/*installing*/}
@@ -77,26 +105,61 @@ Your app (or one of its dependencies) is using an outdated JSX transform. Update
 React と React DOM の最新バージョンをインストールするには以下のようにします。
 
 ```bash
-npm install react@beta react-dom@beta
+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
 
 ```json
 {
   "dependencies": {
-    "@types/react": "npm:types-react@beta",
-    "@types/react-dom": "npm:types-react-dom@beta"
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   },
   "overrides": {
-    "@types/react": "npm:types-react@beta",
-    "@types/react-dom": "npm:types-react-dom@beta"
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }
 ```
 
 また、最も一般的な書き換えのための codemod も含まれています。下記の [TypeScript 関連の変更](#typescript-changes)を参照してください。
 
+## Codemods {/*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.
+
+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.
+
+
+<Note>
+
+#### Run all React 19 codemods {/*run-all-react-19-codemods*/}
+
+Run all codemods listed in this guide with the React 19 `codemod` recipe:
+
+```bash
+npx codemod@latest react/19/migration-recipe
+```
+
+This will run the following codemods from `react-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.
+
+</Note>
+
+Changes that include a codemod include the command below. 
+
+For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod).
 
 ## 破壊的変更 {/*breaking-changes*/}
 
@@ -127,8 +190,13 @@ 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 または他の型チェックソリューションへの移行をお勧めします。
 
@@ -158,7 +226,21 @@ function Heading({text = 'Hello, world!'}: Props) {
 }
 ```
 
+<<<<<<< HEAD
 #### 廃止：`contextTypes` と `getChildContext` を使用したレガシーコンテクスト {/*removed-removing-legacy-context*/}
+=======
+<Note>
+
+Codemod `propTypes` to TypeScript with:
+
+```bash
+npx codemod@latest react/prop-types-typescript
+```
+
+</Note>
+
+#### Removed: Legacy Context using `contextTypes` and `getChildContext` {/*removed-removing-legacy-context*/}
+>>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
 
 レガシーコンテクストは [2018 年 10 月 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html) に非推奨化されました。
 
@@ -253,7 +335,15 @@ class MyComponent extends React.Component {
 
 <Note>
 
+<<<<<<< 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:
+
+```bash
+npx codemod@latest react/19/replace-string-ref
+```
+>>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
 
 </Note>
 
@@ -340,7 +430,21 @@ npm install react-shallow-renderer --save-dev
 
 代替手段については、[警告ページ](https://react.dev/warnings/react-dom-test-utils)をご覧ください。
 
+<<<<<<< HEAD
 #### 削除：`ReactDOM.render` {/*removed-reactdom-render*/}
+=======
+<Note>
+
+Codemod `ReactDOMTestUtils.act` to `React.act`:
+
+```bash
+npx codemod@latest react/19/replace-act-import
+```
+
+</Note>
+
+#### Removed: `ReactDOM.render` {/*removed-reactdom-render*/}
+>>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
 
 `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,7 +459,21 @@ const root = createRoot(document.getElementById('root'));
 root.render(<App />);
 ```
 
+<<<<<<< HEAD
 #### 削除：`ReactDOM.hydrate` {/*removed-reactdom-hydrate*/}
+=======
+<Note>
+
+Codemod `ReactDOM.render` to `ReactDOM.createRoot`:
+
+```bash
+npx codemod@latest react/19/replace-reactdom-render
+```
+
+</Note>
+
+#### Removed: `ReactDOM.hydrate` {/*removed-reactdom-hydrate*/}
+>>>>>>> c3bc5affa0e7452e306c785af11798d16b4f6dd4
 
 `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
@@ -1,14 +1,19 @@
 ---
-title: "React 19 Beta"
+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
 ---
 
 April 25, 2024 by [The React Team](/community/team)
 
 ---
 
+<<<<<<< HEAD
 <Note>
 
 このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。
@@ -22,6 +27,15 @@ npm で React 19 Beta が利用可能になりました！
 </Intro>
 
 [React 19 Beta アップグレードガイド](/blog/2024/04/25/react-19-upgrade-guide)では、アプリを React 19 Beta にアップグレードするためのステップバイステップガイドをお示ししました。この投稿では、React 19 の新機能と、それらをどのように採用するかについて概説します。
+=======
+<Intro>
+
+React 19 RC is now available on npm!
+
+</Intro>
+
+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 の新機能](#whats-new-in-react-19)
 - [React 19 の改善点](#improvements-in-react-19)
@@ -111,10 +125,17 @@ function UpdateName({}) {
 
 アクションはあなたの代わりに自動的にデータの送信を管理してくれます。
 
+<<<<<<< HEAD
 - **送信中状態**：アクションは送信中状態を提供します。これはリクエストと共に開始され、最終的な state の更新がコミットされると自動的にリセットされます。
 - **楽観的更新**：アクションは新しい [`useOptimistic`](#new-feature-optimistic-updates) フックをサポートしており、リクエスト送信中にユーザに対し即時のフィードバックを表示することができます。
 - **エラー処理**：アクションはエラー処理を提供するため、リクエストが失敗した場合にエラーバウンダリを表示し、楽観的更新を自動的に元の状態に復元できます。
 - **フォーム**：`<form>` 要素は、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**: `<form>` 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
 
 </Note>
 
@@ -510,7 +531,11 @@ 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*/}