Skip to content

Updates from feedback #7624

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.

Sign up for GitHub

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 6 commits into from
Feb 17, 2025
Merged

Updates from feedback #7624

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a6ba27d
[Blog + Docs] Updates from feedback
rickhanlonii Feb 17, 2025
18f7a7e
Merge in changes from #7618
rickhanlonii Feb 17, 2025
2aef7f7
Say the words "Vite", "Parcel", and "Rsbuild"
rickhanlonii Feb 17, 2025
3852170
Tweaks from feedback
rickhanlonii Feb 17, 2025
f062f60
re-apply #7615
rickhanlonii Feb 17, 2025
72f50c7
merge in #7622
rickhanlonii Feb 17, 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
37 changes: 24 additions & 13 deletions src/content/blog/2025/02/14/sunsetting-create-react-app.md
View file
Open in desktop
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 Down Expand Up @@ -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/)

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.
Copy link

@yyx990803 yyx990803 Feb 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Saw this PR a bit late but I want to point out the "unusual constraints" phrasing here is among those that makes users who find Vite + React just fine feel that their preference is being invalidated - when in fact there are massive amount of users falling into this category.

As evidence, here's a chart comparing number of plain Vite + React users (calculated from total of the two official Vite React plugins minus Remix) vs. Next - the numbers are quite close and we expect this to overtake Next at some point.

Another point I want to make is this section is talking about "Migration" - a term that mostly applies to existing applications. Most existing CRA apps likely already have their routing / data fetching implemented in some way (e.g. with older versions of React Router). Moving to something like Vite is the most proven and safe path to adopt modern tooling, without the risk of having to refactor their (currently working) routing and data fetching logic. I really wouldn't call this "unusual constraints" - rather, this is probably the most practical constraints: replace something deprecated with something that is actively maintained, improve the DX, while minimizing the migration cost / risk.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I appreciate the feedback. Maybe there's some tweaking we can do to the language here. This specific sentence is just copy pasted from the intro of Build a React App from Scratch. Here we're just trying to explain that you can migrate to a build tool if you want. In the deep dive it says:

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. Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, React recommends using a framework 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. However, you can always build a React app from scratch using a build tool like Vite, Parcel, or Rsbuild.

The goal isn't to invalidate preferences, because the goal isn't to document preferences at all. The goal is to encourage users to use a setup that will allow them to build the best user experience possible, which means allowing them to integrate data fetching into routing easily, and to opt in to server features if they want instead of getting locked into a network-waterfall prone bloated CSR bundle that requires a lot of work to fix later (fwiw, this isn't a critique of Vite, since solving these problems are for frameworks and not a build tool).

As for the migration pain - you can use all of the same routing you're already using in the migration guides we provided. Both the Next guide and the React Router guide explain the steps to migrate using your existing routing and you can incrementally migrate to the file based routing. I don't think it's fair to developers to frame that as less safe, or more work. There are plenty of stories of pain points migrating from Create React App to Vite (as well as successes).

Also, if we're going to compare usage, we should also include React Router (not just Remix), which has almost as many downloads as Next and Vite React combined. This is important context because it shows that most Vite users immediately install React Router. So most Vite apps are already using React Router (the library), and can choose React Router (the framework) to continue using Vite:

Screenshot 2025-02-18 at 1 55 12 PM


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/)
Copy link
Member Author

@rickhanlonii rickhanlonii Feb 17, 2025 •
edited by mattcarrollcode
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the best guide for migrating from CRA to Vite? (cc @yyx990803)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can work on an official one and later send a PR.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! To be honest, not having clear and official guides (and I hadn't actually tested these, like i have the framework guides) were the only reason I didn't include this section in the original draft, and just linked to our new docs. That clearly sent the wrong message, and I needed to add this quickly, so it would be nice to get more official guides.

* [Parcel Create React App migration guide](https://stackoverflow.com/a/49605484)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the best guide for migrating from Parcel? (cc @devongovett)

* [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>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ryansolid does this feel less "begrudging" and more in line with other library recommendations?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was away for the weekend.. Only comment is "unusual constraints" still carries a tone of someone doing something wrong. But generally I think this will do it. It's tricky because there is a perceived history here, even if I don't think it's completely fair. Perceptions being as such makes the situation more delicate than would otherwise be merited.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I can see how that has the wrong tone.

The intent is to cover use cases like a VSCode plugin, chrome extension, or game which are (let's be real) uncommon and don't need URL routing integrated into data-fetching and will never need server features because they're not deployed to the web. But framed in a way where folks who are new won't mistakenly pattern match themselves into this category and go down the wrong path and get locked in to CSR only.

Do you have suggestions on wording to clarify this and soften the tone?


Continue reading to learn more about the [limitations of build tools](#limitations-of-create-react-app) 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
2 changes: 1 addition & 1 deletion src/content/blog/index.md
View file
Open in desktop
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