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
When we released Create React App in 2016, there was no clear way to build a new React app.
20
+
When we released Create React App in 2016, there was no clear way to build a new React app.
21
21
22
22
To create a React app, you had to install a bunch of tools and wire them up together yourself to support basic features like JSX, linting, and hot reloading. This was very tricky to do correctly, so the [community](https://github.com/react-boilerplate/react-boilerplate)[created](https://github.com/kriasoft/react-starter-kit)[boilerplates](https://github.com/petehunt/react-boilerplate) for [common](https://github.com/gaearon/react-hot-boilerplate)[setups](https://github.com/erikras/react-redux-universal-hot-example). However, boilerplates were difficult to update and fragmentation made it difficult for React to release new features.
23
23
@@ -38,7 +38,7 @@ Starting today, if you install a new app, you will see a deprecation warning:
38
38
39
39
create-react-app is deprecated.
40
40
{'\n\n'}
41
-
You can find a list of up-to-date React frameworks on react.dev
41
+
You can find a list of up-to-date React frameworks on react.dev
42
42
For more info see: react.dev/link/cra
43
43
{'\n\n'}
44
44
This error message will only be shown once per install.
@@ -56,7 +56,7 @@ For existing apps, these guides will help you migrate to a client-only SPA:
56
56
57
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.
58
58
59
-
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 or Parcel.
59
+
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 or Parcel.
60
60
61
61
To help users get started with Vite or Parcel, 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).
62
62
@@ -90,7 +90,7 @@ export default function App() {
90
90
}
91
91
```
92
92
93
-
This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app.
93
+
This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app.
94
94
95
95
Most production apps need solutions to problems like routing, data fetching, and code splitting.
96
96
@@ -143,21 +143,21 @@ There's a tradeoff being made here: the routing library adds complexity to the a
143
143
144
144
### Data Fetching {/*data-fetching*/}
145
145
146
-
Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data.
146
+
Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data.
147
147
148
148
But doing this means that the data is fetched after the component renders, which can cause network waterfalls. Network waterfalls are caused by fetching data when your app renders instead of in parallel while the code is downloading:
149
149
150
150
```js
151
151
exportdefaultfunctionDashboard() {
152
152
const [data, setData] =useState(null);
153
-
153
+
154
154
// ❌ Fetching data in a component causes network waterfalls
@@ -193,18 +193,18 @@ However, this requires correctly configuring the loaders in your app and trades
193
193
194
194
### Code Splitting {/*code-splitting*/}
195
195
196
-
Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all.
196
+
Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all.
197
197
198
198
This means your app is shipped as a single bundle:
199
199
200
200
```txt
201
201
- bundle.js 75kb
202
202
```
203
-
203
+
204
204
But for ideal performance, you should "split" your code into separate bundles so the user only needs to download what they need. This decreases the time the user needs to wait to load your app, by only downloading the code they need to see the page they are on.
205
205
206
206
```txt
207
-
- core.js 25kb
207
+
- core.js 25kb
208
208
- home.js 25kb
209
209
- dashboard.js 25kb
210
210
```
@@ -226,7 +226,7 @@ Optimized code-splitting is tricky to get right, and it's easy to make mistakes
226
226
227
227
### And more... {/*and-more*/}
228
228
229
-
These are just a few examples of the limitations of Create React App.
229
+
These are just a few examples of the limitations of Create React App.
230
230
231
231
Once you've integrated routing, data-fetching, and code splitting, you now also need to consider pending states, navigation interruptions, error messages to the user, and revalidation of the data. There are entire categories of problems that users need to solve like:
232
232
@@ -251,15 +251,15 @@ Once you've integrated routing, data-fetching, and code splitting, you now also
251
251
</ul>
252
252
</div>
253
253
254
-
All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
254
+
All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
255
255
256
256
Solving each of these problems individually in Create React App can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas users may not be familiar with. In order to solve these problems, users end up building their own bespoke solutions on top of Create React App, which was the problem Create React App originally tried to solve.
257
257
258
258
## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/}
259
259
260
260
Although you could solve all these pieces yourself in a build tool like Create React App, Vite, or Parcel, it is hard to do well. Just like when Create React App itself integrated several build tools together, you need a tool to integrate all of these features together to provide the best experience to users.
261
261
262
-
This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks".
262
+
This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks".
263
263
264
264
Frameworks impose some opinions about structuring your app in order to provide a much better user experience, in the same way build tools impose some opinions to make tooling easier. This is why we started recommending frameworks like [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/), and [Expo](https://expo.dev/) for new projects.
265
265
@@ -269,7 +269,7 @@ Frameworks provide the same getting started experience as Create React App, but
269
269
270
270
#### Server rendering is optional {/*server-rendering-is-optional*/}
271
271
272
-
The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app.
272
+
The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app.
273
273
274
274
In some cases, CSR is the right choice for a page, but many times it's not. Even if most of your app is client-side, there are often individual pages that could benefit from server rendering features like [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) or [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), for example a Terms of Service page, or documentation.
275
275
@@ -285,7 +285,7 @@ The frameworks we recommend also include support for React Server Components.
285
285
286
286
Server Components help solve these problems by moving routing and data fetching to the server, and allowing code splitting to be done for client components based on the data you render, instead of just the route rendered, and reducing the amount of JavaScript shipped for the best possible [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
287
287
288
-
Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app.
288
+
Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app.
289
289
290
290
See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) and [the docs](/reference/rsc/server-components) for more info.
291
291
@@ -295,15 +295,15 @@ See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data
295
295
296
296
#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/}
297
297
298
-
A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO).
298
+
A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO).
299
299
300
-
While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen.
300
+
While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen.
301
301
302
302
This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance.
303
303
304
304
</Note>
305
305
306
306
---
307
307
308
-
_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florance](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._
308
+
_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._
0 commit comments