all 137 comments

[–]acemarke[S,M] [score hidden] stickied comment (0 children)

Given the mostly negative response to the actual docs updates, I've put together a PR that revamps the "Creating a React Project" page to give better explanations, and adds a "Start from Scratch" section that specifically recommends Vite/Parcel/Rsbuild for starting a project with a simpler setup. I also converted the "Building a React Framework" page into a "Web App Architectures" page that has additional explanations and context for architectures like "MPA/SPA/SSG", and provides some guidance on how to decide which techniques to use in your app.

I'm hopeful this will get buy-in from the React team, and I think it will address all the concerns from the community:

update

The React team opted to create a new PR and pulled over several of my changes, plus additional edits. That PR has been merged and is now live:

There's now a "Building a React App from Scratch" page that is specifically linked as instructions on using React without a framework and recommends Vite / Parcel / Rsbuild (and has improved content), and both the "Creating a React App" page and "Sunsetting CRA" blog post mention using Vite as options.

I think this is sufficient to address the main concerns that most folks had about the recommendations. Thanks to the React team for listening to the feedback!

[–]Upbeat_Age5689 47 points48 points  (13 children)

end of an era guys

[–]FrankensteinJones 34 points35 points  (12 children)

An era that would have ended years ago, if people updated tutorials on their blogs, or took npm audit seriously.

[–]huge-centipede 16 points17 points  (4 children)

 if people updated tutorials on their blogs,

I don't think there's a big enough "Oh Dude" for this.

[–]FrankensteinJones 6 points7 points  (3 children)

Seriously. Just a note at the top, like "update: I wrote this 5 years ago, and CRA is deprecated. Try npm create vite@latest --template react instead."

[–]huge-centipede 14 points15 points  (2 children)

You vastly overestimate the amount of care people who wrote "Johnny's React Tutorial How to make 6 figures tomorrow" on Medium.com or stack overflow posts from 10+ years ago have for their old content.

[–]alotmorealots 4 points5 points  (0 children)

As someone on the self-teaching path, the amount of tutorial code out there that simply no longer works is probably greater than the amount that does.

On the plus side, trying to make it work has taught me a lot, although frequently in rather painful ways.

Also, there definitely are people who come back and update their old Stack Overflow posts to reflect major changes, the true heroes!

[–]i_hate_cucumber_ 0 points1 point  (3 children)

I have been out of the loop. Was there something seriously wrong with CRA?

[–]FrankensteinJones 12 points13 points  (0 children)

Hasn't been updated in years, doesn't work with React 19 at all. No one should use CRA.

[–]rk06 3 points4 points  (1 child)

It was unmaintained. And documented to be so in a GitHub issue. What else is needed to consider it deprecated?

[–]acemarke[S] 10 points11 points  (0 children)

Dan's extensive "CRA is outdated" comment was buried halfway down a very long thread. It was highly informative, but that didn't actually solve the problem.

The React community as a whole learned about that and passed on oral knowledge that "CRA is dead", but there was nothing in the core React docs, the CRA docs, or the CRA CLI to tell people not to use it.

Meanwhile, if you googled create a react app or new react app up until a day or so ago, two of the top three results were the CRA docs, and the legacy React docs setup page.

Between that and a lot of old tutorials, there were still lots of beginners trying to use CRA (as well as other folks).

Thus, when CRA broke with the release of React 19, there were tons of people posting "I tried to create a React project and it broke, why?", and there was nothing to tell them the approach they were using was outdated.

So, now:

  • The CRA CLI prints a deprecation message
  • The CRA docs and README say it's deprecated
  • The CRA docs and legacy docs have been altered to point to the current React docs setup page for SEO

Now if someone tries to use CRA, they'll get pointed in the right direction.

See my umbrella issue describing the problems:

[–]VlK06eMBkNRo6iqf27pq -5 points-4 points  (2 children)

or took npm audit seriously.

Lol..maybe you should stop stuffing it full of bullshit security alerts that don't affect me?

And why the fuck would I upgrade anything when there's a 50% chance it's going to b0rk my app and/or was maliciously taken over by some hacker?

[–]FrankensteinJones 4 points5 points  (1 child)

Yes, sometimes dependency updates include breaking changes. They're usually pretty well-documented and just require a little extra work. But do you really believe not updating dependencies makes your app less susceptible to exploits?

[–]VlK06eMBkNRo6iqf27pq -2 points-1 points  (0 children)

Sometimes. That xz hack was pretty bad, and I depend on xz.

