Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Create React App recommendation with Vite #5487

Closed
wants to merge 2 commits into from

Conversation

t3dotgg
Copy link

@t3dotgg t3dotgg commented Jan 21, 2023

Create React App is not a great recommendation to be making, especially for newer developers.

As an educator, I run into countless issues w/ new React devs running into unnecessary issues due to the continued recommendation of CRA. I made a tweet about this and was amazed by the amount of devs who agree

I'm in no way attached to the specific changes I made here, mostly opening this in hopes of a discussion around the technologies recommended in the new Beta docs.

@github-actions
Copy link

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

This PR introduced no changes to the javascript bundle 🙌

Copy link

@capaj capaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@devongovett
Copy link
Contributor

Totally agree that there are good alternatives to CRA now and React should more prominently feature them. However, as maintainer of Parcel, an alternative to Vite, I would appreciate if React did not play favorites (also with Next.js vs other frameworks). Since CRA was maintained by the React team it kinda made sense, but harder when it's not. Maybe a small description of each option with more details about what it's best for and the tradeoffs vs other options would be good?

Like "if you're building an SPA, Vite and Parcel are good options. Vite is a bundle-less dev server that works with React and other frameworks ... Parcel is an easy to use bundler that works great with React ... If you're building a server rendered app, Next.js and Remix are good options. Next.js is a React framework with file system routing, server components, ... Remix is a React framework focused on web standards ... If you're building a static website, Gatsby is a good option. Gatsby is ..." These are really rough descriptions. Might wanna contact the authors of these tools for a short summary.

@david0178418
Copy link
Contributor

Most would agree that the recommendation of CRA needs to be removed, considering it's a dead repo. But recommending a less optimal solution might be about as bad for a beginner as multiple recommendations.

My completely subjective, gut feel is that vite should be that recommendation. But any active project would be fine. Multiple will just result in analysis paralysis, which kills beginners. More advanced users will find other projects on their own.

At the very minimum, a single recommendation should be made for beginners and any other recommendations segmented away for more advanced devs to investigate for their specific need.

@sebastiancarlos
Copy link

sebastiancarlos commented Jan 22, 2023

@devongovett I agree. I would like to see a brief description of each option and avoid playing favorites, except, of course, for the inevitable placement of the options in a list which (despite using the <ul> unordered tag) is, in fact, ordered by the mere observance of the vertical dimension in our pitiful spacetime existence.

But I want to point out an issue of almost equal importance, which I believe @t3dotgg can amend in this very PR by swapping just two lines. That is: Let's put Parcel above CRA. (If not outright removing CRA, as @david0178418 bravely suggest)

As it stands, Parcel's DX is leagues ahead of CRA:

  • A cursory glance at CRA's issues tab should suffice as a demonstration of its state. A sort by comment and a deep dive into glaringly offensive issues is recommended only to the masochists among us.
  • Parcel has important and fancy features (Features that speak to the spirit of our ages, ladies and gentlemen!) that not even Vite possesses to the same degree, like a built-in world-class browser extension support.

@mattwilkinsonn
Copy link

Quick preface: I am not associated with the React / CRA projects, just offering my two cents.

@devongovett

Totally agree that there are good alternatives to CRA now and React should more prominently feature them. However, as maintainer of Parcel, an alternative to Vite, I would appreciate if React did not play favorites (also with Next.js vs other frameworks). Since CRA was maintained by the React team it kinda made sense, but harder when it's not. Maybe a small description of each option with more details about what it's best for and the tradeoffs vs other options would be good?

Like "if you're building an SPA, Vite and Parcel are good options. Vite is a bundle-less dev server that works with React and other frameworks ... Parcel is an easy to use bundler that works great with React ... If you're building a server rendered app, Next.js and Remix are good options. Next.js is a React framework with file system routing, server components, ... Remix is a React framework focused on web standards ... If you're building a static website, Gatsby is a good option. Gatsby is ..." These are really rough descriptions. Might wanna contact the authors of these tools for a short summary.

That's a lot to digest for someone who is just learning what React is. Many of the "new React devs" @t3dotgg mentions aren't going to know what most of those words mean, or if they need them. That's why CRA is useful, it's a one-stop "here's a React app, no other stuff" tool.

