facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.74k stars 26.86k forks source link

Why is create-react-app still used by many? Very important #12628

Open Kenramiscal1106 opened 2 years ago

Kenramiscal1106 commented 2 years ago

Disclaimer: It's not my intent to offend the maintainers of create-react-app, but tools are evolving and it's no doubt that people (who uses newer tools like nextjs or vite) will also ask this question.

tl;dr

With numerous problems encountered by people in using create-react-app, why are there still many people who are using it? It doesn't even have features like hot module reloading and it forces a bunch of testing packages. I think that cra isn't a viable option to be used by a bunch of new developers nowadays unless you think that create-react-app is more convenient (which is actually not).

Here are 3 alternatives for cra:

1. Vite (Amateur to advanced)

So if a bunch of new devs read this issue, I would really recommend you switch to vite. Not only does vite have hot module replacement, it also simplifies making a react app (no testing libraries and such included in starter project).

To get started at using it, run one of the following command depending on what package manager you use:

# npm 6.x
npm create vite@latest my-react-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react

# yarn
yarn create vite my-react-app --template react

# pnpm
pnpm create vite my-react-app --template react

Follow the instructions after running command and you have a react app with hmr enabled. Official documentation

For people who are building single page apps by default, this is a good option because as soon as your app grows in complexity, the rebundling of dependencies becomes longer, and therefore, decreased productivity.

2. Next.js (Level: Intermediate to advanced)

Aside from hot module reloading, nextjs supports a bunch of rendering patterns like server-side rendering, incremental static regeneration, static site generation, and also client-side rendering.

The option to process everything on the server instead of the client gives the application search engine optimization

To get started, run:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

And you have an application that can be indexed by google search and will be visible to many. More on Next.js Official documentation

3. Remix (Level: Intermediate to advanced)

Sometimes, project requirements are a lot bigger than what nextjs can offer. And for that, remix is the option.

Even though remix only supports client-side rendering and server-side rendering, remix has nested layouts.

So instead of rendering the entire page when redirected with a link, remix only renders on part of the ui. This is great for dashboard-style applications.

To start a remix project, run: npx create-remix@latest And answer a bunch of questions to scaffold your app. more information Remix documentation

ex-tag commented 2 years ago

With Meta's recent official support of Rust, I think it would be good to have a CRA v2.0 - built on Rust. Which would replace Node.js with Deno (https://deno.land), and Webpack with a Rust version similar to esBuild (https://esbuild.github.io).

PeterNelsonT commented 2 years ago

Does remix allow creating CSR SPA? Also nextjs is mainly meant for SSR, not a full CSR SPA. If I have to create a CSR SPA, CRA or vite or custom config is the main choices. And custom config takes a whole lot of time unless done by advanced devs. Vite seems to have issues with some of the react packages like CKEditor, so CRA seems the viable solution for now in many cases. Though its really slow as project grows.

Kenramiscal1106 commented 2 years ago

Nextjs, I think, can also do spa, but it's gonna take a little configuration to do.

ivnsch commented 2 years ago

Thanks for writing this! Here it was also mentioned that CRA seems not to be maintained anymore and I didn't know what to use instead.

tresorama commented 1 year ago

Thank for writing this. Today I scaffolded a turporepo monorepo with pnpm, and when attempting to create a cra app with

pnpm create react-app my-app

i got this error

npm ERR! Cannot read properties of null (reading 'matches')

Tried with

pnpm create vite my-app

add all worked