You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2025/02/14/sunsetting-create-react-app.md
+23-12Lines changed: 23 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: "Sunsetting Create React App"
3
3
author: Matt Carroll and Ricky Hanlon
4
4
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.
6
6
---
7
7
8
8
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
11
11
12
12
<Intro>
13
13
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).
15
17
16
18
</Intro>
17
19
@@ -46,6 +48,9 @@ This error message will only be shown once per install.
46
48
</ConsoleLogLine>
47
49
</ConsoleBlockMulti>
48
50
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*/}
49
54
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.
50
55
51
56
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:
*[Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
56
61
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*/}
58
63
59
64
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.
60
65
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:
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).
64
73
65
-
#### Do you recommend Vite? {/*do-you-recommend-vite*/}
74
+
<DeepDive>
66
75
67
-
We provide several Vite-based recommendations.
76
+
#### Do I need a framework? {/*do-i-need-a-framework*/}
68
77
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.
70
79
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.
72
81
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.
74
83
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).
76
87
77
-
## Limitations of Create React App {/*limitations-of-create-react-app*/}
88
+
## Limitations of Build Tools {/*limitations-of-build-tools*/}
78
89
79
90
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.
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 ...
Copy file name to clipboardExpand all lines: src/content/learn/build-a-react-app-from-scratch.md
+12-10Lines changed: 12 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -1,28 +1,30 @@
1
1
---
2
-
title: Building a React Framework
2
+
title: Build a React app from Scratch
3
3
---
4
4
5
5
<Intro>
6
6
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.
8
8
9
9
</Intro>
10
10
11
-
<Note>
11
+
<DeepDive>
12
12
13
-
### Consider using an existing framework {/*you-should-probably-use-a-framework*/}
13
+
####Consider using a framework {/*consider-using-a-framework*/}
14
14
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.
16
15
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.
18
17
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.
20
19
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).
22
25
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>
24
27
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.
26
28
27
29
## Step 1: Install a build tool {/*step-1-install-a-build-tool*/}
Copy file name to clipboardExpand all lines: src/content/learn/creating-a-react-app.md
+2-15Lines changed: 2 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,8 @@ If you want to build a new app or website with React, we recommend starting with
8
8
9
9
</Intro>
10
10
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).
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.
96
98
97
99
</DeepDive>
98
100
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
-
114
101
-----
115
102
116
103
_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+)._
Copy file name to clipboardExpand all lines: src/content/learn/installation.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -36,9 +36,9 @@ To try React locally on your computer, [download this HTML page.](https://gist.g
36
36
37
37
If you want to start a new React app, you can [create a React app](/learn/creating-a-react-app) using a recommended framework.
38
38
39
-
## Build a React Framework {/*build-a-react-framework*/}
39
+
## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
40
40
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).
42
42
43
43
## Add React to an existing project {/*add-react-to-an-existing-project*/}
0 commit comments