Merge pull request #746 from reactjs/sync-93177e6c

Sync with react.dev @ 93177e6

CONTRIBUTING.md

@@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
 - Use semicolons.
 - No space between function names and parens (`method() {}` not `method () {}`).
 - When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
+- Always capitalize React concepts such as Hooks, Effects, and Transitions.
 
 ### Highlighting
 

package.json

@@ -24,7 +24,7 @@
     "textlint-staged": "cd textlint && yarn --frozen-lockfile && yarn textlint-staged --"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.13.4",
+    "@codesandbox/sandpack-react": "2.13.5",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
@@ -99,7 +99,7 @@
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "engines": {
-    "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
+    "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
   },
   "nextBundleAnalysis": {
     "budget": null,

src/components/MDX/TeamMember.tsx

@@ -68,7 +68,7 @@ export function TeamMember({
                 <ExternalLink
                   aria-label="React on Twitter"
                   href={`https://twitter.com/${twitter}`}
-                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
                   <IconTwitter className="pe-1" />
                   {twitter}
                 </ExternalLink>
@@ -90,7 +90,7 @@ export function TeamMember({
                 <ExternalLink
                   aria-label="GitHub Profile"
                   href={`https://github.com/${github}`}
-                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
                   <IconGitHub className="pe-1" /> {github}
                 </ExternalLink>
               </div>
@@ -99,7 +99,7 @@ export function TeamMember({
               <ExternalLink
                 aria-label="Personal Site"
                 href={`https://${personal}`}
-                className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
                 <IconLink className="pe-1" /> {personal}
               </ExternalLink>
             )}

src/content/community/acknowledgements.md

@@ -16,6 +16,7 @@ title: 謝辞
 * [Andreas Svensson](https://github.com/syranide)
 * [Alex Krolick](https://github.com/alexkrolick)
 * [Alexey Pyltsyn](https://github.com/lex111)
+* [Andrey Lunyov](https://github.com/alunyov)
 * [Brandon Dail](https://github.com/aweary)
 * [Brian Vaughn](https://github.com/bvaughn)
 * [Caleb Meredith](https://github.com/calebmer)

src/content/community/team.md

@@ -18,10 +18,6 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Andrew は WordPress を使ったサイト作りからウェブ開発を始め、いつの間にか JavaScript にハマっていました。お気に入りの暇つぶしはカラオケです。日によってある時はディズニーの悪役に、またある時はディズニーのお姫様になっています。
 </TeamMember>
 
-<TeamMember name="Andrey Lunyov" permalink="andrey-lunyov" photo="/images/team/andrey-lunyov.jpg" github="alunyov" twitter="alunyov" threads="alunyov" title="Engineer at Meta">
-    Andrey はデザイナとしてキャリアをスタートした後、徐々にウェブ開発へと移行しました。Meta の React Data チームに参加した後は、Relay にインクリメンタル JavaScript コンパイラを追加する作業に取り組み、のちにそのコンパイラを Relay から削除する作業に取り組みました。仕事以外の時間では音楽を演奏したり、さまざまなスポーツをしたりしています。
-</TeamMember>
-
 <TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Independent Engineer">
     Dan は Microsoft PowerPoint の中に偶然 Visual Basic を発見したことからプログラミングを始めました。[Sebastian](#sebastian-markbåge) のツイートを長文のブログ投稿に翻訳することが真の使命であると感じています。Fortnite では、ゲームが終わるまで茂みの中に隠れて勝利することがあります。
 </TeamMember>
@@ -30,6 +26,10 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Eli のプログラミング経験は、ハッキングで中学校を停学処分になったことで始まりました。2017 年から React と React Native の開発に携わっています。お菓子を食べるのが好きで、特にアイスクリームとアップルパイがお気に入りです。Eli はよくパルクールや室内スカイダイビング、エアリアルシルクなど、風変わりな活動を試しています。
 </TeamMember>
 
+<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta">
+    Jack は AutoHotkey を人に紹介されてから、思いつく限りの作業を自動化するスクリプトを書いてきました。そこで限界を感じてウェブアプリの開発に頭から飛び込んだ後は、それ一筋です。最近では Instagram のウェブプラットフォームに携わったのち、React チームにやってきました。好きなプログラミング言語は JSX です。
+</TeamMember>
+
 <TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta">
     Jason のお気に入りは、職場に大量の Amazon のパッケージを届けてもらい、それを使って要塞を築くことです。チームとの間に（物理的な意味で）よく壁を作っており、for-of ループの動作も理解していないにも関わらず、我々は彼が仕事に持ち込むユニークさを評価しています。
 </TeamMember>
@@ -74,7 +74,7 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Sebastian の専攻は心理学でした。普段の彼はもの静かです。彼が何かを言ったとしても、数か月後まで他の人には理解できないことがよくあります。彼の姓の発音は本来 "mark-boa-geh" ですが、実用性を優先して "mark-beige" に落ち着きました。彼の React へのアプローチも実用主義的です。
 </TeamMember>
 
-<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Independent Engineer">
+<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel">
     Sebastian は、授業中に遊んでいたブラウザゲームをより楽しくするためにプログラミングを学びました。それはいずれ、オープンソースコードに可能な限りの貢献をすることにつながりました。コーディング以外の時間では、彼は React コミュニティにいるほかの Sebastian や Zilberman と混同されないために頑張っています。
 </TeamMember>
 

src/content/learn/editor-setup.md

@@ -40,7 +40,7 @@ title: エディタのセットアップ
 
 ### コードフォーマット {/*formatting*/}
 
-他の人とコードを共有するにあたって何よりも避けたいのは、[タブ vs スペース](https://www.google.com/search?q=tabs+vs+spaces) についての議論に巻き込まれてしまうことです！ 幸いなことに、[Prettier](https://prettier.io/) は、あらかじめ設定できるルールに従ってコードを再フォーマットすることで、あなたのコードを綺麗にしてくれます。Prettier を実行すれば、タブはスペースに変換され、インデント、引用符なども設定に従って変更されます。理想的なセットアップでは、Prettier はファイルを保存するたびに実行され、瞬時にれらの変更を適用してくれます。
+他の人とコードを共有するにあたって何よりも避けたいのは、[タブ vs スペース](https://www.google.com/search?q=tabs+vs+spaces)についての議論に巻き込まれてしまうことです！ 幸いなことに、[Prettier](https://prettier.io/) は、あらかじめ設定できるルールに従ってコードを再フォーマットすることで、あなたのコードを綺麗にしてくれます。Prettier を実行すれば、タブはスペースに変換され、インデント、引用符なども設定に従って変更されます。理想的なセットアップでは、Prettier はファイルを保存するたびに実行され、瞬時にこれらの変更を適用してくれます。
 
 [VSCode 用の Prettier 拡張機能](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) を VS Code にインストールするには、次の手順に従ってください。
 

src/content/learn/rendering-lists.md

@@ -113,9 +113,11 @@ const people = [{
   name: 'Mohammad Abdus Salam',
   profession: 'physicist',
 }, {
+  id: 3,
   name: 'Percy Lavon Julian',
   profession: 'chemist',  
 }, {
+  id: 4,
   name: 'Subrahmanyan Chandrasekhar',
   profession: 'astrophysicist',
 }];

src/content/learn/typescript.md

@@ -456,7 +456,7 @@ interface MyComponentProps {
 
  - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) は TypeScript の公式ドキュメントであり、ほとんどの主要な言語機能をカバーしています。
 
- - [TypeScript のリリースノート](https://devblogs.microsoft.com/typescript/)では、それぞれの新機能が詳細に解説されています。
+ - [TypeScript のリリースノート](https://devblogs.microsoft.com/typescript/)では新機能が詳細に解説されています。
 
  - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) はコミュニティによってメンテナンスされている、React で TypeScript を使用するためのチートシートです。多くの有用なエッジケースをカバーしており、このドキュメントよりも広範な解説が得られます。
 

src/content/reference/react-dom/components/link.md

@@ -79,7 +79,7 @@ Props that are **not recommended** for use with React:
 
 #### Special rendering behavior {/*special-rendering-behavior*/}
 
-React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself. 
+React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself.
 
 There are a few exceptions to this:
 
@@ -91,7 +91,7 @@ There are a few exceptions to this:
 
 In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways:
 
-* The component that renders `<link>` will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading.
+* The component that renders `<link>` will [suspend](/reference/react/Suspense) while the stylesheet is loading.
 * If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same `href` prop.
 
 There are two exception to this special behavior:
@@ -133,7 +133,7 @@ export default function BlogPage() {
 
 ### Linking to a stylesheet {/*linking-to-a-stylesheet*/}
 
-If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence.
+If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence.
 
 <Note>
 When you want to use a stylesheet, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the stylesheet earlier than if you just render a `<link>` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
@@ -217,7 +217,7 @@ function Component() {
 
 ### Annotating specific items within the document with links {/*annotating-specific-items-within-the-document-with-links*/}
 
-You can use the `<link>` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component. 
+You can use the `<link>` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component.
 
 ```js
 <section itemScope>

src/content/reference/react-dom/components/style.md

@@ -52,7 +52,7 @@ Props that are **not recommended** for use with React:
 
 #### Special rendering behavior {/*special-rendering-behavior*/}
 
-React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading.
+React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense) while the stylesheet is loading.
 
 To opt into this behavior, provide the `href` and `precedence` props. React will de-duplicate styles if they have the same `href`. The precedence prop tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other.
 

src/content/reference/react-dom/flushSync.md

@@ -51,10 +51,10 @@ flushSync(() => {
 
 #### 注意点 {/*caveats*/}
 
-* `flushSync` はパフォーマンスを大幅に低下させる可能性があります。控え目に使用してください。
-* `flushSync` は保留中のサスペンスバウンダリを強制的に `fallback` 状態にする可能性があります。
-* `flushSync` はリターンの前に、保留中のエフェクトを実行し、そこに含まれた任意の更新も同期的に適用する場合があります。
-* `flushSync` は、コールバック内の更新をフラッシュするために必要な場合、コールバック外の更新もフラッシュすることがあります。例えば、クリックによる保留中の更新作業がある場合、React はコールバック内の更新をフラッシュする前に先にそれらをフラッシュするかもしれません。
+* `flushSync` can significantly hurt performance. Use sparingly.
+* `flushSync` may force pending Suspense boundaries to show their `fallback` state.
+* `flushSync` may run pending Effects and synchronously apply any updates they contain before returning.
+* `flushSync` may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
 
 ---
 

src/content/reference/react-dom/preconnect.md

@@ -55,7 +55,7 @@ The `preconnect` function provides the browser with a hint that it should open a
 #### Caveats {/*caveats*/}
 
 * Multiple calls to `preconnect` with the same server have the same effect as a single call.
-* In the browser, you can call `preconnect` in any situation: while rendering a component, in an effect, in an event handler, and so on.
+* In the browser, you can call `preconnect` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
 * In server-side rendering or when rendering Server Components, `preconnect` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
 * If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away.
 * There is no benefit to preconnecting to the same server the webpage itself is hosted from because it's already been connected to by the time the hint would be given.

src/content/reference/react-dom/prefetchDNS.md

@@ -54,7 +54,7 @@ The prefetchDNS function provides the browser with a hint that it should look up
 #### Caveats {/*caveats*/}
 
 * Multiple calls to `prefetchDNS` with the same server have the same effect as a single call.
-* In the browser, you can call `prefetchDNS` in any situation: while rendering a component, in an effect, in an event handler, and so on.
+* In the browser, you can call `prefetchDNS` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
 * In server-side rendering or when rendering Server Components, `prefetchDNS` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
 * If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away.
 * There is no benefit to prefetching the same server the webpage itself is hosted from because it's already been looked up by the time the hint would be given.

src/content/reference/react-dom/preinit.md

@@ -67,7 +67,7 @@ The `preinit` function provides the browser with a hint that it should start dow
 #### Caveats {/*caveats*/}
 
 * Multiple calls to `preinit` with the same `href` have the same effect as a single call.
-* In the browser, you can call `preinit` in any situation: while rendering a component, in an effect, in an event handler, and so on.
+* In the browser, you can call `preinit` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
 * In server-side rendering or when rendering Server Components, `preinit` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
 
 ---

src/content/reference/react-dom/preinitModule.md

@@ -65,7 +65,7 @@ The `preinitModule` function provides the browser with a hint that it should sta
 #### Caveats {/*caveats*/}
 
 * Multiple calls to `preinitModule` with the same `href` have the same effect as a single call.
-* In the browser, you can call `preinitModule` in any situation: while rendering a component, in an effect, in an event handler, and so on.
+* In the browser, you can call `preinitModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
 * In server-side rendering or when rendering Server Components, `preinitModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
 
 ---