Create React App is Dead?
Vinit Gupta

Vinit Gupta @thevinitgupta

About: Software Developer with 1 year+ experience in creating exciting apps with NodeJS, ReactJS, NextJS and MongoDB. Also, open source contributor and technical writer.

Location:
West Bengal, India
Joined:
Jun 26, 2021

Create React App is Dead?

Publish Date: Nov 23 '22
54 17

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.

Comments 17 total

  • Rense Bakker
    Rense BakkerNov 23, 2022

    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 :)

    • Vinit Gupta
      Vinit GuptaNov 24, 2022

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

      • Rense Bakker
        Rense BakkerNov 25, 2022

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

        • Ivan Jeremic
          Ivan JeremicNov 28, 2022

          Nextjs uses Turbopack now I think.

          • Rense Bakker
            Rense BakkerNov 29, 2022

            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.

            • Ivan Jeremic
              Ivan JeremicNov 29, 2022

              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.

              • Rense Bakker
                Rense BakkerNov 29, 2022

                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.

                • Ivan Jeremic
                  Ivan JeremicNov 29, 2022

                  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.

                  • Rense Bakker
                    Rense BakkerNov 29, 2022

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

                    • Ivan Jeremic
                      Ivan JeremicNov 29, 2022

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

                      • Rense Bakker
                        Rense BakkerNov 29, 2022

                        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.

                        • Ivan Jeremic
                          Ivan JeremicNov 29, 2022

                          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.

    • Hidayt Rahman
      Hidayt RahmanMar 1, 2023

      Thats why I don't like webpack

  • DR
    DRNov 23, 2022

    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

  • rxliuli
    rxliuliNov 25, 2022

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

    Image description

Add comment