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.
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 :
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 is relatively faster while creating react applications, while decreasing the server startup time as well.
You can also see the popularity on npm :
It is as easy as writing the following command :
npm create vite@latest
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.
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
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.
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 (17)
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 :)
Thats why I don't like webpack
I agree
Having a better options always helps
Also, you can checkout NextJS if you're working with a full stack application in mind
Nextjs still uses webpack I think. There's a vite alternative called Rakkas, but it's not fully mature yet last time I checked.
Nextjs uses Turbopack now I think.
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.
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.
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.
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.
Maybe I missed it, but I haven't heard anyone questioning Rollup before and I'm not finding anything comparing rollup with turbopack.
1.Even questioned rollup it's on youtube. 2. Nobody is comparing the two just saying that vite most likely will support multiple bundlers.
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.
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.
I also created a vscode plugin to create vite projects like you do when using webstorm
marketplace.visualstudio.com/items...
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
that was quick : youtube.com/watch?v=kvkAoCbTM3Q
haha, i thought the same thing