Sync with react.dev @ 2534424e

.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:
         

next.config.js

@@ -36,6 +36,14 @@ const nextConfig = {
     // Don't bundle the shim unnecessarily.
     config.resolve.alias['use-sync-external-store/shim'] = 'react';
 
+    // ESLint depends on the CommonJS version of esquery,
+    // but Webpack loads the ESM version by default. This
+    // alias ensures the correct version is used.
+    //
+    // More info:
+    // https://github.com/reactjs/react.dev/pull/8115
+    config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js';
+
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
       new NormalModuleReplacementPlugin(

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);

src/components/Layout/HomeContent.js

@@ -249,11 +249,19 @@ export function HomeContent() {
               con un framework
             </Header>
             <Para>
+<<<<<<< HEAD
               React è una libreria. Ti permette di mettere insieme componenti,
               ma non prescrive come fare routing e data fetching. Per costruire
               un&apos;applicazione intera con React, ti consigliamo un framework
               full-stack come <Link href="https://nextjs.org">Next.js</Link> o{' '}
               <Link href="https://remix.run">Remix</Link>.
+=======
+              React is a library. It lets you put components together, but it
+              doesn’t prescribe how to do routing and data fetching. To build an
+              entire app with React, we recommend a full-stack React framework
+              like <Link href="https://nextjs.org">Next.js</Link> or{' '}
+              <Link href="https://reactrouter.com">React Router</Link>.
+>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
             </Para>
           </Center>
           <FullBleed>
@@ -271,8 +279,13 @@ export function HomeContent() {
               <CTA
                 color="gray"
                 icon="framework"
+<<<<<<< HEAD
                 href="/learn/start-a-new-react-project">
                 Inizia con un framework
+=======
+                href="/learn/creating-a-react-app">
+                Get started with a framework
+>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
               </CTA>
             </div>
           </Center>

src/components/Layout/Page.tsx

@@ -15,7 +15,7 @@ import {useRouter} from 'next/router';
 import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
-import SocialBanner from '../SocialBanner';
+// import SocialBanner from '../SocialBanner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import PageHeading from 'components/PageHeading';
@@ -142,7 +142,7 @@ export function Page({
           />
         </Head>
       )}
-      <SocialBanner />
+      {/* <SocialBanner /> */}
       <TopNav
         section={section}
         routeTree={routeTree}

src/components/MDX/Sandpack/runESLint.tsx

@@ -21,13 +21,6 @@ const getCodeMirrorPosition = (
 
 const linter = new Linter();
 
-// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop.
-// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`.
-// This hack places the functions in the right place.
-const esquery = require('esquery');
-esquery.parse = esquery.default?.parse;
-esquery.matches = esquery.default?.matches;
-
 const reactRules = require('eslint-plugin-react-hooks').rules;
 linter.defineRules({
   'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'],

src/components/MDX/TerminalBlock.tsx

@@ -79,13 +79,15 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
           </div>
         </div>
       </div>
-      <div
+      <pre
         className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-auto"
         translate="no"
         dir="ltr">
-        <LevelText type={level} />
-        {message}
-      </div>
+        <code>
+          <LevelText type={level} />
+          {message}
+        </code>
+      </pre>
     </div>
   );
 }

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.

src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md

@@ -15,14 +15,6 @@ In React Labs posts, we write about projects in active research and development.
 
 </Intro>
 
-<Note>
-
-React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can [sign up for the ticket lottery](https://forms.reform.app/bLaLeE/react-conf-2024-ticket-lottery/1aRQLK) until February 28th. 
-
-For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
-
-</Note>
-
 ---
 
 ## React Compiler {/*react-compiler*/}

src/content/blog/2024/05/22/react-conf-2024-recap.md

@@ -112,7 +112,7 @@ Thank you [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) fo
 
 Thank you [Callstack](https://www.callstack.com/) for building the conference website; and to [Kadi Kraman](https://twitter.com/kadikraman) and the [Expo](https://expo.dev/) team for building the conference mobile app.
 
-Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/), and [Vercel](https://vercel.com).
+Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://rwsdk.com/), and [Vercel](https://vercel.com).
 
 Thank you to the AV Team for the visuals, stage, and sound; and to the Westin Hotel for hosting us.
 

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). 
 
 
 <Note>

src/content/blog/2025/02/14/sunsetting-create-react-app.md

@@ -177,7 +177,7 @@ export default function Dashboard() {
 }
 ```
 
-Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [React Query](https://react-query.tanstack.com/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders.
+Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders.
 
 These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches:
 

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

@@ -16,14 +16,6 @@ In React Labs posts, we write about projects in active research and development.
 </Intro>
 
 
-<Note>
-
-React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
-
-Watch the livestream on [the React Conf website](https://conf.react.dev).
-
-</Note>
-
 Today, we're excited to release documentation for two new experimental features that are ready for testing:
 
 - [View Transitions](#view-transitions)
@@ -40,6 +32,14 @@ We're also sharing updates on new features currently in development:
 
 # New Experimental Features {/*new-experimental-features*/}
 
+<Note>
+
+`<Activity />` has shipped in `[email protected]`.
+
+`<ViewTransition />` and `addTransitionType` are now available in `react@canary`.
+
+</Note>
+
 View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
 
 You can try them by upgrading React packages to the most recent experimental version:
@@ -11543,7 +11543,7 @@ Try searching for a video, selecting it, and clicking "back":
 <Sandpack>
 
 ```js src/App.js
-import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";  import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
 
 export default function App() {
   const { url } = useRouter();
@@ -12880,7 +12880,7 @@ With this update, if the content on the next page has time to pre-render, it wil
 <Sandpack>
 
 ```js src/App.js
-import { ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data';  import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data';
 
 export default function App() {
   const { url } = useRouter();