Sync with react.dev @ c3bc5aff

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,

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}

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'

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) => (

src/content/blog/2024/04/25/react-19-upgrade-guide.md

@@ -1,27 +1,19 @@
 ---
-title: "React 19 Beta アップグレードガイド"
+title: "React 19 RC アップグレードガイド"
 author: Ricky Hanlon
 date: 2024/04/25
-description: React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、ライブラリを React 19 Beta にアップグレードする手順をご案内します。
+description: React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、アプリやライブラリを React 19 にアップグレードする手順をご案内します。
 ---
 
 April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
 
 ---
 
-<Note>
-
-このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。
-
-</Note>
-
 
 <Intro>
 
 React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。
 
-アップグレードを容易にするために、本日 React 18.3 も公開します。
-
 </Intro>
 
 <Note>
@@ -36,16 +28,17 @@ React 19 にアップグレードする前に、問題点を見つけるため
 
 </Note>
 
-この投稿では、ライブラリを 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)をご覧ください。
+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*/}
@@ -77,26 +70,57 @@ 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
 ```
 
-TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り `@types/react` と `@types/react-dom` から型をインストールできます。ベータ期間中は `package.json` で強制的に別のパッケージを指定することで、新しい型を利用できます。
+TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り `@types/react` と `@types/react-dom` から型をインストールできます。安定版になるまでは `package.json` で強制的に別のパッケージを指定することで、新しい型を利用できます。
 
 ```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)を参照してください。
 
+## codemod {/*codemods*/}
+
+アップグレードを支援するため、[codemod.com](https://codemod.com) のチームと協力し、React 19 の新しい API やパターンにコードを自動的に更新するための codemod を公開しました。
+
+すべての codemod は [`react-codemod` リポジトリ](https://github.com/reactjs/react-codemod)で利用可能であり、Codemod チームも codemod の保守に参加しています。これらの codemod を実行するには、`react-codemod` コマンドではなく `codemod` コマンドの使用をお勧めします。こちらのコマンドの方が高速に実行され、複雑なコードの移行を処理でき、TypeScript のサポートもより良好です。
+
+
+<Note>
+
+#### React 19 関連の codemod をすべて実行 {/*run-all-react-19-codemods*/}
+
+このガイドにある codemode をすべて実行するには React 19 の `codemod` レシピを以下のように実行します。
+
+```bash
+npx codemod@latest react/19/migration-recipe
+```
+
+これにより以下の `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)
+
+これには TypeScript 関連の変更は含まれていません。以下の [TypeScript 関連の変更](#typescript-changes)を参照してください。
+
+</Note>
+
+変更のうち codemod が利用できるものは以下で紹介されています。
+
+利用可能なすべての codemod の一覧については、[`react-codemod` リポジトリ](https://github.com/reactjs/react-codemod)を参照してください。
 
 ## 破壊的変更 {/*breaking-changes*/}
 
@@ -158,6 +182,16 @@ function Heading({text = 'Hello, world!'}: Props) {
 }
 ```
 
+<Note>
+
+codemod で以下のように `propTypes` を TypeScript に変換できます。
+
+```bash
+npx codemod@latest react/prop-types-typescript
+```
+
+</Note>
+
 #### 廃止：`contextTypes` と `getChildContext` を使用したレガシーコンテクスト {/*removed-removing-legacy-context*/}
 
 レガシーコンテクストは [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 {
 
 <Note>
 
-移行を支援するために、文字列 ref を `ref` コールバックに自動的に置き換える [react-codemod](https://github.com/reactjs/react-codemod/#string-refs) を公開する予定です。最新情報や試用については[この PR](https://github.com/reactjs/react-codemod/pull/309) をフォローしてください。
+codemod で以下のように文字列形式の ref をコールバック形式の `ref` に変換できます。
+
+```bash
+npx codemod@latest react/19/replace-string-ref
+```
 
 </Note>
 
@@ -340,6 +378,16 @@ npm install react-shallow-renderer --save-dev
 
 代替手段については、[警告ページ](https://react.dev/warnings/react-dom-test-utils)をご覧ください。
 
+<Note>
+
+codemod で以下のように `ReactDOMTestUtils.act` を `React.act` に変換できます。
+
+```bash
+npx codemod@latest react/19/replace-act-import
+```
+
+</Note>
+
 #### 削除：`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) を使用するよう移行する必要があります。
@@ -355,6 +403,16 @@ const root = createRoot(document.getElementById('root'));
 root.render(<App />);
 ```
 
+<Note>
+
+codemod で以下のように `ReactDOM.render` を `ReactDOM.createRoot` に変換できます。
+
+```bash
+npx codemod@latest react/19/replace-reactdom-render
+```
+
+</Note>
+
 #### 削除：`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) を使用するよう移行する必要があります。

src/content/blog/2024/04/25/react-19.md

@@ -1,27 +1,21 @@
 ---
-title: "React 19 Beta"
+title: "React 19 RC"
 author: The React Team
 date: 2024/04/25
-description: React 19 Beta が npm で利用可能になりました！ この投稿では React 19 の新機能、およびそれらをどのように採用するかについて概説します。
+description: React 19 RC が npm で利用可能になりました！ この投稿では React 19 の新機能、およびそれらをどのように採用するかについて概説します。
 ---
 
 April 25, 2024 by [The React Team](/community/team)
 
 ---
 
-<Note>
-
-このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。
-
-</Note>
-
 <Intro>
 
 npm で React 19 Beta が利用可能になりました！
 
 </Intro>
 
-[React 19 Beta アップグレードガイド](/blog/2024/04/25/react-19-upgrade-guide)では、アプリを React 19 Beta にアップグレードするためのステップバイステップガイドをお示ししました。この投稿では、React 19 の新機能と、それらをどのように採用するかについて概説します。
+[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)
@@ -112,7 +106,7 @@ function UpdateName({}) {
 アクションはあなたの代わりに自動的にデータの送信を管理してくれます。
 
 - **送信中状態**：アクションは送信中状態を提供します。これはリクエストと共に開始され、最終的な state の更新がコミットされると自動的にリセットされます。
-- **楽観的更新**：アクションは新しい [`useOptimistic`](#new-feature-optimistic-updates) フックをサポートしており、リクエスト送信中にユーザに対し即時のフィードバックを表示することができます。
+- **楽観的更新**：アクションは新しい [`useOptimistic`](#new-hook-optimistic-updates) フックをサポートしており、リクエスト送信中にユーザに対し即時のフィードバックを表示することができます。
 - **エラー処理**：アクションはエラー処理を提供するため、リクエストが失敗した場合にエラーバウンダリを表示し、楽観的更新を自動的に元の状態に復元できます。
 - **フォーム**：`<form>` 要素は、props である `action` および `formAction` に関数を渡すことをサポートするようになりました。`action` に関数を渡すことでデフォルトでアクションとして扱われ、送信後にフォームを自動的にリセットします。
 
@@ -512,7 +506,6 @@ ref クリーンアップ関数の導入により、`ref` コールバックか
 
 このパターンは [`no-implicit-ref-callback-return`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return) の codemod を用いて修正できます。
 
-
 ### `useDeferredValue` の初期値 {/*use-deferred-value-initial-value*/}
 
 `useDeferredValue` に `initialValue` オプションを追加しました。