diff --git a/README.md b/README.md index 959e0bd2a9..ecd588894a 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ This repo contains the source code and documentation powering [react.dev](https: ### Prerequisites 1. Git -1. Node: any 12.x version starting with v12.0.0 or greater +1. Node: any version starting with v16.8.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) 1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg index cb08b97254..26d46bd2fb 100644 Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ 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 fd160e943b..fbc4e378c7 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 @@ -113,7 +113,7 @@ This will run the following codemods from `react-codemod`: - [`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) +- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript) This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below. diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 81e97683be..010ef3a514 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -17,7 +17,11 @@ description: React 19 版现在可以在 npm 上使用了! 在这篇文章中， - **预热 suspend 树**：阅读 [改善 Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense) 来了解更多。 - **React DOM 静态 API**：阅读 [新的 React DOM 静态 API](#new-react-dom-static-apis) 来了解更多。 +<<<<<<< HEAD __本文的日期已更新，以反映稳定版的发布日期。__ +======= +_The date for this post has been updated to reflect the stable release date._ +>>>>>>> 151749494427e1af94329049f37df2bbc4ea0408 @@ -362,7 +366,11 @@ React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能 #### 如何构建对服务器组件的支持? {/*how-do-i-build-support-for-server-components*/} +<<<<<<< HEAD 虽然 React 19 中的 React 服务器组件是稳定的，并且在主版本之间不会发生破坏，但用于实现 React 服务器组件打包器或框架的底层 API 不遵循 semver，并可能在 React 19.x 的小版本之间发生破坏。 +======= +While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +>>>>>>> 151749494427e1af94329049f37df2bbc4ea0408 为了支持 React 服务器组件作为打包器或框架，我们建议固定到特定的 React 版本，或者使用 Canary 发行版。我们将继续与打包器和框架合作，以稳定用于实现 React 服务器组件的 API。 @@ -807,4 +815,8 @@ React 19 添加了对自定义元素的全面支持，并通过了 [Custom Eleme 请查看 [React 19 升级指南](/blog/2024/04/25/react-19-upgrade-guide) 以获取逐步指导和完整的破坏性和显著变化列表。 +<<<<<<< HEAD __注意：这篇文章最初发布于 2024 年 4 月 25 日，并已将内容更新至 2024 年 12 月 5 日发布的稳定版本。__ +======= +_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._ +>>>>>>> 151749494427e1af94329049f37df2bbc4ea0408 diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index aaa7612185..6b95c64c63 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,62 +10,73 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### React Universe Conf 2024 {/*react-universe-conf-2024*/} -September 5-6, 2024. Wrocław, Poland. +### React Day Berlin 2024 {/*react-day-berlin-2024*/} +December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) -[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) -### React Alicante 2024 {/*react-alicante-2024*/} -September 19-21, 2024. Alicante, Spain. +### App.js Conf 2025 {/*appjs-conf-2025*/} +May 28 - 30, 2025. In-person in Kraków, Poland + remote -[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) -### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} -October 04 - 05, 2024. Nairobi, Kenya +### React Summit 2025 {/*react-summit-2025*/} +June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) -[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) -### React India 2024 {/*react-india-2024*/} -October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day +## Past Conferences {/*past-conferences*/} -[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) +### React Africa 2024 {/*react-africa-2024*/} +November 29, 2024. In-person in Casablanca, Morocco (hybrid event) -### React Brussels 2024 {/*react-brussels-2024*/} -October 18, 2024. In-person in Brussels, Belgium (hybrid event) +[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) -[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) -### reactjsday 2024 {/*reactjsday-2024*/} -October 25, 2024. In-person in Verona, Italy + online (hybrid event) +[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) -[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) +### React Native London Conf 2024 {/*react-native-london-2024*/} +November 14 & 15, 2024. In-person in London, UK + +[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) ### React Advanced London 2024 {/*react-advanced-london-2024*/} October 25 & 28, 2024. In-person in London, UK + online (hybrid event) [Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) -### React Native London Conf 2024 {/*react-native-london-2024*/} -November 14 & 15, 2024. In-person in London, UK +### reactjsday 2024 {/*reactjsday-2024*/} +October 25, 2024. In-person in Verona, Italy + online (hybrid event) -[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) +[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) -### React Summit US 2024 {/*react-summit-us-2024*/} -November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) +### React Brussels 2024 {/*react-brussels-2024*/} +October 18, 2024. In-person in Brussels, Belgium (hybrid event) -[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) +[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) -### React Africa 2024 {/*react-africa-2024*/} -November 29, 2024. In-person in Casablanca, Morocco (hybrid event) +### React India 2024 {/*react-india-2024*/} +October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day -[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) +[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) -### React Day Berlin 2024 {/*react-day-berlin-2024*/} -December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) +### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} +October 04 - 05, 2024. Nairobi, Kenya -[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + +### React Alicante 2024 {/*react-alicante-2024*/} +September 19-21, 2024. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + +### React Universe Conf 2024 {/*react-universe-conf-2024*/} +September 5-6, 2024. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) -## Past Conferences {/*past-conferences*/} ### React Rally 2024 🐙 {/*react-rally-2024*/} August 12-13, 2024. Park City, UT, USA diff --git a/src/content/community/team.md b/src/content/community/team.md index 5e79f8caee..5a25223828 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -43,7 +43,7 @@ React 核心团队成员全职致力于核心组件 API 的开发，负责 React - Lauren's programming career peaked when she first discovered the `` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda. + Lauren's programming career peaked when she first discovered the `` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda. diff --git a/src/content/learn/index.md b/src/content/learn/index.md index db580b69e7..0f41e22ece 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -10,7 +10,11 @@ translators: +<<<<<<< HEAD 欢迎来到 React 文档！本章节将介绍你每天都会使用的 80% 的 React 概念。 +======= +Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis. +>>>>>>> 151749494427e1af94329049f37df2bbc4ea0408 diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index c046d9bcb4..2c2dc954a0 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -348,7 +348,11 @@ React Compiler 可以静态验证 React 的许多规则，并且在检测到错 ### 我如何知道我的组件已被优化？ {/*how-do-i-know-my-components-have-been-optimized*/} +<<<<<<< HEAD [React 开发工具](/learn/react-developer-tools)（v5.0 及以上版本）对 React Compiler 有内置支持，并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。 +======= +[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler. +>>>>>>> 151749494427e1af94329049f37df2bbc4ea0408 ### 编译后某些内容无法正常工作 {/*something-is-not-working-after-compilation*/} 如果你安装了 eslint-plugin-react-compiler ，编译器将在你的编辑器中显示任何违反 React 规则的情况。当它这样做时，意味着编译器跳过了对该组件或钩子的优化。这完全没问题，并且编译器可以恢复并继续优化你代码库中的其他组件。**你不必立即修复所有的违反 ESLint 规则的代码。** 你可以按照自己的节奏来处理它们，以增加被优化的组件和钩子的数量。 diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 047b65aa7e..b3c849e724 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -50,7 +50,7 @@ To create interactive controls for submitting information, render the [built-in ### Handle form submission on the client {/*handle-form-submission-on-the-client*/} -Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. +Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset. @@ -117,7 +117,7 @@ function AddToCart({productId}) { } ``` -When `
` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-function) is passed to the ``'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). +When `` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the ``'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). ### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/} To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `` and read the `pending` property returned. diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index 961e3d7de6..d5aaa8a03b 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -151,9 +151,13 @@ export default function SiteMapPage() { ### 控制样式表优先级 {/*controlling-stylesheet-precedence*/} +<<<<<<< HEAD 样式表可能会相互冲突，当发生冲突时，浏览器会选择文档中排在后面的样式表。React 允许使用 `precedence` 属性来控制样式表的顺序。在这个例子中，两个组件渲染样式表，具有较高优先级的组件在文档中排在较后位置，即使渲染它的组件出现在较早位置。 {/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/} +======= +Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the ``. +>>>>>>> 151749494427e1af94329049f37df2bbc4ea0408 @@ -165,24 +169,35 @@ export default function HomePage() { + ... ); } function FirstComponent() { - return ; + return ; } function SecondComponent() { - return ; + return ; +} + +function ThirdComponent() { + return ; } ``` +<<<<<<< HEAD ### 去除样式表的重复渲染 {/*deduplicated-stylesheet-rendering*/} +======= +Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". + +### Deduplicated stylesheet rendering {/*deduplicated-stylesheet-rendering*/} +>>>>>>> 151749494427e1af94329049f37df2bbc4ea0408 如果在多个组件渲染相同的样式表，React 将只在文档头部放置单个 ``。 diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md index bd0e3d0441..66602d25af 100644 --- a/src/content/reference/react-dom/components/style.md +++ b/src/content/reference/react-dom/components/style.md @@ -62,7 +62,15 @@ React 可以将 `