From b440d6698f6e21d56a78b10f625bd23191183588 Mon Sep 17 00:00:00 2001
From: Oke Kehinde <55279370+okeken@users.noreply.github.com>
Date: Mon, 10 Nov 2025 19:22:50 +0000
Subject: [PATCH 1/6] fix(links): update internal links (#8136)
---
.github/ISSUE_TEMPLATE/3-framework.yml | 4 ++--
src/components/Layout/HomeContent.js | 2 +-
.../react-labs-what-we-have-been-working-on-march-2023.md | 4 ++--
src/content/blog/2024/12/05/react-19.md | 2 +-
src/content/learn/add-react-to-an-existing-project.md | 4 ++--
src/content/learn/synchronizing-with-effects.md | 2 +-
src/content/learn/typescript.md | 2 +-
src/content/learn/you-might-not-need-an-effect.md | 4 ++--
src/content/learn/your-first-component.md | 2 +-
src/content/reference/react-dom/client/createRoot.md | 2 +-
src/content/reference/react-dom/client/index.md | 2 +-
src/content/reference/react-dom/index.md | 2 +-
src/content/reference/react-dom/preinit.md | 2 +-
src/content/reference/react-dom/preinitModule.md | 2 +-
src/content/reference/react-dom/preload.md | 2 +-
src/content/reference/react-dom/preloadModule.md | 2 +-
src/content/reference/react-dom/server/index.md | 2 +-
src/content/reference/react-dom/static/index.md | 2 +-
src/content/reference/react/useEffect.md | 6 +++---
src/content/reference/rsc/directives.md | 2 +-
src/content/reference/rsc/use-client.md | 2 +-
21 files changed, 27 insertions(+), 27 deletions(-)
diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml
index a47295e1e8..87f03a660b 100644
--- a/.github/ISSUE_TEMPLATE/3-framework.yml
+++ b/.github/ISSUE_TEMPLATE/3-framework.yml
@@ -8,11 +8,11 @@ body:
value: |
## Apply to be included as a recommended React framework
- _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._
+ _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/creating-a-react-app). If you are not a framework author, please contact the authors before submitting._
Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.
- While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
+ While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
To be included, frameworks must meet the following criteria:
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 9cc26bdaa7..f9b785db42 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -270,7 +270,7 @@ export function HomeContent() {
+ href="/learn/creating-a-react-app">
Get started with a framework
diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
index 1bc78149d3..df1fd085dd 100644
--- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
+++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -31,7 +31,7 @@ The biggest change is that we introduced [`async` / `await`](https://github.com/
Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.
-React Server Components has shipped in [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
+React Server Components has shipped in [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
We generally recommend using an existing framework, but if you need to build your own custom framework, it is possible. Building your own RSC-compatible framework is not as easy as we'd like it to be, mainly due to the deep bundler integration needed. The current generation of bundlers are great for use on the client, but they weren't designed with first-class support for splitting a single module graph between the server and the client. This is why we're now partnering directly with bundler developers to get the primitives for RSC built-in.
@@ -92,7 +92,7 @@ Since our last update, we've tested an experimental version of prerendering inte
## Transition Tracing {/*transition-tracing*/}
-The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router).
+The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router).
* * *
In addition to this update, our team has made recent guest appearances on community podcasts and livestreams to speak more on our work and answer questions.
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 65bf42757a..4e9aad8e82 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -355,7 +355,7 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static).
Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
-React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
+React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index 5d3d44005a..f98bece42d 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -20,7 +20,7 @@ Let's say you have an existing web app at `example.com` built with another serve
Here's how we recommend to set it up:
-1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
+1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app).
2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
@@ -149,7 +149,7 @@ root.render();
Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `
diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md
index a004220239..b612d7ba63 100644
--- a/src/content/reference/react-dom/client/index.md
+++ b/src/content/reference/react-dom/client/index.md
@@ -4,7 +4,7 @@ title: Client React DOM APIs
-The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index b79b16db68..d01bd65620 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -21,7 +21,7 @@ These APIs can be imported from your components. They are rarely used:
These APIs can be used to make apps faster by pre-loading resources such as scripts, stylesheets, and fonts as soon as you know you need them, for example before navigating to another page where the resources will be used.
-[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call these APIs yourself. Consult your framework's documentation for details.
+[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call these APIs yourself. Consult your framework's documentation for details.
* [`prefetchDNS`](/reference/react-dom/prefetchDNS) lets you prefetch the IP address of a DNS domain name that you expect to connect to.
* [`preconnect`](/reference/react-dom/preconnect) lets you connect to a server you expect to request resources from, even if you don't know what resources you'll need yet.
diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md
index 117fccac86..5dcaaf9338 100644
--- a/src/content/reference/react-dom/preinit.md
+++ b/src/content/reference/react-dom/preinit.md
@@ -4,7 +4,7 @@ title: preinit
-[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md
index 97bb4dbc72..93a4a730f9 100644
--- a/src/content/reference/react-dom/preinitModule.md
+++ b/src/content/reference/react-dom/preinitModule.md
@@ -4,7 +4,7 @@ title: preinitModule
-[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md
index 5dcba10f77..e9d00fc608 100644
--- a/src/content/reference/react-dom/preload.md
+++ b/src/content/reference/react-dom/preload.md
@@ -4,7 +4,7 @@ title: preload
-[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md
index ebc2fa6d05..944d438fc8 100644
--- a/src/content/reference/react-dom/preloadModule.md
+++ b/src/content/reference/react-dom/preloadModule.md
@@ -4,7 +4,7 @@ title: preloadModule
-[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md
index 943b610f2c..1856acd715 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,7 +4,7 @@ title: Server React DOM APIs
-The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
index cec33be44b..31ebc385b2 100644
--- a/src/content/reference/react-dom/static/index.md
+++ b/src/content/reference/react-dom/static/index.md
@@ -4,7 +4,7 @@ title: Static React DOM APIs
-The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index f67f56edaf..da310c7625 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -896,7 +896,7 @@ In this example, a cleanup function is not needed because the `MapWidget` class
### Fetching data with Effects {/*fetching-data-with-effects*/}
-You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/start-a-new-react-project#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually.
+You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/creating-a-react-app#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually.
If you want to fetch data from an Effect manually, your code might look like this:
@@ -1049,7 +1049,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww
This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
-- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
You can continue fetching data directly in Effects if neither of these approaches suit you.
@@ -1728,7 +1728,7 @@ function Page({ url, shoppingCart }) {
### Displaying different content on the server and the client {/*displaying-different-content-on-the-server-and-the-client*/}
-If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/start-a-new-react-project#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
+If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/creating-a-react-app#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
In rare cases, you might need to display different content on the client. For example, if your app reads some data from [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), it can't possibly do that on the server. Here is how you could implement this:
diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md
index fe614fb27e..af04d5b415 100644
--- a/src/content/reference/rsc/directives.md
+++ b/src/content/reference/rsc/directives.md
@@ -10,7 +10,7 @@ Directives are for use in [React Server Components](/reference/rsc/server-compon
-Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
+Directives provide instructions to [bundlers compatible with React Server Components](/learn/creating-a-react-app#full-stack-frameworks).
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md
index 5a0a7d96b4..4c6051977e 100644
--- a/src/content/reference/rsc/use-client.md
+++ b/src/content/reference/rsc/use-client.md
@@ -41,7 +41,7 @@ export default function RichTextEditor({ timestamp, text }) {
}
```
-When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code.
+When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/creating-a-react-app#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code.
As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that a single module may be evaluated on the server when imported from server code and on the client when imported from client code.
From 27576f10bdfd57fa30977818b641c7b6c9d032ec Mon Sep 17 00:00:00 2001
From: Uladzislau Hramyka
Date: Fri, 14 Nov 2025 17:22:13 +0300
Subject: [PATCH 2/6] fix(useTransition): correct anchors pointing to
non-blocking updates section (#8143)
---
src/content/reference/react/useTransition.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 923b6c0c9a..426df1f7b2 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -95,7 +95,7 @@ function SubmitButton({ submitAction }) {
#### Parameters {/*starttransition-parameters*/}
-* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls that are awaited in the `action` will be included in the Transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators](#preventing-unwanted-loading-indicators).
+* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls that are awaited in the `action` will be included in the Transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#perform-non-blocking-updates-with-actions) and [will not display unwanted loading indicators](#preventing-unwanted-loading-indicators).
#### Returns {/*starttransition-returns*/}
@@ -1246,7 +1246,7 @@ function Router() {
This is recommended for three reasons:
-- [Transitions are interruptible,](#marking-a-state-update-as-a-non-blocking-transition) which lets the user click away without waiting for the re-render to complete.
+- [Transitions are interruptible,](#perform-non-blocking-updates-with-actions) which lets the user click away without waiting for the re-render to complete.
- [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation.
- [Transitions wait for all pending actions](#perform-non-blocking-updates-with-actions) which lets the user wait for side effects to complete before the new page is shown.
From 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 Mon Sep 17 00:00:00 2001
From: Soichiro Miki
Date: Sat, 15 Nov 2025 12:47:29 +0900
Subject: [PATCH 3/6] =?UTF-8?q?fix:=20Stop=20SmartyPants=20from=20altering?=
=?UTF-8?q?=20TerminalBlock=20commands=20(like=20`--save-dev`=20to=20`?=
=?UTF-8?q?=E2=80=94save-dev`)=20(#8146)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Skip smartypants on TerminalBlock
* Improve TerminalBlock HTML tags
* Remove unnecessary TerminalBlock escapes from docs
* Bump DISK_CACHE_BREAKER
---
plugins/remark-smartypants.js | 22 +++++++++++++++++--
src/components/MDX/TerminalBlock.tsx | 10 +++++----
.../blog/2025/10/07/react-compiler-1.md | 18 +++++++--------
.../learn/build-a-react-app-from-scratch.md | 6 ++---
.../learn/react-compiler/installation.md | 2 +-
src/utils/compileMDX.ts | 2 +-
6 files changed, 40 insertions(+), 20 deletions(-)
diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js
index f56f14b612..c819624ba2 100644
--- a/plugins/remark-smartypants.js
+++ b/plugins/remark-smartypants.js
@@ -14,12 +14,24 @@ const visit = require('unist-util-visit');
const retext = require('retext');
const smartypants = require('retext-smartypants');
-function check(parent) {
+function check(node, parent) {
+ if (node.data?.skipSmartyPants) return false;
if (parent.tagName === 'script') return false;
if (parent.tagName === 'style') return false;
return true;
}
+function markSkip(node) {
+ if (!node) return;
+ node.data ??= {};
+ node.data.skipSmartyPants = true;
+ if (Array.isArray(node.children)) {
+ for (const child of node.children) {
+ markSkip(child);
+ }
+ }
+}
+
module.exports = function (options) {
const processor = retext().use(smartypants, {
...options,
@@ -43,8 +55,14 @@ module.exports = function (options) {
let startIndex = 0;
const textOrInlineCodeNodes = [];
+ visit(tree, 'mdxJsxFlowElement', (node) => {
+ if (['TerminalBlock'].includes(node.name)) {
+ markSkip(node); // Mark all children to skip smarty pants
+ }
+ });
+
visit(tree, ['text', 'inlineCode'], (node, _, parent) => {
- if (check(parent)) {
+ if (check(node, parent)) {
if (node.type === 'text') allText += node.value;
// for the case when inlineCode contains just one part of quote: `foo'bar`
else allText += 'A'.repeat(node.value.length);
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index bdcd8e4660..0fd0160d66 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -79,13 +79,15 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
-
-
- {message}
-
+
+
+ {message}
+
+
);
}
diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md
index 5474c50d3f..080f3586ea 100644
--- a/src/content/blog/2025/10/07/react-compiler-1.md
+++ b/src/content/blog/2025/10/07/react-compiler-1.md
@@ -69,17 +69,17 @@ To install the compiler:
npm
-{`npm install --save-dev --save-exact babel-plugin-react-compiler@latest`}
+npm install --save-dev --save-exact babel-plugin-react-compiler@latest
pnpm
-{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`}
+pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest
yarn
-{`yarn add --dev --exact babel-plugin-react-compiler@latest`}
+yarn add --dev --exact babel-plugin-react-compiler@latest
As part of the stable release, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Compiler now supports optional chains and array indices as dependencies. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code.
@@ -101,17 +101,17 @@ To install:
npm
-{`npm install --save-dev eslint-plugin-react-hooks@latest`}
+npm install --save-dev eslint-plugin-react-hooks@latest
pnpm
-{`pnpm add --save-dev eslint-plugin-react-hooks@latest`}
+pnpm add --save-dev eslint-plugin-react-hooks@latest
yarn
-{`yarn add --dev eslint-plugin-react-hooks@latest`}
+yarn add --dev eslint-plugin-react-hooks@latest
```js {6}
@@ -153,19 +153,19 @@ We have partnered with the Expo, Vite, and Next.js teams to add the compiler to
[Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) and up has the compiler enabled by default, so new apps will automatically be able to take advantage of the compiler from the start.
-{`npx create-expo-app@latest`}
+npx create-expo-app@latest
[Vite](https://vite.dev/guide/) and [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) users can choose the compiler enabled templates in `create-vite` and `create-next-app`.
-{`npm create vite@latest`}
+npm create vite@latest
-{`npx create-next-app@latest`}
+npx create-next-app@latest
## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/}
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 c74fa9afd1..8a2142cf91 100644
--- a/src/content/learn/build-a-react-app-from-scratch.md
+++ b/src/content/learn/build-a-react-app-from-scratch.md
@@ -34,7 +34,7 @@ The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. T
[Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
-{`npm create vite@latest my-app -- --template react-ts`}
+npm create vite@latest my-app -- --template react-ts
Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started.
@@ -46,7 +46,7 @@ Vite is already being used as a build tool in one of our [recommended frameworks
[Parcel](https://parceljs.org/) combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production applications.
-{`npm install --save-dev parcel`}
+npm install --save-dev parcel
Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See [Parcel's React recipe](https://parceljs.org/recipes/react/#getting-started) to get started.
@@ -56,7 +56,7 @@ Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box.
[Rsbuild](https://rsbuild.dev/) is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use.
-{`npx create-rsbuild --template react`}
+npx create-rsbuild --template react
Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See [Rsbuild's React guide](https://rsbuild.dev/guide/framework/react) to get started.
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index 92cf0b74e5..6cce34c6b6 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -114,7 +114,7 @@ Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/nex
Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
-{`npm install vite-plugin-babel`}
+npm install vite-plugin-babel
```js {3-4,16}
diff --git a/src/utils/compileMDX.ts b/src/utils/compileMDX.ts
index 807b50da59..c312f03fe9 100644
--- a/src/utils/compileMDX.ts
+++ b/src/utils/compileMDX.ts
@@ -10,7 +10,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 10;
+const DISK_CACHE_BREAKER = 11;
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export default async function compileMDX(
From 68fbf29b87321fa91da8001604e14e3e6a3736a0 Mon Sep 17 00:00:00 2001
From: Xleine
Date: Sun, 16 Nov 2025 19:55:20 +0800
Subject: [PATCH 4/6] fix conflict
---
src/components/Layout/HomeContent.js | 7 +------
...labs-what-we-have-been-working-on-march-2023.md | 12 ++----------
src/content/blog/2024/12/05/react-19.md | 6 +-----
.../learn/add-react-to-an-existing-project.md | 14 ++------------
src/content/learn/synchronizing-with-effects.md | 7 +------
src/content/learn/typescript.md | 6 +-----
src/content/learn/you-might-not-need-an-effect.md | 6 +-----
src/content/learn/your-first-component.md | 6 +-----
.../reference/react-dom/client/createRoot.md | 6 +-----
src/content/reference/react-dom/client/index.md | 6 +-----
src/content/reference/react-dom/index.md | 6 +-----
src/content/reference/react-dom/preinit.md | 6 +-----
src/content/reference/react-dom/preinitModule.md | 6 +-----
src/content/reference/react-dom/preload.md | 6 +-----
src/content/reference/react-dom/preloadModule.md | 6 +-----
src/content/reference/react-dom/server/index.md | 6 +-----
src/content/reference/react-dom/static/index.md | 6 +-----
src/content/reference/react/useEffect.md | 6 +-----
src/content/reference/react/useTransition.md | 6 +-----
src/content/reference/rsc/directives.md | 6 +-----
src/content/reference/rsc/use-client.md | 6 +-----
21 files changed, 23 insertions(+), 119 deletions(-)
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index aa31986137..935507130d 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -265,13 +265,8 @@ export function HomeContent() {
- 使用框架开始一个新项目
-=======
href="/learn/creating-a-react-app">
- Get started with a framework
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+ 使用框架开始一个新项目
diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
index 999ea63133..27f32aaaeb 100644
--- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
+++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -31,11 +31,7 @@ RSC 将面向服务器的多页面应用程序的简单“请求/响应”思维
现在我们已经相当好地解决了数据提取的问题,我们正在探索另一个方向:从客户端向服务器发送数据,以便可以执行数据库变更和实现表单。我们通过在服务器/客户端边界传递 Server Action 函数来实现这一点。客户端可以调用该函数,提供无缝 RPC。而在 JavaScript 加载之前,Server Action 还可以提供逐步增强的表单。
-<<<<<<< HEAD
-RSC 已经在 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router) 中发布,展示了一个真正深度集成的路由器,它使用了 RSC 并将其作为 primitive。但这不是构建 RSC 兼容的路由器和框架的唯一方法。RSC 规范和实现提供了特定功能的明确分离,旨在成为适用于兼容 React 框架的组件规范。
-=======
-React Server Components has shipped in [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+RSC 已经在 [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router) 中发布,展示了一个真正深度集成的路由器,它使用了 RSC 并将其作为 primitive。但这不是构建 RSC 兼容的路由器和框架的唯一方法。RSC 规范和实现提供了特定功能的明确分离,旨在成为适用于兼容 React 框架的组件规范。
我们通常建议使用现有的框架,但你仍然可以构建自定义框架。由于需要深度集成 bundler,构建自定义 RSC 兼容的框架并不像想象中那么容易。当前的若代 bundler 非常适合在客户端使用,但它们并没有专门为将单个模块图分割为服务器和客户端提供一流的支持而设计。因此我们选择直接与 bundler 开发人员合作,以将内置 RSC 作为 primitive。
@@ -96,11 +92,7 @@ React 的核心思想是开发人员将其 UI 定义为当前状态的函数。
## 追踪 Transition {/*transition-tracing*/}
-<<<<<<< HEAD
-追踪 Transition 的 API 可以检测 [React Transition](/reference/react/useTransition) 变慢的原因,并调查为什么会变慢。在上次更新后,我们完成了 API 的初始设计,并发布了一个 [RFC](https://github.com/reactjs/rfcs/pull/238),基本功能也已经实现。该项目目前处于暂停状态。我们欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这将特别对基于 React Transition 构建的路由非常有用,例如 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router)。
-=======
-The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router).
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+追踪 Transition 的 API 可以检测 [React Transition](/reference/react/useTransition) 变慢的原因,并调查为什么会变慢。在上次更新后,我们完成了 API 的初始设计,并发布了一个 [RFC](https://github.com/reactjs/rfcs/pull/238),基本功能也已经实现。该项目目前处于暂停状态。我们欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这将特别对基于 React Transition 构建的路由非常有用,例如 [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router)。
* * *
除了这个更新,我们的团队最近还在社区播客和直播中客串,更多地讲述我们的工作并回答问题。
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 932279e712..479e89bf5c 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -355,11 +355,7 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static).
服务器组件是一种新的选项,允许在打包前提前渲染组件,在与你的客户端应用程序或 SSR 服务器不同的环境中。这个独立的环境就是 React 服务器组件中的 "服务器"。服务器组件可以在你的 CI 服务器上在构建时运行一次,或者可以在每次请求时使用 web 服务器运行。
-<<<<<<< HEAD
-React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能。这意味着,现在可以将 React 19 作为 peer 依赖项来发布带有服务器组件的库,使用 `react-server` [导出条件](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) 用于支持 [全栈 React 架构](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision) 的框架。
-=======
-React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能。这意味着,现在可以将 React 19 作为 peer 依赖项来发布带有服务器组件的库,使用 `react-server` [导出条件](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) 用于支持 [全栈 React 架构](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision) 的框架。
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index ad1a6b3a55..ef4312c85a 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -20,15 +20,9 @@ title: 将 React 添加到现有项目中
以下是推荐的配置方式:
-<<<<<<< HEAD
-1. 使用一个 [基于 React 的框架](/learn/start-a-new-react-project) 构建 **应用的 React 部分**。
+1. 使用一个 [基于 React 的框架](/learn/creating-a-react-appt) 构建 **应用的 React 部分**。
2. **在框架配置中将 `/some-app` 指定为基本路径**(这里有 [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath) 与 [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/) 的配置样例)。
3. **配置服务器或代理**,以便所有位于 `/some-app/` 下的请求都由 React 应用处理。
-=======
-1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app).
-2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
-3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
这可以确保应用的 React 部分可以受益于这些框架中内置的 [最佳实践](/learn/build-a-react-app-from-scratch#consider-using-a-framework)。
@@ -155,11 +149,7 @@ root.render();
请注意 `index.html` 中的原始 HTML 内容是如何保留的,但现在你自己的 `NavigationBar` React 组件出现在 HTML 的 `
diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md
index fb2a6a046c..383627a8b1 100644
--- a/src/content/reference/react-dom/client/index.md
+++ b/src/content/reference/react-dom/client/index.md
@@ -6,11 +6,7 @@ translators:
-<<<<<<< HEAD
-`react-dom/client` API 允许你在客户端(浏览器)渲染 React 组件。这些 API 通常在应用程序顶层调用,以初始化 React 树。有的 [框架](/learn/start-a-new-react-project#full-stack-frameworks) 可能会为你调用相关 API,大多数组件不需要导入和使用这些 API。
-=======
-The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+`react-dom/client` API 允许你在客户端(浏览器)渲染 React 组件。这些 API 通常在应用程序顶层调用,以初始化 React 树。有的 [框架](/learn/creating-a-react-app#full-stack-frameworks) 可能会为你调用相关 API,大多数组件不需要导入和使用这些 API。
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index f2d5793157..363977e52c 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -21,11 +21,7 @@ title: React DOM API
一旦你确定会用到某些资源,这些 API 可用于预加载脚本、样式表和字体等资源,从而让应用更快。例如,在跳转到将使用这些资源的另一个页面之前加载。
-<<<<<<< HEAD
-[基于 React 的框架](/learn/start-a-new-react-project) 通常会为你处理资源加载,因此你可能无需手动调用这些 API。具体请查阅你的框架文档。
-=======
-[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call these APIs yourself. Consult your framework's documentation for details.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+[基于 React 的框架](/learn/creating-a-react-app) 通常会为你处理资源加载,因此你可能无需手动调用这些 API。具体请查阅你的框架文档。
* [`prefetchDNS`](/reference/react-dom/prefetchDNS) 让你预取出希望连接的 DNS 域名的 IP 地址。
* [`preconnect`](/reference/react-dom/preconnect) 让你连接到预计请求资源的服务器,即使你尚不确定具体需要哪些资源。
diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md
index edbdce8b1a..e156cb73b9 100644
--- a/src/content/reference/react-dom/preinit.md
+++ b/src/content/reference/react-dom/preinit.md
@@ -4,11 +4,7 @@ title: preinit
-<<<<<<< HEAD
-[基于 React 的框架](/learn/start-a-new-react-project) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
-=======
-[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+[基于 React 的框架](/learn/creating-a-react-app) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md
index e0e1700655..09309ef628 100644
--- a/src/content/reference/react-dom/preinitModule.md
+++ b/src/content/reference/react-dom/preinitModule.md
@@ -4,11 +4,7 @@ title: preinitModule
-<<<<<<< HEAD
-[基于 React 的框架](/learn/start-a-new-react-project) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
-=======
-[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+[基于 React 的框架](/learn/creating-a-react-app) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md
index 3de3b0a9f8..c1c5799df9 100644
--- a/src/content/reference/react-dom/preload.md
+++ b/src/content/reference/react-dom/preload.md
@@ -4,11 +4,7 @@ title: preload
-<<<<<<< HEAD
- [基于 React 的框架](/learn/start-a-new-react-project) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
-=======
-[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+[基于 React 的框架](/learn/creating-a-react-app) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md
index 607d5ad414..fea400843b 100644
--- a/src/content/reference/react-dom/preloadModule.md
+++ b/src/content/reference/react-dom/preloadModule.md
@@ -4,11 +4,7 @@ title: preloadModule
-<<<<<<< HEAD
-[基于 React 的框架](/learn/start-a-new-react-project) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
-=======
-[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+[基于 React 的框架](/learn/creating-a-react-app) 通常会内置资源处理方案,因此你可能不必手动调用此 API。请查阅框架文档以获取详细信息。
diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md
index 59622b3351..9149acae38 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,11 +4,7 @@ title: Server React DOM API
-<<<<<<< HEAD
-`react-dom/server` API 允许你通过服务端渲染将 React 组件渲染为 HTML。这些 API 仅在服务器应用程序顶层调用,以生成初始 HTML。有的 [框架](/learn/start-a-new-react-project#full-stack-frameworks) 可能会为你调用相关 API。大多数组件不需要导入或使用这些 API。
-=======
-The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+`react-dom/server` API 允许你通过服务端渲染将 React 组件渲染为 HTML。这些 API 仅在服务器应用程序顶层调用,以生成初始 HTML。有的 [框架](/learn/creating-a-react-app#full-stack-frameworks) 可能会为你调用相关 API。大多数组件不需要导入或使用这些 API。
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
index 109cfbdd02..4023dd9b0d 100644
--- a/src/content/reference/react-dom/static/index.md
+++ b/src/content/reference/react-dom/static/index.md
@@ -4,11 +4,7 @@ title: Static React DOM APIs
-<<<<<<< HEAD
-`react-dom/static` API 允许你为 React 组件生成静态 HTML。与流式 API 相比,它们的功能有限。[框架](/learn/start-a-new-react-project#full-stack-frameworks) 可能会调用它们。你的大多数组件不需要导入或使用它们。
-=======
-The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+`react-dom/static` API 允许你为 React 组件生成静态 HTML。与流式 API 相比,它们的功能有限。[框架](/learn/creating-a-react-app#full-stack-frameworks) 可能会调用它们。你的大多数组件不需要导入或使用它们。
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 4606e61ce4..01bfdb26bb 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -896,11 +896,7 @@ button { margin: 5px; }
### 使用 Effect 请求数据 {/*fetching-data-with-effects*/}
-<<<<<<< HEAD
-你可以使用 Effect 来为组件请求数据。请注意,[如果你使用框架](/learn/start-a-new-react-project#full-stack-frameworks),使用框架的数据请求方式将比在 Effect 中手动编写要有效得多。
-=======
-You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/creating-a-react-app#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+你可以使用 Effect 来为组件请求数据。请注意,[如果你使用框架](/learn/creating-a-react-app#full-stack-frameworks),使用框架的数据请求方式将比在 Effect 中手动编写要有效得多。
如果你想手动从 Effect 中请求数据,你的代码可能是这样的:
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 89f476a728..a9f733c80b 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -95,11 +95,7 @@ function SubmitButton({ submitAction }) {
#### 参数 {/*starttransition-parameters*/}
-<<<<<<< HEAD
-* `action`:通过调用一个或多个 [`set` 函数](/reference/react/useState#setstate) 来更新某些状态的函数。React 会立即调用 `action`(无需参数),并将 `action` 函数调用期间同步调度的所有状态更新标记为 Transition。在 `action` 中通过 `await` 等待的异步调用会被包含在 Transition 中,但目前需要在 `await` 之后将任何 `set` 函数再次包裹在 `startTransition` 中(参见[疑难解答](#react-doesnt-treat-my-state-update-after-await-as-a-transition))。标记为 Transition 的状态更新将具备[非阻塞特性](#marking-a-state-update-as-a-non-blocking-transition),并且[不会显示不必要的加载指示](#preventing-unwanted-loading-indicators)。
-=======
-* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls that are awaited in the `action` will be included in the Transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#perform-non-blocking-updates-with-actions) and [will not display unwanted loading indicators](#preventing-unwanted-loading-indicators).
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+* `action`:通过调用一个或多个 [`set` 函数](/reference/react/useState#setstate) 来更新某些状态的函数。React 会立即调用 `action`(无需参数),并将 `action` 函数调用期间同步调度的所有状态更新标记为 Transition。在 `action` 中通过 `await` 等待的异步调用会被包含在 Transition 中,但目前需要在 `await` 之后将任何 `set` 函数再次包裹在 `startTransition` 中(参见[疑难解答](#react-doesnt-treat-my-state-update-after-await-as-a-transition))。标记为 Transition 的状态更新将具备[非阻塞特性](#perform-non-blocking-updates-with-actions),并且[不会显示不必要的加载指示](#preventing-unwanted-loading-indicators)。
#### 返回值 {/*starttransition-returns*/}
diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md
index 1389d379fb..efa026c64e 100644
--- a/src/content/reference/rsc/directives.md
+++ b/src/content/reference/rsc/directives.md
@@ -10,11 +10,7 @@ title: "指示符"
-<<<<<<< HEAD
-指示符(directive)向 [与 React 服务器组件兼容的捆绑器](/learn/start-a-new-react-project#full-stack-frameworks) 提供指令(instruction)。
-=======
-Directives provide instructions to [bundlers compatible with React Server Components](/learn/creating-a-react-app#full-stack-frameworks).
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+指示符(directive)向 [与 React 服务器组件兼容的捆绑器](/learn/creating-a-react-app#full-stack-frameworks) 提供指令(instruction)。
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md
index d69a00d3d7..e2d9c920f3 100644
--- a/src/content/reference/rsc/use-client.md
+++ b/src/content/reference/rsc/use-client.md
@@ -41,11 +41,7 @@ export default function RichTextEditor({ timestamp, text }) {
}
```
-<<<<<<< HEAD
-当从服务器组件导入带有 `'use client'` 标记的文件时,[兼容的捆绑工具](/learn/start-a-new-react-project#full-stack-frameworks) 将模块导入视为服务器运行和客户端运行代码之间的边界。
-=======
-When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/creating-a-react-app#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+当从服务器组件导入带有 `'use client'` 标记的文件时,[兼容的捆绑工具](/learn/creating-a-react-app#full-stack-frameworks) 将模块导入视为服务器运行和客户端运行代码之间的边界。
作为 `RichTextEditor` 的依赖项,无论 `formatDate` 与 `Button` 的模块是否包含 `'use client'`,其都将在客户端上进行评估。请注意,当从服务器代码导入时,单个模块可能在服务器上进行评估,并且当从客户端代码导入时,可能在客户端上进行评估。
From c28f1258435f674ad8369039ddfea8e51ed22a11 Mon Sep 17 00:00:00 2001
From: Xleine
Date: Sun, 16 Nov 2025 20:01:31 +0800
Subject: [PATCH 5/6] fix conflict
---
src/content/learn/you-might-not-need-an-effect.md | 6 +-----
src/content/reference/react/useEffect.md | 13 ++-----------
src/content/reference/react/useTransition.md | 8 +-------
3 files changed, 4 insertions(+), 23 deletions(-)
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index b15c249dd7..eaa71e5c56 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -757,11 +757,7 @@ function SearchResults({ query }) {
处理竞态条件并不是实现数据获取的唯一难点。你可能还需要考虑缓存响应结果(使用户点击后退按钮时可以立即看到先前的屏幕内容),如何在服务端获取数据(使服务端初始渲染的 HTML 中包含获取到的内容而不是加载动画),以及如何避免网络瀑布(使子组件不必等待每个父组件的数据获取完毕后才开始获取数据)。
-<<<<<<< HEAD
-**这些问题适用于任何 UI 库,而不仅仅是 React。解决这些问题并不容易,这也是现代 [框架](/learn/start-a-new-react-project#full-stack-frameworks) 提供了比在 Effect 中获取数据更有效的内置数据获取机制的原因。**
-=======
-**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+**这些问题适用于任何 UI 库,而不仅仅是 React。解决这些问题并不容易,这也是现代 [框架](/learn/creating-a-react-app#full-stack-frameworks) 提供了比在 Effect 中获取数据更有效的内置数据获取机制的原因。**
如果你不使用框架(也不想开发自己的框架),但希望使从 Effect 中获取数据更符合人类直觉,请考虑像这个例子一样,将获取逻辑提取到一个自定义 Hook 中:
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 01bfdb26bb..ce5bd76d9f 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1049,13 +1049,8 @@ export async function fetchBio(person) {
这些缺点并不仅仅体现在 React 上,它可能出现在所有挂载时请求数据的地方。与路由一样,要做好数据请求并非易事,因此我们推荐以下方法:
-<<<<<<< HEAD
-- **如果正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks),那么请使用其内置的数据获取机制**。现代 React 框架已经集成了高效的数据获取机制,不会受到上述问题的影响。
+- **如果正在使用 [框架](/learn/creating-a-react-app#full-stack-frameworks),那么请使用其内置的数据获取机制**。现代 React 框架已经集成了高效的数据获取机制,不会受到上述问题的影响。
- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [TanStack Query](https://tanstack.com/query/latest/)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以构建自己的解决方案,在这种情况下,你将在底层使用 Effect,但还需添加逻辑以避免重复请求、缓存响应并避免网络瀑布效应(通过预加载数据或将数据需求提升到路由级别)。
-=======
-- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
如果这两种方法都不适合你,可以继续直接在 Effect 中请求数据。
@@ -1733,11 +1728,7 @@ function Page({ url, shoppingCart }) {
### 在服务器和客户端上显示不同的内容 {/*displaying-different-content-on-the-server-and-the-client*/}
-<<<<<<< HEAD
-如果你的应用程序使用服务端([直接](/reference/react-dom/server) 或通过 [框架](/learn/start-a-new-react-project#full-stack-frameworks))渲染,你的组件将会在两个不同的环境中渲染。在服务器上,它将渲染生成初始 HTML。在客户端,React 将再次运行渲染代码,以便将事件处理附加到该 HTML 上。这就是为什么要让 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) 发挥作用,你的初始渲染输出必须在客户端和服务器上完全相同。
-=======
-If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/creating-a-react-app#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+如果你的应用程序使用服务端([直接](/reference/react-dom/server) 或通过 [框架](/learn/creating-a-react-app#full-stack-frameworks))渲染,你的组件将会在两个不同的环境中渲染。在服务器上,它将渲染生成初始 HTML。在客户端,React 将再次运行渲染代码,以便将事件处理附加到该 HTML 上。这就是为什么要让 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) 发挥作用,你的初始渲染输出必须在客户端和服务器上完全相同。
在极少数情况下,你可能需要在客户端上显示不同的内容。例如,如果你的应用从 [`localStorage`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) 中读取某些数据,服务器上肯定不可能做到这一点。以下是这如何实现的:
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a9f733c80b..880b8c29ac 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1246,15 +1246,9 @@ function Router() {
这么做有三个好处:
-<<<<<<< HEAD
-- [转换效果是可中断的](#marking-a-state-update-as-a-non-blocking-transition),这样用户可以在等待重新渲染完成之前点击其他地方。
+- [转换效果是可中断的](#perform-non-blocking-updates-with-actions),这样用户可以在等待重新渲染完成之前点击其他地方。
- [转换效果可以防止不必要的加载指示符](#preventing-unwanted-loading-indicators),这样用户就可以避免在导航时产生不协调的跳转。
- [Transition 等待所有挂起的 action](#perform-non-blocking-updates-with-actions),它允许用户在副作用完成之后再显示新页面。
-=======
-- [Transitions are interruptible,](#perform-non-blocking-updates-with-actions) which lets the user click away without waiting for the re-render to complete.
-- [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation.
-- [Transitions wait for all pending actions](#perform-non-blocking-updates-with-actions) which lets the user wait for side effects to complete before the new page is shown.
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
下面是一个简单的使用转换效果进行页面导航的路由器示例:
From 451f4cdf3327f3987264f78d5a4907246cdaf640 Mon Sep 17 00:00:00 2001
From: Xleine
Date: Sun, 16 Nov 2025 20:04:06 +0800
Subject: [PATCH 6/6] fix typo
---
src/content/learn/add-react-to-an-existing-project.md | 2 +-
src/content/learn/your-first-component.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index ef4312c85a..c10092b0ec 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -20,7 +20,7 @@ title: 将 React 添加到现有项目中
以下是推荐的配置方式:
-1. 使用一个 [基于 React 的框架](/learn/creating-a-react-appt) 构建 **应用的 React 部分**。
+1. 使用一个 [基于 React 的框架](/learn/creating-a-react-app) 构建 **应用的 React 部分**。
2. **在框架配置中将 `/some-app` 指定为基本路径**(这里有 [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath) 与 [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/) 的配置样例)。
3. **配置服务器或代理**,以便所有位于 `/some-app/` 下的请求都由 React 应用处理。
diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md
index f89ce54001..f16a5b5a23 100644
--- a/src/content/learn/your-first-component.md
+++ b/src/content/learn/your-first-component.md
@@ -219,7 +219,7 @@ function Profile() {
大多数 React 应用程序只有组件。这意味着你不仅可以将组件用于可复用的部分,例如按钮,还可以用于较大块的部分,例如侧边栏、列表以及最终的完整页面!组件是组织 UI 代码和标签的一种快捷方式,即使其中一些组件只使用了一次。
-[基于 React 的框架](/learn/creating-a-react-ap) 更进一步。与使用一个空白的 HTML 文件并让 React 使用 JavaScript “接管” 管理页面不同,框架 **还会** 根据 React 组件自动生成 HTML。这使你的应用程序能够在 JavaScript 代码加载之前显示一些内容。
+[基于 React 的框架](/learn/creating-a-react-app) 更进一步。与使用一个空白的 HTML 文件并让 React 使用 JavaScript “接管” 管理页面不同,框架 **还会** 根据 React 组件自动生成 HTML。这使你的应用程序能够在 JavaScript 代码加载之前显示一些内容。
尽管如此,许多网站仅使用 React 来 [添加“交互性”](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page)。它们有很多根组件,而不是整个页面的单个组件。你可以根据需要尽可能多或尽可能少地使用 React。