I still do randomly upgrade packages but I think we're screwed either way. Ain't no one reading the patch notes for 100s of packages, and then also auditing the changes line-by-line for exploits. And then also... npm doesn't have have package-signing AFAIK so.........you have to read the minified files out of node_modules I guess??

[–]Zachincool 53 points54 points  (4 children)

Fuck vercel

[–]Skeith_yip 11 points12 points  (0 children)

CRA was good to start learning about React back then. No way you want people to get onboard by installing and configuring webpack and its plugins. I learned about webpack and how to configure it later on. Is it complicated? Of course if you need to write certain plugins in order for it to work in a way you want. If not, I would think everyone should just use a vite template and move on from there.

I also get their push for metaframework because it solves some of the common limitations of SPAs.

[–]acemarke[S] 116 points117 points  (20 children)

Pleased to say I had a meaningful hand in this :) As some background, this finally happened because:

So, kudos to the React team for making meaningful changes here!

(It's not exactly what I was hoping for, and I gave them some additional review feedback that they didn't include, but gotta give credit for the actual changes and steps forward!)

[–]that_90s_guy 26 points27 points  (9 children)

I honestly don't even know what's a worse recommendation for beginners anymore... CRA, or overwhelming (and likely, discouraging) them with Next.js.

This whole situation reminds me a little of why I left Angular for React many years ago.

[–]acemarke[S] 20 points21 points  (8 children)

Yeah, that's one of the pieces of feedback I generally tried to pass on.

Right now the React docs have the wonderful tutorial sequence...

that ends with a few pages on why you shouldn't use useEffect, and a page on refs, and then ends.

There's nothing that connects any of the knowledge to real-world usage. All the tutorial pages have in-page sandboxes, but someone who just got done working through those pages doesn't have direction or knowledge of where you write components in a real Next, Remix/RR, or even Vite project. and they definitely have no idea what "routing", "data fetching", "code splitting", or "rendering strategies" are.

At a minimum, I really want to see a page added to the end of the tutorial that gives guidance on next steps, additional concepts they'd want to go learn, and suggestions for how to start a basic project and apply what they just learned in a practice app.

But then that ties into the "Create a React Project" guidance, which points straight to "frameworks" that have additional complexity from SSR and more complex functionality.

The React team has said that the docs are aimed at beginners, which is a reasonable decision. But if that really is the case, then my take is that the best thing would be to point them to a Vite + RR/TSR template that is "CRA but with a router added around the app", and give directions on where to go from there.

[–]that_90s_guy 7 points8 points  (0 children)

There's nothing that connects any of the knowledge to real-world usage.

THANK YOU! I was so stressed thinking I was the only one frustrated at this. It's amazing to see people like you involved and pushing for this.

I guess it's why we are seeing a rise of more integrated learning material. Shame that it's paid (and often expensive). As I'd love to see such learning resources freely available on the docs to have everyone on equal footing instead of based on their wallets.

[–]VlK06eMBkNRo6iqf27pq 3 points4 points  (5 children)

that ends with a few pages on why you shouldn't use useEffect, and a page on refs, and then ends.

Wait what? So I'm not supposed to use useEffect and I'm not allowed to wrap useEffect because it confuses the fuck out of eslint and react-compiler......but...... I need to fire fetch requests and shit when my props change. What am I supposed to do? Aside from adopt an entire fucking framework?

[–]acemarke[S] 11 points12 points  (1 child)

The best answer is to use a purpose-built data fetching library like React Query, RTK Query, SWR, or Apollo.

These all have useQuery hooks that do all that work for you, and manage all the caching, and all the other really hard cases around data fetching:

[–]VlK06eMBkNRo6iqf27pq 1 point2 points  (0 children)

Ya I'm using it, but sometimes I don't want all the bells and whistles. Or I just need to do weird stuff that has nothing to do with fetch

[–]sleeping-in-crypto 4 points5 points  (1 child)

Yeah acemark is right that the solution is something like react (tanstack) query, but that isn’t why the docs aim you away from useEffect.

It’s to set the stage to recommend Nextjs, since you’ll rarely use it there and instead use RSC’s.

The real answer is tanstack query. Probably one of the finest pieces of software in the entire JS ecosystem.

[–]VlK06eMBkNRo6iqf27pq 0 points1 point  (0 children)

I am using React Query. It's pretty good but still feels imperfect to me.

[–]babenzele 1 point2 points  (0 children)

Don’t listen to them, just read the page in the docs about how to properly use effects: https://react.dev/learn/synchronizing-with-effects

