Skip to content

Commit a6ba27d

Browse files
committed
[Blog + Docs] Updates from feedback
1 parent 09f39a0 commit a6ba27d

File tree

7 files changed

+47
-42
lines changed

7 files changed

+47
-42
lines changed

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

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: "Sunsetting Create React App"
33
author: Matt Carroll and Ricky Hanlon
44
date: 2025/02/14
5-
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.
5+
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.
66
---
77

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

1212
<Intro>
1313

14-
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).
14+
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.
15+
16+
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).
1517

1618
</Intro>
1719

@@ -46,6 +48,9 @@ This error message will only be shown once per install.
4648
</ConsoleLogLine>
4749
</ConsoleBlockMulti>
4850

51+
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.
52+
53+
## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/}
4954
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.
5055

5156
For existing apps, these guides will help you migrate to a client-only SPA:
@@ -54,27 +59,33 @@ For existing apps, these guides will help you migrate to a client-only SPA:
5459
* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes).
5560
* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
5661

57-
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.
62+
## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/}
5863

5964
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.
6065

61-
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).
66+
For existing apps, these guides will help you migrate to a build tool:
6267

63-
<Note>
68+
* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/)
69+
* [Parcel Create React App migration guide](https://stackoverflow.com/a/49605484)
70+
* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra)
71+
72+
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).
6473

65-
#### Do you recommend Vite? {/*do-you-recommend-vite*/}
74+
<DeepDive>
6675

67-
We provide several Vite-based recommendations.
76+
#### Do I need a framework? {/*do-i-need-a-framework*/}
6877

69-
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.
78+
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.
7079

71-
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).
80+
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.
7281

73-
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.
82+
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.
7483

75-
</Note>
84+
</DeepDive>
85+
86+
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).
7687

77-
## Limitations of Create React App {/*limitations-of-create-react-app*/}
88+
## Limitations of Build Tools {/*limitations-of-build-tools*/}
7889

7990
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.
8091

src/content/blog/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ You can also follow the [@react.dev](https://bsky.app/profiles/react.js) account
1414

1515
<BlogCard title="Sunsetting Create React App" date="February 13, 2025" url="/blog/2025/02/14/sunsetting-create-react-app">
1616

17-
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.
17+
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 ...
1818

1919
</BlogCard>
2020

src/content/learn/building-a-react-framework.md renamed to src/content/learn/build-a-react-app-from-scratch.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
---
2-
title: Building a React Framework
2+
title: Build a React app from Scratch
33
---
44

55
<Intro>
66

7-
If your app has constraints not well-served by existing frameworks, or you prefer to solve these problems yourself, you can build your own framework.
7+
If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a React app from scratch.
88

99
</Intro>
1010

11-
<Note>
11+
<DeepDive>
1212

13-
### Consider using an existing framework {/*you-should-probably-use-a-framework*/}
13+
#### Consider using a framework {/*consider-using-a-framework*/}
1414

15-
Building a framework is complex and requires extensive expertise across various domains. This complexity is not limited to React — it is a widespread challenge encountered by all UI libraries. Using an existing framework can save significant time and effort by allowing you to focus on building your application. Existing frameworks have tested, robust features and community support.
1615

17-
For a list of recommended frameworks, check out [Creating a React App](/learn/creating-a-react-app).
16+
Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for.
1817

19-
</Note>
18+
For example, if in the future your app needs support for server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC), you will have to implement those on your own. Similarly, future React features that require integrating at the framework level will have to be implemented on your own if you want to use them.
2019

21-
Building a framework is a large undertaking that often requires expertise in many different areas. Understanding your goals and requirements before starting to build your own framework can help guide your development process and save a considerable amount of time.
20+
Our recommended frameworks also help you build better performing apps. For example, reducing or eliminating waterfalls from network requests makes for a better user experience. This might not be a high priority when you are building a toy project, but if your app gains users you may want to improve its performance.
21+
22+
Going this route also makes it more difficult to get support, since the way you develop routing, data-fetching, and other features will be unique to your situation. You should only choose this option if you are comfortable tackling these problems on your own, or if you’re confident that you will never need these features.
23+
24+
For a list of recommended frameworks, check out [Creating a React App](/learn/creating-a-react-app).
2225

23-
For example, if you need to build a framework that integrates with a specific system or infrastructure, it's important to understand the features and limitations of those systems. Understanding your constraints can help guide your framework development process.
26+
</DeepDive>
2427

25-
If you are building your own framework to learn, using popular tools like Vite and React Router can be a good starting point and let you focus on how to combine different tools to build a framework.
2628

2729
## Step 1: Install a build tool {/*step-1-install-a-build-tool*/}
2830

src/content/learn/creating-a-react-app.md

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ If you want to build a new app or website with React, we recommend starting with
88

99
</Intro>
1010

11+
If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
12+
1113
## Recommended React frameworks {/*bleeding-edge-react-frameworks*/}
1214

1315
These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
@@ -96,21 +98,6 @@ Server Components and Suspense are React features rather than Next.js features.
9698

9799
</DeepDive>
98100

99-
<Note>
100-
101-
102-
#### Do you recommend Vite? {/*do-you-recommend-vite*/}
103-
104-
We provide several Vite-based recommendations.
105-
106-
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.
107-
108-
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).
109-
110-
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.
111-
112-
</Note>
113-
114101
-----
115102

116103
_If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._

src/content/learn/installation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ To try React locally on your computer, [download this HTML page.](https://gist.g
3636

3737
If you want to start a new React app, you can [create a React app](/learn/creating-a-react-app) using a recommended framework.
3838

39-
## Build a React Framework {/*build-a-react-framework*/}
39+
## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
4040

41-
If a framework is not a good fit for your project, or you prefer to start by building your own framework, you can [build your own React framework](/learn/building-a-react-framework).
41+
If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
4242

4343
## Add React to an existing project {/*add-react-to-an-existing-project*/}
4444

src/sidebarLearn.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
"path": "/learn/creating-a-react-app"
3030
},
3131
{
32-
"title": "Building a React Framework",
33-
"path": "/learn/building-a-react-framework"
32+
"title": "Build a React App from Scratch",
33+
"path": "/learn/build-a-react-app-from-scratch"
3434
},
3535
{
3636
"title": "Add React to an Existing Project",

vercel.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,11 @@
234234
"destination": "/learn/creating-a-react-app",
235235
"permanent": true
236236
},
237+
{
238+
"source": "/learn/building-a-react-framework",
239+
"destination": "/learn/build-a-react-app-from-scratch",
240+
"permanent": true
241+
},
237242
{
238243
"source": "/blog/2024/04/25/react-19",
239244
"destination": "/blog/2024/12/05/react-19",

0 commit comments

Comments
 (0)