create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

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

Open Kenramiscal1106 opened this issue 3 years ago • 0 comments
trafficstars

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 question to scaffold your app. more information Remix documentation

Kenramiscal1106 avatar Aug 02 '22 05:08 Kenramiscal1106