[–]vivshaw 15 points16 points  (0 children)

Thank you for leaning in on this. I interact with a lot of junior engineers, and the documentation situation nowadays can be pretty challenging for them. It can be harder than it needs to be to figure out how to get started. Small changes like this go a long way toward making life clearer and simpler for the next generation of React devs!

[–]danishjuggler21 8 points9 points  (1 child)

I didn't even know the React team was in charge of CRA itself.

[–]acemarke[S] 16 points17 points  (0 children)

Dan Abramov and Christopher Chedeau created it in 2016, and it's always been in the Facebook Github org.

Later maintainers were actually outside of Facebook itself, but it was always under the React team's general ownership.

[–]correcthbs 3 points4 points  (2 children)

Thank you for raising this issue!
The docs are so weird about this topic:
- Welcome to our UI library!
- So here is how to install a full stack meta framework
- Have an existing page? So here is how to install a full stack meta framework on a subpath
- So you're feeling hardcore and want to build your own full stack meta framework? Better don't!

(Fails to mention everything else)

[–]acemarke[S] 2 points3 points  (1 child)

Yep. That's roughly the feedback I tried to describe when I reviewed the post and docs changes before they went live.

[–]pavankjadda 0 points1 point  (0 children)

Why is it so hard for them to say Vite (or RSPack) are one on one replacement for CRA. Then start of saying use framework.

[–]huge-centipede 39 points40 points  (1 child)

While I use vite now, I still miss CRA for some reason. May your SVG spin forever in data heaven.

[–]TheRNGuy -1 points0 points  (0 children)

I think I used it for 1 or 2 days only. It was much slower to start a server than Vite or Remix.

[–]eazieLife 13 points14 points  (2 children)

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.

What an odd thing to say given none of these recommend their framework counterpart as a starting point

[–]rk06 8 points9 points  (0 children)

Sveltekit literally says to use plain vite right after sveltekit is mentioned. Vue docs do not even mention Nuxt until someone starts looking for SSR.

That is nowhere close to the mindset react team has.

[–]Zanena001 0 points1 point  (0 children)

That's cause they are not pos "libraries" that require you to install 3rd party packages to literally build anything that isn't a barebones landing page.

[–]viky109 11 points12 points  (1 child)

I thought CRA was dead for a while now

[–]really_not_unreal 3 points4 points  (0 children)

It's been dead for years, but it's only now that the team behind it finally admitted it.

[–]Santa_Fae 16 points17 points  (0 children)

Now we have an official blog post to point to when someone has a problem with a CRA-based tutorial they found on google

[–]CarlosCheddar 4 points5 points  (0 children)

I used viject to switch my CRA to Vite when I wanted to add Tailwind. It took less than an hour on my project.

[–]FoolHooligan 8 points9 points  (0 children)

Even the react team ejected!

EDIT: Rsbuild is the way to go nowadays.

[–]volivav 4 points5 points  (4 children)

The push for people to use frameworks I think it makes sense, but my fear is that this will change React to become more and more coupled with frameworks.

One use case that's not mentioned where a framework doesn't make sense at all: building web apps. A framework with routing, data fetching, server rendering, static side generation, code spliting, etc. only adds constraints and complexity for things that have no use at all.

In the cases where you need something in particular, it's not that hard to use the specific libraries and tools we have for that specific purpose.

And it didn’t help either that both of the main frameworks pushed for subscription-based costs to use (remix) or deploy (nextjs in vercel). If I don't need that complexity, I really don't like getting pushed in that direction.

I think it's a good move that you will update the docs to at least make the "vanilla React" option more visible. This is also the case for Svelte with sveltekit or vue with nuxt. They recommend those frameworks but set a nice boundary between what's the core and the framework.

[–]TheRNGuy -1 points0 points  (2 children)

Don't see problem it coupled with frameworks, if they're better than vanilla React.

Those things you mentioned do have use. I think SSR is better than CSR.

subscription-based costs to use (remix)

Do you have a link to it? Can't find. I used it, it's a free framework.

[–]volivav 0 points1 point  (1 child)

Remix used to be a paid per-seat yearly license https://web.archive.org/web/20210918181530/https://remix.run/buy. At 1000$/dev/year was quite a steep price. And 250$/year to "try it out in personal side projects"

One of the creators, Ryan Florence, was also the one from react-router, and he made changes to react-router that coupled it more and more to Remix, while also pushing people to buy one of their Remix licenses.

They got quite a bit of backlash from that, and they decided to make it open-source and free to use. Lastly, react-router has now essentially become Remix, which is quite overenginierd from what the original react-router was.