That being said - @t3dotgg I'd suggest expanding on what the "countless issues" you are experiencing with CRA are. A Tweet with a bunch of engagement isn't really a justification, and this PR just comes off as inflammatory in it's current state.

I'd also suggest people stop "Approving" this if you aren't part of the React team, you aren't helping anyone by doing so.

@david0178418
Copy link
Contributor

david0178418 commented Jan 22, 2023

@mattwilkinsonn the issue is that there are a myriad of issues that can't be resolved when a project is dead.

Check the last year of activity. The last commit was in Sept last year. But there are 1.5k filed issues and over 400 prs lying idle that could be resolving problems. That not ideal for beginners who would have pain trying to debug these.

@devongovett
Copy link
Contributor

devongovett commented Jan 22, 2023

That's a lot to digest for someone who is just learning what React is.

I agree with that, but I also think React is used for a lot of different use cases, and there isn't a one-size-fits-all tool. It's important for beginners to know what the tradeoffs are so they can make an informed choice. A lot of current CRA users should really be using a server rendered framework, and conversely, some apps using server rendering might be better off with an SPA or static site (this is not intended to spur a debate 😉). As shown by CRA's popularity, React's recommendations have a lot of weight.

The "Getting started" section in the current docs doesn't really show much other than an install command and linking to the CRA docs, and the next.js section only links to the next.js docs. The other tools only have links and no explanation about when you should use them. I think it would be helpful to explain what each tool does and why you should use it. One of the points about a tool could be "it's good if you're just getting started with React", so there could still be a recommendation for that as well.

@Ryntak94
Copy link

It's important for beginners to know what the tradeoffs are so they can make an informed choice.

I don't think this is the case. It's not important to understand the intricacies when you're just getting started. Once you have a foundational understanding of the technology, it's great to be able to go and learn about the different directions/branches you can go down with the technology but that's only once you have an idea of what you're doing. These things are not necessary for a beginner to understand.

And if you're talking about someone who is new to React but experienced in web development, then I wouldn't be calling them a beginner.

@devongovett
Copy link
Contributor

devongovett commented Jan 22, 2023

This page is not only for beginners. In fact, if you read the whole thing, it already covers many aspects of this. There are descriptions of what a bundler does, what a minifier does, etc. There is also already a distinction between "minimal toolchains" and "frameworks". All I am suggesting is that there are similar descriptions for each tool listed with the use cases that it is good for. That doesn't preclude having a recommendation for "learning React" at all. At the same time, it helps beginners understand the confusing landscape of tools out there.

@dir
Copy link

dir commented Jan 22, 2023

Totally agree that there are good alternatives to CRA now and React should more prominently feature them. However, as maintainer of Parcel, an alternative to Vite, I would appreciate if React did not play favorites (also with Next.js vs other frameworks). Since CRA was maintained by the React team it kinda made sense, but harder when it's not. Maybe a small description of each option with more details about what it's best for and the tradeoffs vs other options would be good?

Like "if you're building an SPA, Vite and Parcel are good options. Vite is a bundle-less dev server that works with React and other frameworks ... Parcel is an easy to use bundler that works great with React ... If you're building a server rendered app, Next.js and Remix are good options. Next.js is a React framework with file system routing, server components, ... Remix is a React framework focused on web standards ... If you're building a static website, Gatsby is a good option. Gatsby is ..." These are really rough descriptions. Might wanna contact the authors of these tools for a short summary.

I'm inclined to agree with @mattwilkinsonn's point about this being far too wordy for a new developer. However, I do agree that the docs shouldn't necessarily be opinionated about any one approach.

