Skip to content

Commit 3ba4f8c

Browse files
authored
Fix misspelling in cra blog post (#7496)
1 parent 7cf1f50 commit 3ba4f8c

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Today, we’re deprecating [Create React App](https://create-react-app.dev/) for
1717

1818
-----
1919

20-
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.
2121

2222
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.
2323

@@ -38,7 +38,7 @@ Starting today, if you install a new app, you will see a deprecation warning:
3838

3939
create-react-app is deprecated.
4040
{'\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
4242
For more info see: react.dev/link/cra
4343
{'\n\n'}
4444
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:
5656

5757
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.
5858

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

6161
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).
6262

@@ -90,7 +90,7 @@ export default function App() {
9090
}
9191
```
9292

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

9595
Most production apps need solutions to problems like routing, data fetching, and code splitting.
9696

@@ -143,21 +143,21 @@ There's a tradeoff being made here: the routing library adds complexity to the a
143143

144144
### Data Fetching {/*data-fetching*/}
145145

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

148148
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:
149149

150150
```js
151151
export default function Dashboard() {
152152
const [data, setData] = useState(null);
153-
153+
154154
// ❌ Fetching data in a component causes network waterfalls
155155
useEffect(() => {
156156
fetch('/api/data')
157157
.then(response => response.json())
158158
.then(data => setData(data));
159159
}, []);
160-
160+
161161
return (
162162
<div>
163163
{data.map(item => <div key={item.id}>{item.name}</div>)}
@@ -193,18 +193,18 @@ However, this requires correctly configuring the loaders in your app and trades
193193

194194
### Code Splitting {/*code-splitting*/}
195195

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

198198
This means your app is shipped as a single bundle:
199199

200200
```txt
201201
- bundle.js 75kb
202202
```
203-
203+
204204
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.
205205

206206
```txt
207-
- core.js 25kb
207+
- core.js 25kb
208208
- home.js 25kb
209209
- dashboard.js 25kb
210210
```
@@ -226,7 +226,7 @@ Optimized code-splitting is tricky to get right, and it's easy to make mistakes
226226

227227
### And more... {/*and-more*/}
228228

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

231231
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:
232232

@@ -251,15 +251,15 @@ Once you've integrated routing, data-fetching, and code splitting, you now also
251251
</ul>
252252
</div>
253253

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).
255255

256256
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.
257257

258258
## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/}
259259

260260
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.
261261

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".
263263

264264
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.
265265

@@ -269,7 +269,7 @@ Frameworks provide the same getting started experience as Create React App, but
269269

270270
#### Server rendering is optional {/*server-rendering-is-optional*/}
271271

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

274274
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.
275275

@@ -285,7 +285,7 @@ The frameworks we recommend also include support for React Server Components.
285285

286286
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).
287287

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

290290
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.
291291

@@ -295,15 +295,15 @@ See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data
295295

296296
#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/}
297297

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).
299299

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

302302
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.
303303

304304
</Note>
305305

306306
---
307307

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._
309309

0 commit comments

Comments
 (0)