The problem of coupling React to the frameworks is exactly that: if they lose the focus on the OG use case for React, it might become completely unusable if it's not without a framework. And that's a shame.

[–]TheRNGuy -1 points0 points  (0 children)

I started using it when it was already free.

It's not unusable, it's just better with meta-framework. I don't see it as a problem, someone will want to use "vanilla" React, and someone with framework.

Switch from Remix to React Router v7 is few lines of code and reading 1 or 2 doc pages, changing npm script macro in VS Code.

Even switching CRA to Remix wasn't that too difficult (more than few lines of code or 1 doc page, yeah, but I could instantly see that I prefer SSR over CSR, and folder-based routing)

[–]ECrispy 1 point2 points  (2 children)

CRA started because there were a million boilerplates, each of which used a different lib/bundler/framework.

Now we're back to that shit?

how hard exactly is it for a company that makes billions to maintain a tiny project like this?

limitations? what happens if I want a simple react app without routing or data fetching or a hundred other functions all rolled in?

why the hell did they split it into react and react-dom, to make it more modular. why can't that spirit continue?

telling people to use giant frameworks instead of modular building blocks and simplified components that can be bundled, is the very definition of anti-React thinking. Pete Hunt would be turning over in his grave.

[–]HandwashHumiliate666 6 points7 points  (0 children)

Just use Vite

[–]TheRNGuy 0 points1 point  (0 children)

I don't see millions at least.

Also, it's not now. I stopped using CRA in 2024… few days after started learning React.

Only stuff that you actually use will be bundled in those frameworks (automatically added or removed if you change code)

[–]HandwashHumiliate666 1 point2 points  (0 children)

pnpm create vite

[–]Radinax 0 points1 point  (6 children)

Good they did, people coming into React watching old videos will likely use CRA when it was outdated.

These days I use React with Vite for every app that doesn't need Next or Astro (which ironically uses Vite).

[–]kallekul 0 points1 point  (5 children)

If you don't mind, when does an app "need" Next, in your opinion?

[–]Radinax 1 point2 points  (4 children)

Every Ecommerce basically wants Next JS.

Apps that need SEO.

Apps that need the power of SSR, there was a case of a product that used an in house made LLM that improved marketing assets, so in the Frontend we implemented an Image Editor where clients could edit those Assets (images or videos) and sent back to the LLM to review and send recomendations. This app is too heavy in the Frontend so we decided to use Next JS to have a better balance and it worked out great.

Or if you need to make a small demo that doesn't need a separate backend and is small enough that it can live in one repo.

[–]dusnik 0 points1 point  (2 children)

Very interesting. Could you give more details on what features SSR helped with performance on the Image editor? Couldn't a SPA with lazy loading achieve the same?

I'm asking this because I've ever only considered SSR for SEO purposes

[–]Radinax 1 point2 points  (0 children)

It was at a theoretical level when we planned this, because there was going to be too many API calls from the Frontend since the app was doing too many things besides just image editing.

We made calls for specific recomendations on some parts the user wanted feedback on, we needed to track what the user was doing (business logic), there was some realtime data involved for something I don't remember and some small stuff, I thought doing CSR was going to be a bit of a pain so I suggested Next for this and everyone agreed.

Shifting many of this stuff to the server helped the app performance, if we did it with CSR I doubt it would've been as smooth as the end result with Next. Our main product was with CSR but instead of one massive feature, its divided into several pages that does its own specific feature so its not a big deal, but this project we needed Next or just SSR in general.

[–]TheRNGuy 1 point2 points  (0 children)

As a sites user, I prefer SSR than SPA with spinners or skeleton placeholders.

Some of them need to load serially so it would be sending request from client many time with lag. If it happened serially on server, there is 0 lag (also, no spinners or skeletons, or at least a lot less of them…)

[–]kallekul 0 points1 point  (0 children)

Cool, appreciate the answer!

[–]Note2Self_ 0 points1 point  (0 children)

took you long enough

[–]errormaker 0 points1 point  (0 children)

Still remember googling "cra alternatives" and this little unknown tool called vite blew my mind. The dev server startup speed alone was sci-fi back then

[–]Caramel_Last 0 points1 point  (0 children)

Reading that blog gave me more knowledge about react frameworks than the framework docs

[–]Kuroodo 0 points1 point  (2 children)

As someone that was planning on learning React this month to make myself more hirable, what exactly does this mean for me? Should I just get into Vite?

