Skip to content

Sync with react.dev @ fc296034 #593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 26 commits into from
Feb 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
1923248
fix(docs): webpack branding states it should be lower case (#7617)
zackarychapple Feb 17, 2025
09f39a0
fix: Dashboard component name in blogpost (#7621)
erasmoh Feb 17, 2025
604407a
Updates from feedback (#7624)
rickhanlonii Feb 17, 2025
34e13df
Fix setup page (#7607)
jasonqiu212 Feb 18, 2025
1a4183a
fix: typo for issue #7491 (#7493)
TheCaptain1810 Feb 18, 2025
c7099e3
Fix headings and add link (#7626)
rickhanlonii Feb 18, 2025
c726e7d
Fix broken heading link (#7627)
rickhanlonii Feb 18, 2025
aaf392a
Fix more broken links (#7628)
rickhanlonii Feb 18, 2025
32cb13a
updated incorrect logic (#7482)
timmparsons Feb 18, 2025
2cf6668
Update react-19-upgrade-guide.md (#7411)
amirsaeed671 Feb 18, 2025
ff12973
Fix error in second code snippet under Server Functions with Actions …
hyundonmoon Feb 18, 2025
0593d01
Fix typo in render-and-commit.md (#7405)
rammba Feb 18, 2025
126d8c9
Update nextjs link with the latest URL (#7389)
alex-safian Feb 18, 2025
55d1f8f
Update input.md (#7418)
pierluc-codes Feb 18, 2025
f3e9921
clarify alert message behavior in issue #7494 (#7629)
Punith1117 Feb 18, 2025
c03f029
Fix broken header link in CRA blog post(#7632)
yaodingyd Feb 18, 2025
383b389
Remove forwardRefs from recap and challenges (#7475)
dixita0607 Feb 19, 2025
6ef277a
Update CRA to Parcel migration guide (#7638)
devongovett Feb 20, 2025
a42121e
fix: correct typo in hydrateRoot.md (#7637)
hjunyoung Feb 20, 2025
dcaf07e
chore(docs): add mention that React will drop all extraneous props fo…
samcx Feb 22, 2025
fc29603
Fix 'optimistically updating form data' demo bug (#7646)
subliun Feb 22, 2025
a07fd79
merging all conflicts
react-translations-bot Feb 24, 2025
5d80556
Resolve merge conflicts
alinkedd Feb 24, 2025
c2456ef
Tranlate Build a React App from Scratch page
alinkedd Feb 24, 2025
a7512bf
Translate State Components Memory page
alinkedd Feb 24, 2025
737afd7
Add feature fixes
alinkedd Feb 24, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion TRANSLATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@
| error log | лог помилок |
| event handler | обробник події |
| fallback | запасний |
| feature | особливість |
| feature | функція; особливість |
| framework | фреймворк |
| function component | функційний компонент |
| helper | допоміжний(а); *helper function — допоміжна функція* |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}

Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2024/04/25/react-19-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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.

Expand Down
43 changes: 27 additions & 16 deletions src/content/blog/2025/02/14/sunsetting-create-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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>

Expand All @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -110,7 +121,7 @@ export default function App() {
return (
<div>
{route === 'home' && <Home />}
{route === 'dashboard' && <Dashbord />}
{route === 'dashboard' && <Dashboard />}
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ You can also follow the [@react.dev](https://bsky.app/profiles/react.js) account

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

Expand Down
Loading