Sync with react.dev @ f6d762cb

.github/workflows/analyze.yml

@@ -7,6 +7,8 @@ on:
       - main # change this if your default branch is named differently
   workflow_dispatch:
 
+permissions: {}
+
 jobs:
   analyze:
     runs-on: ubuntu-latest
@@ -23,7 +25,7 @@ jobs:
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
-          path: "**/node_modules"
+          path: '**/node_modules'
           key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install deps
@@ -55,7 +57,7 @@ jobs:
           name: bundle_analysis.json
 
       - name: Download base branch bundle stats
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
         if: success() && github.event.number
         with:
           workflow: analyze.yml

.github/workflows/analyze_comment.yml

@@ -2,10 +2,12 @@ name: Analyze Bundle (Comment)
 
 on:
   workflow_run:
-    workflows: ["Analyze Bundle"]
+    workflows: ['Analyze Bundle']
     types:
       - completed
 
+permissions: {}
+
 jobs:
   comment:
     runs-on: ubuntu-latest
@@ -14,15 +16,15 @@ jobs:
       github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download base branch bundle stats
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
         with:
           workflow: analyze.yml
           run_id: ${{ github.event.workflow_run.id }}
           name: analysis_comment.txt
           path: analysis_comment.txt
 
       - name: Download PR number
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
         with:
           workflow: analyze.yml
           run_id: ${{ github.event.workflow_run.id }}
@@ -48,7 +50,7 @@ jobs:
           echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
 
       - name: Comment
-        uses: marocchino/sticky-pull-request-comment@v2
+        uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728
         with:
           header: next-bundle-analysis
           number: ${{ steps.get-comment-body.outputs.pr-number }}

.github/workflows/discord_notify.yml

@@ -1,12 +1,17 @@
 name: Discord Notify
 
 on:
-  pull_request_target:
-    types: [labeled]
+  pull_request:
+    types: [opened, ready_for_review]
+
+permissions: {}
 
 jobs:
   check_maintainer:
     uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
     with:
       actor: ${{ github.event.pull_request.user.login }}
       is_remote: true

.github/workflows/label_core_team_prs.yml

@@ -1,7 +1,9 @@
 name: Label Core Team PRs
 
 on:
-  pull_request_target:
+  pull_request:
+
+permissions: {}
 
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
@@ -11,6 +13,9 @@ env:
 jobs:
   check_maintainer:
     uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
     with:
       actor: ${{ github.event.pull_request.user.login }}
       is_remote: true
@@ -19,6 +24,11 @@ jobs:
     if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
     runs-on: ubuntu-latest
     needs: check_maintainer
+    permissions:
+      # Used to add labels on issues
+      issues: write
+      # Used to add labels on PRs
+      pull-requests: write
     steps:
       - name: Label PR as React Core Team
         uses: actions/github-script@v7

.github/workflows/site_lint.yml

@@ -7,6 +7,8 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
 
+permissions: {}
+
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -25,7 +27,7 @@ jobs:
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
-          path: "**/node_modules"
+          path: '**/node_modules'
           key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install deps

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -27,7 +27,7 @@ We announced an [experimental demo of React Server Components](https://legacy.re
 
 In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278).
 
-We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.
+We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.
 
 ## Asset Loading {/*asset-loading*/}
 

src/content/blog/2024/04/25/react-19-upgrade-guide.md

@@ -24,7 +24,7 @@ To help make the upgrade to React 19 easier, we've published a `[email protected]` rele
 
 We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19.
 
-For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md).
+For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024).
 
 </Note>
 
@@ -113,7 +113,7 @@ This will run the following codemods from `react-codemod`:
 - [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref)
 - [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import)
 - [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) 
-- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript)
+- [`prop-types-typescript`](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types)
 
 This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below.
 

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

@@ -2,7 +2,7 @@
 title: "Sunsetting Create React App"
 author: Matt Carroll and Ricky Hanlon
 date: 2025/02/14
-description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework. We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework.
+description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch.
 ---
 
 February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm)
@@ -11,7 +11,9 @@ February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ri
 
 <Intro>
 
-Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](/learn/creating-a-react-app). We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by [building a framework](/learn/building-a-react-framework).
+Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild. 
+
+We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch).
 
 </Intro>
 
@@ -27,7 +29,7 @@ This model became so popular that there's an entire category of tools working th
 
 ## Deprecating Create React App {/*deprecating-create-react-app*/}
 
-Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-create-react-app) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks).
+Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks).
 
 However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App.
 
@@ -46,35 +48,44 @@ This error message will only be shown once per install.
 </ConsoleLogLine>
 </ConsoleBlockMulti>
 
-We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-only SPAs, and can be deployed to a CDN or static hosting service without a server.
+We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19.
+
+## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/}
+We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server.
 
 For existing apps, these guides will help you migrate to a client-only SPA:
 
 * [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app)
 * [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes).
-* [Expo Webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
+* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
 
-Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19.
+## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/}
 
 If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild.
 
-To help users get started with Vite, Parcel or Rsbuild, we've published new docs for [Building a Framework](/learn/building-a-react-framework). Continue reading to learn more about the [limitations of Create React App](#limitations-of-create-react-app) and [why we recommend frameworks](#why-we-recommend-frameworks).
+For existing apps, these guides will help you migrate to a build tool:
 
-<Note>
+* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/)
+* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/)
+* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra)
+
+To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch).
 
-#### Do you recommend Vite? {/*do-you-recommend-vite*/}
+<DeepDive>
 
-We provide several Vite-based recommendations.
+#### Do I need a framework? {/*do-i-need-a-framework*/}
 
-React Router v7 is a Vite based framework which allows you to use Vite's fast development server and build tooling with a framework that provides routing and data fetching. Just like the other frameworks we recommend, you can build a SPA with React Router v7.
+Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework. 
 
-We also recommend using Vite when [adding React to an existing project](/learn/add-react-to-an-existing-project), or [building a framework](/learn/building-a-react-framework).
+Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself.
 
-Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, React recommends using a framework that integrates with build tools like Vite for new projects.
+However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild.
 
-</Note>
+</DeepDive>
+
+Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks).
 
-## Limitations of Create React App {/*limitations-of-create-react-app*/}
+## Limitations of Build Tools {/*limitations-of-build-tools*/}
 
 Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build.
 
@@ -110,7 +121,7 @@ export default function App() {
   return (
     <div>
       {route === 'home' && <Home />}
-      {route === 'dashboard' && <Dashbord />}
+      {route === 'dashboard' && <Dashboard />}
     </div>
   )
 }

src/content/blog/index.md

@@ -6,15 +6,15 @@ title: React Blog
 
 This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. 
 
-You can also follow the [@react.dev](https://bsky.app/profiles/react.js) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
+You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
 
 </Intro>
 
 <div className="sm:-mx-5 flex flex-col gap-5 mt-12">
 
 <BlogCard title="Sunsetting Create React App" date="February 13, 2025" url="/blog/2025/02/14/sunsetting-create-react-app">
 
-Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework. We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework.
+Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ...
 
 </BlogCard>