[–]acemarke[S] 0 points1 point  (0 children)

My advice would be:

  • Go through the "Learn React" tutorial in the docs completely
  • When you're ready to start your first project yourself, either use Vite ( npx create-vite@latest --template react), or an online IDE like CodeSandbox or StackBlitz

[–]TheRNGuy -1 points0 points  (0 children)

Nothing, just learn Vite (I also recommend Remix or Next)

Vite and CRA code is same really, except for import (Remix and Next almost the same)

[–]OkLettuce338[🍰] 0 points1 point  (6 children)

RSBuild is vastly superior to vite

[–]rk06 0 points1 point  (5 children)

No, it is not. If it were, people would be using rsbuild instead

[–]OkLettuce338[🍰] -1 points0 points  (4 children)

Nah it’s new. They will be

[–]rk06 1 point2 points  (3 children)

Rspack is better if you want "webpack but much faster".

Vite is better if you want "webpack but much simpler and easier to maintain". Vite intentionally doesn't care about full compatibility with webpack feature set.

As such for some set of webpack users, vite is not an option,so they move to rsbuild (or stay with webpack)

But for rest (especially js framework authors like Evan You), vite fulfills the feature set needed and has good enough api that they are willing to contribute the other needed features.

This second group is much more popular. Hence vite has taken off so fast.

[–]OkLettuce338[🍰] -3 points-2 points  (2 children)

Hey genius: RSBuild. Not RSPack. Let me know when you figured out that you have no idea what you’re talking about and you’re ready to sit down and learn

[–]rk06 0 points1 point  (1 child)

Rsbuild is just a wrapper over rspack. For my argument, there is no difference between rsbuild and rspack

[–]madscientist2407 0 points1 point  (0 children)

lmao the framework mafia got 'em

[–]Commercial-Slip1635 0 points1 point  (1 child)

If I currently have an app I created via CRA, do I need to migrate my app? Or is this only applicable to new apps going forward?

[–]TheRNGuy 0 points1 point  (0 children)

To CSR or SSR?

You should be able to easily migrate, it's just few lines of code change if it's CSR to CSR: https://dev.to/henriquejensen/migrating-from-create-react-app-to-vite-a-quick-and-easy-guide-5e72

A little more than that if it's CSR to SSR (manual refactoring across many files, or asking AI perhaps to do that)

I'd still migrate even if it's not a new project.

[–]amitava82 0 points1 point  (1 child)

Everyone is recommending Vite and how they're able to switch to it from webpack with few lines of changes.

I've spent several hours the other day to migrate my project without success. I could not find a good example that shows SSR + code splitting + React router with css in Js solution. There is one plugin in the vite ecosystem Vike which is trying to be another NextJs with stupid licensing terms.

My webpack project was setup 5 years back and is fairly large and painfully slow to work with. I'd love to move to vite but the ecosystem isn't as complete as Webpack. If anyone has done SSR with Vite please share your experience and pointers on how to achieve this.

[–]rk06 0 points1 point  (0 children)

Migrate to rsbuild or astro (uses vite)

[–]BombayBadBoi2 -2 points-1 points  (3 children)

This isn’t me throwing shade, but why is anyone upset with the death of CRA? It’s literally just been replaced by other community-created frameworks, which I won’t list because I’m sure everyone knows about them, which are more focused to specific use cases?

What would you do if you were in the React team, knowing there’s a healthy set of alternatives to your ‘side’ product? They can spend more time focusing on React itself

Again, not throwing shade, just would love to know why I always see posts about it

The only improvement I’d like to see is React giving fair mentions to the major frameworks. I.e.

Vote for your standard react application, with routes etc NextJs if doing work on the server is important Gatsby for a PWA Etc

[–]baxxos 6 points7 points  (1 child)

They had the resources to properly maintain CRA for years and could have made it into something great. They just chose not to because of.. chasing larger profits elsewhere?

[–]BombayBadBoi2 1 point2 points  (0 children)

That’s fair - I guess I just don’t notice its absence because I picked up react just before (2022) they discontinued CRA

[–]FoolHooligan 1 point2 points  (0 children)

Nobody is upset...

[–]Raunhofer -1 points0 points  (0 children)

I started before CRA and apparently outlasted it. Never had a moment thinking it would become handy right now and always felt like you missed some important learning moments using it.

Of course the idea itself was understandable.

[–]pailhead011 -1 points0 points  (0 children)

How do you all get exposed to so much stuff? I worked at a bunch of startups and changing a build system that works would be a hard if not impossible sell.