Replace Create React App recommendation with Vite #5487
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,13 +27,13 @@ React is a library that lets you organize UI code by breaking it apart into piec | |
|
|
||
| ## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/} | ||
|
|
||
| If you're **learning React,** we recommend the [Vite React template.](https://vitejs.dev/guide/) It's the simplest way to try out React and build a new single-page, client-side application. Vite works with other frameworks and isn't opinionated about routing or data fetching. | ||
|
|
||
| First, install [Node.js.](https://nodejs.org/en/) Then open your terminal and run this line to create a project: | ||
|
|
||
| <TerminalBlock> | ||
|
|
||
| npx create-vite my-app --template react | ||
|
|
||
| </TerminalBlock> | ||
|
|
||
|
|
@@ -46,15 +46,18 @@ npm start | |
|
|
||
| </TerminalBlock> | ||
|
|
||
| For more information, [check out the official Vite docs.](https://vitejs.dev/) | ||
|
|
||
| ### Popular alternatives {/*toolkit-popular-alternatives*/} | ||
|
|
||
| Vite is not the only option for bundling your React-based single page applications. Here are some other popular options: | ||
|
|
||
| * [create-react-app](https://create-react-app.dev/) | ||
|
There was a problem hiding this comment. it's a dead project. it should either be explicitly marked as such, or not mentioned at all There was a problem hiding this comment. |
||
| * [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. | ||
|
There was a problem hiding this comment. you could add on frameworks the usage of Nx Framework which includes Vite by default in React applications There was a problem hiding this comment.
Nx for a beginner??? There was a problem hiding this comment. 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. There was a problem hiding this comment. @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 😃 There was a problem hiding this comment. 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 😂 There was a problem hiding this comment. I would say we want avoid throwing these concepts at beginners:
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 Having both recommendations would not be advised as well. There was a problem hiding this comment. Nx doesn't require using monorepos anymore There was a problem hiding this comment. @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) |
||
|
|
||
|
|
||
| ## Building with a full-featured framework {/*building-with-a-full-featured-framework*/} | ||
|
|
||
| If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. | ||
|
There was a problem hiding this comment. I think it should be more emphasis on the backend part since its mentioned earlier (the lack of it on vite) on this document. There was a problem hiding this comment. Should it include Remix as an option as well? There was a problem hiding this comment. Remix should. A framework/library shouldn't really pick a favourite. Plus most people don't trust Vercel... Plus has anyone thought about NX here. It's neutral on all this There was a problem hiding this comment. Why don't people trust Vercel @Jordan-Hall ? |
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not just adding a couple of solutions to pick from 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well, due to this section being related to learning react as first timer – we're talking about people with possibly 0 experience and we cannot expect them to dig into it nor understand differences
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
especially when CRA itself is not that bad - it's just unmaintained and can be painful couple days later due to lack of configuration (hello @tailwindcss) and at that point in time person can just say "f it - i'm outta here" and never come back
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would argue that alone makes it bad. 1.5k open issues, no merges in months, it's a dead project
It's also old tech. We don't do things that way anymore why point new dev to using just for the sake of "it was always this way"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd just add Vite as the main one and list a couple of alternatives to dig deeper for the interested ones 😉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nstanard That's because as imperfect as Vite is, it's still actively developed.
The mountains of issues continuing to pile up (many with PR fixes that have been ignored for a very long time) can never be resolved at this point without a full rewrite.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR updates a section of the docs that only a beginner would need. CRA is still a perfectly acceptable tool for a beginner to start learning. I have a hard time seeing this change as necessary. It comes off as a publicity tactic by people in the Vite community.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
80% of the concern would be alleviated if they simply added a note that explicitly stated CRA is a learning tool that shouldn't be used for production.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What you call a publicity tactic, I call sharing with my brothers in code the merciful word of the one true boilerplate tool to rule them all: Vite 🫡
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@wesleycoder I fully agree 🙂 That's why there would be one thing recommended. And for the rest there could a link to another page that explores other options ;)
Second thing I've just realized. I remember when I was starting with React and I was using CRA.
The problem was that I was using an old MacBook Pro from 2011 with 4GB of RAM.
Setting up a CRA project and running it with another app (for example simple backend) in the background was painful and slow. The reloading of the project sometimes was taking ages. And it was just a couple of years ago.
Then I tried Vite. On that very same laptop. Woah it was a breeze ❤️ Project setup took couple of seconds (compared to sometimes 10minutes for CRA, ofc on the device I mentioned) and you could just feel how lightweight of a solution that is if you just want to build a React application or just play with some new stuff.
So that could be an argument for Vite. Not everybody has the latest spec for their devices 😄