diff --git a/next-env.d.ts b/next-env.d.ts index 52e831b434..3cd7048ed9 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index 09c061abf9..c341b0dfa0 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -80,7 +80,7 @@ function FooterLink({ />
- {type} + {type === 'Previous' ? 'Previous' : 'Next'} {title} diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index 4a3d3ad02f..a70717c9dc 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -19,6 +19,7 @@ export const IconArrowSmall = memo< const classes = cn(className, { 'rotate-180': displayDirection === 'left', 'rotate-180 rtl:rotate-0': displayDirection === 'start', + 'rtl:rotate-180': displayDirection === 'end', 'rotate-90': displayDirection === 'down', }); return ( diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx index 736db093c6..b4d8c0924c 100644 --- a/src/components/MDX/Challenges/Navigation.tsx +++ b/src/components/MDX/Challenges/Navigation.tsx @@ -108,7 +108,7 @@ export function Navigation({ onClick={handleScrollLeft} aria-label="Scroll left" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0', { 'text-primary dark:text-primary-dark': canScrollLeft, 'text-gray-30': !canScrollLeft, @@ -120,7 +120,7 @@ export function Navigation({ onClick={handleScrollRight} aria-label="Scroll right" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e', { 'text-primary dark:text-primary-dark': canScrollRight, 'text-gray-30': !canScrollRight, diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx new file mode 100644 index 0000000000..868f9fb660 --- /dev/null +++ b/src/components/MDX/Sandpack/ClearButton.tsx @@ -0,0 +1,22 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import {IconClose} from '../../Icon/IconClose'; +export interface ClearButtonProps { + onClear: () => void; +} + +export function ClearButton({onClear}: ClearButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index bf2c3186c3..d115868dd1 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -17,7 +17,8 @@ import { useSandpackNavigation, } from '@codesandbox/sandpack-react/unstyled'; import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; -import {ResetButton} from './ResetButton'; +import {ReloadButton} from './ReloadButton'; +import {ClearButton} from './ClearButton'; import {DownloadButton} from './DownloadButton'; import {IconChevron} from '../../Icon/IconChevron'; import {Listbox} from '@headlessui/react'; @@ -95,7 +96,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // Note: in a real useEvent, onContainerResize would be omitted. }, [isMultiFile, onContainerResize]); - const handleReset = () => { + const handleClear = () => { /** * resetAllFiles must come first, otherwise * the previous content will appear for a second @@ -103,13 +104,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { * * Plus, it should only prompt if there's any file changes */ - if ( - sandpack.editorState === 'dirty' && - confirm('Reset all your edits too?') - ) { + if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) { sandpack.resetAllFiles(); } + refresh(); + }; + const handleReload = () => { refresh(); }; @@ -188,7 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { className="px-3 flex items-center justify-end text-start" translate="yes"> - + + {activeFile.endsWith('.tsx') && ( void; +} + +export function ReloadButton({onReload}: ReloadButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx deleted file mode 100644 index 7d99ffea0d..0000000000 --- a/src/components/MDX/Sandpack/ResetButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {IconRestart} from '../../Icon/IconRestart'; -export interface ResetButtonProps { - onReset: () => void; -} - -export function ResetButton({onReset}: ResetButtonProps) { - return ( - - ); -} diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md index ecbbb87471..2ebbf3baeb 100644 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). ## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! +If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! To install: npm -{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`npm install --save-dev eslint-plugin-react-hooks@rc`} pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`pnpm add --save-dev eslint-plugin-react-hooks@rc`} yarn -{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`yarn add --dev eslint-plugin-react-hooks@rc`} ```js diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 9f5a00318e..52538d564d 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -2521,7 +2521,7 @@ export default function App() { const { url } = useRouter(); // Define a default animation of .slow-fade. - // See animations.css for the animation definiton. + // See animations.css for the animation definition. return ( {url === '/' ? :
} diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 581046a8c0..9354dc9c36 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -20,6 +20,11 @@ October 2-4, 2025. Alicante, Spain. [Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) +### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/} +October 04, 2025. Nairobi, Kenya + +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 479ae50d4b..78d48093aa 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -58,6 +58,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Manchester](https://www.meetup.com/Manchester-React-User-Group/) * [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/) * [React Advanced London](https://guild.host/react-advanced-london) +* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/) * [React Native London](https://guild.host/RNLDN) ## Finland {/*finland*/} @@ -137,6 +138,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Portugal {/*portugal*/} * [Lisbon](https://www.meetup.com/JavaScript-Lisbon/) +## Scotland (UK) {/*scotland-uk*/} +* [Edinburgh](https://www.meetup.com/react-edinburgh/) + ## Spain {/*spain*/} * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/) diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index 735e0e69a3..c8c3a79c32 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -122,7 +122,11 @@ React 生态系统中包含许多用于解决这些问题的工具。我们列 ### 提高应用程序性能 {/*improving-application-performance*/} +<<<<<<< HEAD 由于你选择的构建工具仅支持单页应用程序（SPA），你需要实现其他 [渲染模式](https://www.patterns.dev/vanilla/rendering-patterns) 如服务器端渲染（SSR）、静态站点生成（SSG）和/或 React 服务器组件（RSC）。即使你一开始不需要这些功能，将来也可能有一些路由会从 SSR、SSG 或 RSC 中受益。 +======= +Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC. +>>>>>>> ff11cd2818338befaa8ba42fce16bf1532e19af8 * **单页面应用程序 (SPA)** 加载单个 HTML 页面，并在用户与应用程序交互时动态更新页面。SPA 更容易入门，但初始加载时间可能较慢。SPA 是大多数构建工具的默认架构。 diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 937d5c9175..a5b8d09c63 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -213,7 +213,11 @@ li { 一种可能的解决方案是用一个 ref 引用其父元素，然后用 DOM 操作方法如 [`querySelectorAll`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll) 来寻找它的子节点。然而，这种方法很脆弱，如果 DOM 结构发生变化，可能会失效或报错。 +<<<<<<< HEAD 另一种解决方案是**将函数传递给 `ref` 属性**。这称为 [`ref` 回调](/reference/react-dom/components/common#ref-callback)。当需要设置 ref 时，React 将传入 DOM 节点来调用你的 ref 回调，并在需要清除它时传入 `null` 。这使你可以维护自己的数组或 [Map](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map)，并通过其索引或某种类型的 ID 访问任何 ref。 +======= +Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID. +>>>>>>> ff11cd2818338befaa8ba42fce16bf1532e19af8 此示例展示了如何使用此方法滚动到长列表中的任意节点： diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 22684cf3fa..037b5c096e 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -176,6 +176,7 @@ React Compiler 包含一条 ESLint 规则，可帮助识别无法优化的代码 npm install -D eslint-plugin-react-hooks@rc +<<<<<<< HEAD 然后在你的 ESLint 配置中启用编译器规则： ```js {3} @@ -186,6 +187,9 @@ module.exports = { }, }; ``` +======= +If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed. +>>>>>>> ff11cd2818338befaa8ba42fce16bf1532e19af8 ESLint 规则将会： - 识别对 [React 规则](/reference/rules) 的违反情况 diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 48b56d30b0..122424d5fa 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -154,7 +154,11 @@ Next.js 用户可以通过使用 [v15.3.1](https://github.com/vercel/next.js/rel ## 关于 useMemo、useCallback 和 React.memo 我应该怎么做？ {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} +<<<<<<< HEAD 如果你正在使用 React 编译器，可以移除 [`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback) 和 [`React.memo`](/reference/react/memo)。React 编译器能够比使用这些 Hook 更精确和细致地添加自动记忆化功能。如果你选择保留手动记忆化，React 编译器会分析它们，并判断你的手动记忆化是否与其自动推断出的记忆化一致。如果不一致，编译器将选择放弃优化该组件。 +======= +React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component. +>>>>>>> ff11cd2818338befaa8ba42fce16bf1532e19af8 这样做是出于谨慎考虑，因为手动记忆化常见的反模式是为了保证程序的正确性。这意味着你的应用依赖于对特定值进行记忆化才能正常运行。例如，为了防止无限循环，你可能会记忆某些值来阻止 `useEffect` 被触发。这违反了 React 的规则，但因为编译器自动移除手动记忆化可能会有潜在危险，所以会直接放弃优化。你应该手动移除自己的手动记忆化代码，并验证应用是否仍能按预期运行。 diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 8a60040358..c66d380a04 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -1419,10 +1419,36 @@ function SaveButton() { #### React 会为数据获取提供内置解决方案么？ {/*will-react-provide-any-built-in-solution-for-data-fetching*/} +<<<<<<< HEAD 我们仍然在规划细节，但是期望未来可以像这样写数据获取： ```js {1,4,6} import { use } from 'react'; // 还不可用！ +======= +Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`: + +```js {1,4,11} +import { use, Suspense } from "react"; + +function Message({ messagePromise }) { + const messageContent = use(messagePromise); + return

Here is the message: {messageContent}

; +} + +export function MessageContainer({ messagePromise }) { + return ( + ⌛Downloading message...

}> + + + ); +} +``` + +We're still working out the details, but we expect that in the future, you'll write data fetching like this: + +```js {1,4,6} +import { use } from 'react'; +>>>>>>> ff11cd2818338befaa8ba42fce16bf1532e19af8 function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index b24f0963e7..e80b2084ed 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -32,14 +32,20 @@ TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。Typ 使用下面命令安装最新版本的 React 类型定义： -npm install @types/react @types/react-dom +npm install --save-dev @types/react @types/react-dom 然后在 `tsconfig.json` 中设置以下编译器选项： +<<<<<<< HEAD 1. 必须在 [`lib`](https://www.typescriptlang.org/tsconfig/#lib) 中包含 `dom`（注意：如果没有指定 `lib` 选项，默认情况下会包含 `dom`）。 1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) 必须设置为一个有效的选项。对于大多数应用程序，`preserve` 应该足够了。 如果你正在发布一个库，请查阅 [`jsx` 文档](https://www.typescriptlang.org/tsconfig/#jsx) 以选择合适的值。 +======= +1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). +2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. + If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. +>>>>>>> ff11cd2818338befaa8ba42fce16bf1532e19af8 ## 在 React 组件中使用 TypeScript {/*typescript-with-react-components*/} diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 356637bcdc..b17b1a40b0 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -38,7 +38,7 @@ To create interactive controls for submitting information, render the [built-in `
` supports all [common element props.](/reference/react-dom/components/common#common-props) -[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `