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/4] 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 a47295e1e..87f03a660 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 9cc26bdaa..f9b785db4 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 1bc78149d..df1fd085d 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 65bf42757..4e9aad8e8 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 5d3d44005..f98bece42 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 a00422023..b612d7ba6 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 b79b16db6..d01bd6562 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 117fccac8..5dcaaf933 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 97bb4dbc7..93a4a730f 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 5dcba10f7..e9d00fc60 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 ebc2fa6d0..944d438fc 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 943b610f2..1856acd71 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 cec33be44..31ebc385b 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 f67f56eda..da310c762 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 fe614fb27..af04d5b41 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 5a0a7d96b..4c6051977 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/4] 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 923b6c0c9..426df1f7b 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/4] =?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 f56f14b61..c819624ba 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 bdcd8e466..0fd0160d6 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 5474c50d3..080f3586e 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 c74fa9afd..8a2142cf9 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 92cf0b74e..6cce34c6b 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 807b50da5..c312f03fe 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 f4b298c20446a36016b7fa4f81358b6164ebb91f Mon Sep 17 00:00:00 2001
From: Soichiro Miki
Date: Mon, 17 Nov 2025 23:43:53 +0900
Subject: [PATCH 4/4] Resolve conflicts
---
src/components/Layout/HomeContent.js | 7 +------
...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 ++------------
.../learn/synchronizing-with-effects.md | 7 +------
src/content/learn/typescript.md | 6 +-----
.../learn/you-might-not-need-an-effect.md | 12 ++----------
src/content/learn/your-first-component.md | 6 +-----
.../reference/react-dom/client/createRoot.md | 6 +-----
.../reference/react-dom/client/index.md | 6 +-----
src/content/reference/react-dom/index.md | 6 +-----
src/content/reference/react-dom/preinit.md | 6 +-----
.../reference/react-dom/preinitModule.md | 6 +-----
src/content/reference/react-dom/preload.md | 6 +-----
.../reference/react-dom/preloadModule.md | 6 +-----
.../reference/react-dom/server/index.md | 6 +-----
.../reference/react-dom/static/index.md | 6 +-----
src/content/reference/react/useEffect.md | 19 +++----------------
src/content/reference/react/useTransition.md | 14 ++------------
src/content/reference/rsc/directives.md | 6 +-----
src/content/reference/rsc/use-client.md | 6 +-----
21 files changed, 27 insertions(+), 142 deletions(-)
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 30576a35f..853e6b0b8 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -292,13 +292,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 4af98f968..023eebb01 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 を実現できるようする、という方法を考えています。Server Action により、JavaScript が読み込まれる前に段階的に動作するようになるフォームを提供することも可能です。
-<<<<<<< HEAD
-React Server Components は [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router) でリリースされました。これは RSC をプリミティブとして完全採用し深く統合を行ったルータのデモとなっていますが、これが RSC 互換ルータやフレームワークを構築するための唯一の方法というわけではありません。RSC 仕様が提供するものと、その実装が提供するものとの間には明確な区切りがあります。React Server Components は、互換のある複数の 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
+React Server Components は [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router) でリリースされました。これは RSC をプリミティブとして完全採用し深く統合を行ったルータのデモとなっていますが、これが RSC 互換ルータやフレームワークを構築するための唯一の方法というわけではありません。RSC 仕様が提供するものと、その実装が提供するものとの間には明確な区切りがあります。React Server Components は、互換のある複数の React フレームワーク間で動作する、コンポーネント仕様として作られています。
一般的には既存のフレームワークを使用することをお勧めしますが、自分自身のカスタムフレームワークの構築が必要な場合は、それも可能です。独自の RSC 互換フレームワークの構築は、主にバンドラとの深い統合が必要であるという理由により、我々が望むほど簡単なものにはなっていません。現行世代のバンドラはクライアントでの使用には適していますが、サーバとクライアントをまたいだ単一のモジュールグラフの分割を行うことを優先的なサポート項目として設計されてはいません。これが、現在 RSC のプリミティブを組み込んでもらうために、バンドラ開発者と直接協力している理由です。
@@ -96,11 +92,7 @@ React コンポーネント内のプレーンな JavaScript をリアクティ
## トランジショントレーシング {/*transition-tracing*/}
-<<<<<<< HEAD
-Transition Tracing API により、[React のトランジション](/reference/react/useTransition)が遅くなったことを検出し、なぜ遅くなるのかを調査することができます。前回のお知らせ以降、API の初期設計を完了し、[RFC](https://github.com/reactjs/rfcs/pull/238) を公開しました。基本的な機能も実装されています。現在、プロジェクトは保留中です。RFC に対するフィードバックを歓迎します。React のパフォーマンス測定ツールをより良くするために開発を再開できるようになることを楽しみにしています。これは、[Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router) のように React トランジション上に構築されたルータでは、特に役立ちます。
-=======
-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 Tracing API により、[React のトランジション](/reference/react/useTransition)が遅くなったことを検出し、なぜ遅くなるのかを調査することができます。前回のお知らせ以降、API の初期設計を完了し、[RFC](https://github.com/reactjs/rfcs/pull/238) を公開しました。基本的な機能も実装されています。現在、プロジェクトは保留中です。RFC に対するフィードバックを歓迎します。React のパフォーマンス測定ツールをより良くするために開発を再開できるようになることを楽しみにしています。これは、[Next.js App Router](/learn/creating-a-react-app#nextjs-app-router) のように React トランジション上に構築されたルータでは、特に役立ちます。
* * *
このページでのアップデートに加えて、私たちのチームは最近、コミュニティのポッドキャストやライブストリームにゲスト出演し、取り組みについてより多くのことをお話しし、質問に答える機会がありました。
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index eda399edf..780295626 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 @@ async function handler(request) {
サーバコンポーネントは、クライアントアプリケーションや SSR サーバとは別の環境で、バンドル前にコンポーネントを事前レンダーするための新しいオプションです。React Server Components の "server" とはこの別の環境を指しています。サーバコンポーネントは、CI サーバでビルド時に一度だけ実行することも、ウェブサーバを使用してリクエストごとに実行することもできます。
-<<<<<<< HEAD
-React 19 には、Canary チャンネルにあったすべての React Server Components の機能が含まれています。これにより、サーバコンポーネントを使用するライブラリは、React 19 を peer dependency としてターゲットにすることができ、`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 Server Components の機能が含まれています。これにより、サーバコンポーネントを使用するライブラリは、React 19 を peer dependency としてターゲットにすることができ、`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 b0ff55dcf..5e956d104 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-app)のうちひとつを使い、アプリの **React 部分をビルド**します。
2. フレームワークの設定で `/some-app` を ***base path* に指定**します(方法:[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 c1b9be4ea..2a5643022 100644
--- a/src/content/reference/react-dom/client/index.md
+++ b/src/content/reference/react-dom/client/index.md
@@ -4,11 +4,7 @@ title: クライアント用 React DOM API
-<<<<<<< HEAD
-`react-dom/client` の API を用いて、クライアント(ブラウザ)上で React コンポーネントをレンダーすることができます。これらの API は通常、React ツリーを初期化するためにアプリのトップレベルで使用されます。[フレームワーク](/learn/start-a-new-react-project#full-stack-frameworks)はこれらをあなたの代わりに呼び出すことがあります。ほとんどのコンポーネントは、これらをインポートしたり使用したりする必要はありません。
-=======
-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)はこれらをあなたの代わりに呼び出すことがあります。ほとんどのコンポーネントは、これらをインポートしたり使用したりする必要はありません。
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index 57660f71e..a01ff0aae 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 6719eea6e..fde89394c 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 d97fb3026..65604f508 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 e099f5523..eaa05980a 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 5d7dccea4..6e30c647b 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 09b5fc798..7041da6a1 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,11 +4,7 @@ title: サーバ用 React DOM API
-<<<<<<< HEAD
-`react-dom/server` の API を用いて、サーバ上で React コンポーネントを HTML にレンダーすることができます。これらの API は、アプリケーションの最上位で初期 HTML を生成するために、サーバ上でのみ使用されます。[フレームワーク](/learn/start-a-new-react-project#full-stack-frameworks)はこれらをあなたの代わりに呼び出すことがあります。ほとんどのコンポーネントは、これらをインポートしたり使用したりする必要はありません。
-=======
-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)はこれらをあなたの代わりに呼び出すことがあります。ほとんどのコンポーネントは、これらをインポートしたり使用したりする必要はありません。
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
index 2533704bb..76381743c 100644
--- a/src/content/reference/react-dom/static/index.md
+++ b/src/content/reference/react-dom/static/index.md
@@ -4,11 +4,7 @@ title: 静的サイト用 React DOM API
-<<<<<<< HEAD
-`react-dom/static` の API を用いて、React コンポーネントを静的な HTML にレンダーすることができます。これらの API はストリーミング 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 はストリーミング 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 83931dae3..0f67fb5b9 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -896,11 +896,7 @@ button { margin: 5px; }
### エフェクトを使ったデータフェッチ {/*fetching-data-with-effects*/}
-<<<<<<< HEAD
-エフェクトを使って、コンポーネントに必要なデータをフェッチ(fetch, 取得)することができます。ただし[フレームワークを使用している場合](/learn/start-a-new-react-project#full-stack-frameworks)は、エフェクトを自力で記述するよりも、フレームワークのデータフェッチメカニズムを使用する方がはるかに効率的であることに注意してください。
-=======
-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
+エフェクトを使って、コンポーネントに必要なデータをフェッチ(fetch, 取得)することができます。ただし[フレームワークを使用している場合](/learn/creating-a-react-app#full-stack-frameworks)は、エフェクトを自力で記述するよりも、フレームワークのデータフェッチメカニズムを使用する方がはるかに効率的であることに注意してください。
エフェクトを使って自力でデータをフェッチしたい場合は、以下のようなコードを書くことになります。
@@ -1053,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 6.4+](https://beta.reactrouter.com/en/main/start/overview) が含まれます。自分でソリューションを構築することもできます。その場合、エフェクトを内部で使用しつつ、リクエストの重複排除、レスポンスのキャッシュ、ネットワークのウォーターフォールを回避するためのロジック(データのプリロードやルーティング部へのデータ要求の巻き上げ)を追加することになります。
-=======
-- **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
これらのアプローチがどちらも適合しない場合は、引き続きエフェクト内で直接データをフェッチすることができます。
@@ -1737,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)経由で)使用している場合、コンポーネントは 2 種類の環境でレンダーされます。サーバ上では、初期 HTML を生成するためにレンダーされます。クライアント上では、React がその HTML にイベントハンドラをアタッチするために再度レンダーコードを実行します。これが、[ハイドレーション](/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)経由で)使用している場合、コンポーネントは 2 種類の環境でレンダーされます。サーバ上では、初期 HTML を生成するためにレンダーされます。クライアント上では、React がその HTML にイベントハンドラをアタッチするために再度レンダーコードを実行します。これが、[ハイドレーション](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html)が動作するためには初回レンダーの出力がクライアントとサーバの両方で同一でなければならない理由です。
まれに、クライアント側で異なるコンテンツを表示する必要がある場合があります。たとえば、アプリが [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) からデータを読み込む場合、サーバ上ではそれを行うことができません。これは以下の方法で実装できます。
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 153d25c80..b67651886 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`: 1 つ以上の [`set` 関数](/reference/react/useState#setstate)を呼び出して state を更新する関数。React は引数なしで直ちに `action` を呼び出し、`action` 関数呼び出し中に同期的にスケジュールされたすべての state 更新をトランジションとしてマークします。`action` 内で await されている非同期関数のコールもトランジションの一部ではありますが、現時点では `await` の後に来る `set` 関数は別の `startTransition` にラップする必要があります([トラブルシューティング](#react-doesnt-treat-my-state-update-after-await-as-a-transition)参照)。トランジションとしてマークされた state の更新は[ノンブロッキング](#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`: 1 つ以上の [`set` 関数](/reference/react/useState#setstate)を呼び出して state を更新する関数。React は引数なしで直ちに `action` を呼び出し、`action` 関数呼び出し中に同期的にスケジュールされたすべての state 更新をトランジションとしてマークします。`action` 内で await されている非同期関数のコールもトランジションの一部ではありますが、現時点では `await` の後に来る `set` 関数は別の `startTransition` にラップする必要があります([トラブルシューティング](#react-doesnt-treat-my-state-update-after-await-as-a-transition)参照)。トランジションとしてマークされた state の更新は[ノンブロッキング](#perform-non-blocking-updates-with-actions)になり、[不要なローディングインジケータを表示しない](#preventing-unwanted-loading-indicators)ようになります。
#### 返り値 {/*starttransition-returns*/}
@@ -1250,15 +1246,9 @@ function Router() {
これが推奨されるのは以下の 3 つの理由からです:
-<<<<<<< HEAD
-- [トランジションは中断可能](#marking-a-state-update-as-a-non-blocking-transition)であるため、ユーザは再レンダーの完了を待たずにクリックしてページから離れることができます。
+- [トランジションは中断可能](#perform-non-blocking-updates-with-actions)であるため、ユーザは再レンダーの完了を待たずにクリックしてページから離れることができます。
- [トランジションは不要なローディングインジケータを防ぐ](#preventing-unwanted-loading-indicators)ため、ユーザがナビゲーション時の不快なちらつきを避けることができます。
- [トランジションはすべての保留中のアクションを待機します](#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
以下は、ナビゲーションにトランジションを使用した簡易的なルータの例です。
diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md
index 85554c014..077bb85c1 100644
--- a/src/content/reference/rsc/directives.md
+++ b/src/content/reference/rsc/directives.md
@@ -10,11 +10,7 @@ title: "ディレクティブ"
-<<<<<<< HEAD
-ディレクティブによって、[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).
->>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+ディレクティブによって、[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 0d27c211b..f4ce13d11 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)は当該モジュールのインポートを、サーバで実行されるコードとクライアントで実行されるコードの境界として扱います。
上記では `formatDate` と `Button` は `RichTextEditor` が依存するモジュールですので、これらのモジュール自体に `'use client'` ディレクティブが含まれているかどうかに関わらず、これらもクライアントで評価されます。ある単一のモジュールが、サーバコードからインポートされた場合はサーバで、クライアントコードからインポートされた場合はクライアントで評価される場合があることに注意してください。