DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create React App is Dead?
Vinit Gupta
Vinit Gupta

Posted on

Create React App is Dead?

Have you used create-react-app?
Probably EVERYTIME you have created a React application.

Well, there are a few problems with using it. As is with all legacy features of any framework after some time.
legacy code memes

Why not create-react-app?

We have been taught since the Stone Age that starting development in React is easy with CRA command.
And yes, it is easy. But what is the need of the world now?
Easier and Faster.

Here is where CRA fails. You would have notice it yourself. Everytime you initialize a react application, you run the CRA command. Node starts installing packages, and then :
one eternity later

You have a brand new application.

But wait, did you know there are options that do this faster and better?

Well, this is what this article is all about.
The modern frameworks that provide the functionality of creating react applications faster and more sophisticated.

1. Vite

One of the most used modern frameworks used for creating react applications is Vite.
vite logo

Vite is relatively faster while creating react applications, while decreasing the server startup time as well.
You can also see the popularity on npm :

Vite popularity on npm

It is as easy as writing the following command :

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

This works almost in the same way as CRA, but definitely faster.

2. Gatsby/Astro

One of the latest trends is static site generation. SSG uses the concept of pre rendering the pages and serving them to the user as static websites that don't have reactivity like React.
Simple use cases are blogs or a marketing page, where the data doesn't need to be updated based on user reactions.

Here frameworks like Gatsby or Astro come in. They compile the React based code and serve plain HTML, CSS and Javascript pages.

Gatsby vs Astro

Now, let's move on to frameworks that a more on the full stack side of things.

3. NextJS (My favorite)

You might have heard about NextJS more than any other options in this article.
There is a reason for this. One of them is the wide range of functionalities that NextJS provides.

  • Pure server side generated static pages
  • Hybrid pages that are static but react to client side interactions like React
  • Functionality to create routes without using any library like React Router
  • Having the API and the client side pages on the same server

wow meme

Well there you have it, why NextJS.
Comment below if you would like a series on creating NextJS websites from scratch.

4. Remix

Last on the list, but definitely not the least is Remix.
One of the newest JS Frameworks in the market.

remixjs logo

Now, what is RemixJS? As put by Fernando Doglio :

Remix is a brand new full-stack framework for developing web applications. I call it β€œfull-stack framework” because it lets you code for the front-end and the back-end at the same time. Yes, you're using JavaScript for everything, with a very React-ish flavor to your code.

Mind blown?
Well mine definitely was.
Even better - Shopify recently acquired it. Though there are other frameworks also providing similar features, they do not have the backing of such a giant as Shopify.

That's it for today guys.
Which one was new for you? And which would you love to try? Would love to talk on this more.

Top comments (16)

Collapse
 
brense profile image
Rense Bakker

Not to mention the webpack version used by CRA has a bunch of critical vulnerabilities and even the latest webpack has major security problems. Not the best platform to use for building anymore considering all the alternatives we have now. Vite is awesome :)

Collapse
 
thevinitgupta profile image
Vinit Gupta

I agree
Having a better options always helps
Also, you can checkout NextJS if you're working with a full stack application in mind

Collapse
 
brense profile image
Rense Bakker

Nextjs still uses webpack I think. There's a vite alternative called Rakkas, but it's not fully mature yet last time I checked.

Thread Thread
 
ivanjeremic profile image
Ivan Jeremic

Nextjs uses Turbopack now I think.

Thread Thread
 
brense profile image
Rense Bakker

Not by default I think, but both are owned by vercel now, so maybe soon. Turbopack is too much of a continuation of webpack imho. I think other build tools like vite will win.

Thread Thread
 
ivanjeremic profile image
Ivan Jeremic • Edited on

Yes they said that turbopack is here to replace webpack, vite can't win on it's own vite already talks to the turbopack team from what I heard and turbopack will most likely be an option inside vite as rollup replacement.

Thread Thread
 
brense profile image
Rense Bakker

chariotsolutions.com/blog/post/tur...

twitter.com/youyuxi/status/1585040...

I dont see anything about Vite wanting to replace rollup with turbopack. I just see him talking about maybe using a different technique for HMR in the future (SWC/rust-based instead of Babel). Rollup has nothing to do with that choice.

Thread Thread
 
ivanjeremic profile image
Ivan Jeremic

Not he but on one of turbopacks videos they said that they talk to the vite team, and Evan himself said he wished someone would one day rewrite rollup in rust, now its not rollup but however you can then switch from rollup to turbo and others which makes sense.

Thread Thread
 
brense profile image
Rense Bakker

Maybe I missed it, but I haven't heard anyone questioning Rollup before and I'm not finding anything comparing rollup with turbopack.

Thread Thread
 
ivanjeremic profile image
Ivan Jeremic • Edited on

1.Even questioned rollup it's on youtube. 2. Nobody is comparing the two just saying that vite most likely will support multiple bundlers.

Thread Thread
 
brense profile image
Rense Bakker

I only heard Evan question babel for HMR. Do you have a link? It doesn't make sense to support multiple bundlers if one doesn't offer anything that the other doesn't. There has to be a reason.

Thread Thread
 
ivanjeremic profile image
Ivan Jeremic • Edited on

There is a video where he says he wishes someone would rebuild rollup in rust. Maybe I search it for you when I have time.

Collapse
 
jd2r profile image
Dominic R.

As someone who is relatively new to React, this is super helpful. I always shied away from using it because CRA took so long to install packages and such. It's great to know there are alternatives.

And yes, a series on Next would be immensely helpful. I'm trying to learn it at the moment and it's not making much sense :P

Collapse
 
rxliuli profile image
rxliuli • Edited on

I also created a vscode plugin to create vite projects like you do when using webstorm
marketplace.visualstudio.com/items...

Image description

Collapse
 
samantrags profile image
Raghavendra Samant
Collapse
 
whatthehanan profile image
Hanan Hamza

haha, i thought the same thing

Become a Moderator Can you help us make DEV a better place?

Fill out this survey and help us by becoming a tag moderator here at DEV.