* [Parcel](https://parceljs.org/getting-started/webapp/)

> Vite's default templates don't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because this template can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could add on frameworks the usage of Nx Framework which includes Vite by default in React applications

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could add on frameworks the usage of Nx Framework which includes Vite by default in React applications

Nx for a beginner???

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually you can see Nx as starter up as standalone app in version 15. You folks tied Nx to monorepo angular projects, but now Nx is much more than that.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nexxeln yep. "Standalone apps" support doesn't involve monorepos (which Nx might be mostly known for).

I published an article on that topic two weeks ago that addresses exactly this issue: https://dev.to/nx/react-vite-and-typescript-get-started-in-under-2-minutes-56f 😃

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So lets, make NX the recommended approach for react, it also handles migrations etc which is more than others offer. Plus thanks to community work you not limiting to a set bundler. You have SWC, vite, parcel and webpack. NX also working on remix if im not mistake @juristr...

PLUS nx moving from Angular to React so makes sense 😂

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would say we want avoid throwing these concepts at beginners:

  • monorepos (not required but still very present in docs)
  • choosing a bundler (sws, vite, parcel, webpack: they don't feel confortable to choose)
  • migrations
  • generators
  • targets/executors (let them learn package.json scripts first)

I concur that Nx is powerful and may seem simple for us that have more experience, but Vite is simpler and has less friction for beginners.

I would add that we should recomend the simplest way for them and Vite fits for being simple in the sense it doesn't try to have all these abstractions baked in.

Having both recommendations would not be advised as well.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nx doesn't require using monorepos anymore

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wesleycoder yeah as @nickmccurdy said. Not Nx in the monorepo setup. This is targeted towards new learners as far ad I understood.

Nx's new "standalone app" setup is almost identical to what CRA produces, and allows ppl to choose whether they want Vite or Wepback

I wrote it up here: #5487 (comment)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vite

longsleep added a commit to longsleep-io/lico that referenced this pull request Oct 23, 2023
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
longsleep added a commit to longsleep-io/lico that referenced this pull request Oct 23, 2023
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
longsleep added a commit to longsleep-io/lico that referenced this pull request Oct 23, 2023
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
p4nu added a commit to p4nu/codespaces-react that referenced this pull request Nov 8, 2023
To future prove React Codespaces, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/ and https://vitest.dev/
Related: reactjs/react.dev#5487
p4nu added a commit to p4nu/codespaces-react that referenced this pull request Nov 8, 2023
To future prove React Codespaces, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/ and https://vitest.dev/
Related: reactjs/react.dev#5487
longsleep added a commit to longsleep-io/lico that referenced this pull request Nov 15, 2023
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
longsleep added a commit to longsleep-io/lico that referenced this pull request Nov 15, 2023
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
longsleep added a commit to longsleep-io/lico that referenced this pull request Nov 15, 2023
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
longsleep added a commit to libregraph/lico that referenced this pull request Nov 15, 2023
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
SyntaxColoring added a commit to SyntaxColoring/log-viewer that referenced this pull request Nov 22, 2023
The thing prompting this now is that our deployments are broken because CRA is giving us obscure build errors for some of our newer dependencies, like @radix-ui/themes. This is apparently caused by outdated dependencies within CRA's toolchain. (radix-ui/themes#104, facebook/create-react-app#11767, and similar.) It's unclear if or when CRA is going to update those dependencies. From reactjs/react.dev#5487 (comment) and the lack of CRA releases since then, it seems like people generally aren't holding their breath.

I can't discern whether Vite is just JS framework hype, but for now at least, it seems easier to port to it than to keep limping along with CRA.

So, to do the port:

* Replace CRA's config files with the defaults from `npm create vite@latest`.
* Delete all the Progressive Web App stuff from CRA. We're not worrying about that for now.
* Update package.json...
  * Add `"type": "module"` per https://vitejs.dev/guide/troubleshooting.html#cjs.
  * Update scripts and dependencies per `npm create vite@latest`. Drop various testing-library dependencies added by CRA, since we weren't using them.
  * Separate dependencies from devDependencies while we're here, just for human organization.
* Replace CRA's default readme with Vite's default readme.
* Port unit tests from Jest to Vitest. This just involves using explicit imports for the globals like `it` and `expect`.
Copy link

@KaKashi1210 KaKashi1210 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.

@sebastiancarlos
Copy link

To all the people still getting emails about this old PR: Hello. I hope you are having a wonderful day.

By my latest estimates, we will continue receiving email notifications for this PR until the heat death of the universe, but each time the interval will increase by 33.33% (repeating, of course).

And remember, in this holiday season, it's not about getting state. It's about being the effect the world needs. Peace.

@GGupzHH
Copy link

GGupzHH commented Dec 28, 2023

I totally agree with you.

smartdev328 added a commit to smartdev328/codespaces that referenced this pull request Mar 10, 2024
To future prove React Codespaces, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/ and https://vitest.dev/
Related: reactjs/react.dev#5487
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet