React is the internet’s most popular library for building interactive user applications, and knowledge of how to use frameworks like React are essential parts of every web developer’s toolbox.
So how does one create a React application? Tutorials and developers on the internet only have one answer, and it’s a bad one: create-react-app (CRA).
In this two part series, I’ll explain why using create-react-app is so bad, and introduce Vite, an alternative and more streamlined way for developers to initialize and build their React applications. By the end of this series, you’ll free yourself from the burdens of CRA and have a cool new way of working with React.
So, let’s get started! First up: Why it’s time to stop using create-react-app.
It’s Bulky and Slow.
One of the biggest problems plaguing create-react-app is its bloat and its slowness.
As soon as you type in the command to initialize a new project, you’ll immediately notice the large amount of packages and setup CRA has to undergo in order to setup a simple React project.
For beginners, this long process (which can take anywhere from 3–15 minutes, depending on your internet speeds) may seem normal, but the reality is that it’s not.
By taking a careful look at CRA’s dependencies folder, we found that CRA has an unnecessary reliance on tons of other packages, and that reliance has only grew over the years. Instead of looking over all their dependencies and curating the ones they really need, CRA developers have only added more and more on top of existing ones.
For numeric proof of CRA’s bulkiness, look no further than the properties page of the node_modules folder.
205 MBs of dependencies? Just for a simple React app? That is absurd!
And it doesn’t have to be this way either. Vite, the build tool I’m going to introduce later, only has 34.2 MBs of dependencies, almost a sixth the size of CRA’s!
And smaller dependencies don’t just mean faster install and initialization times: less dependencies also means less bloat and complexity, which translates to faster update times during development, faster build times during production, and faster frontends for our end users.
I’ll elaborate on Vite’s merits later. For now, let’s move on.
It’s Outdated and Insecure.
But surely, with more dependencies comes richer features and better integration with other plugins right?
Nope.
When I created my first React app, I remember being shocked by all the outdated and insecure packages CRA uses. If you saw this while running npm install, wouldn’t you be horrified too?
And those deprecated packages aren’t even the worst of CRA’s problems. CRA relies on multiple packages that contains high and critical severity vulnerabilities. Applications built with CRA are filled with security risks.
And GitHub knows this too. I’m still getting constant Dependabot alerts from that first React project of mine, warning me about all the vulnerabilities found in the hundreds of packages that CRA installs.
Thankfully, with CRA 5.0, things have been better. There are now only 6 vulnerabilities now compared to the 31 we had before! (That was sarcasm.)
But don’t wipe your brow just yet, because this is not the end of this conversation. CRA receives small updates every 3–5 months or so, and major updates only come by on a yearly basis. Who knows how many more vulnerabilities will be discovered by then?
It Has Terrible Plugin Compatibility.
Another problem that stems from CRA’s outdated dependencies and lack of updates is plugin compatibility, which turned out to be the final straw for me.
I wanted to use Tailwind CSS with React, but because of how outdated CRA was, I had to jump through a lot of hoops in order to get it working. For those who aren’t familiar, here’s an archive from the Wayback Machine, detailing exactly what I’m talking about.
But it’s not just the workarounds and the extra steps that bothered me. After installing and configuring all the workarounds, I was still stuck using the shorter end of the stick:
It turns out that CRA was so outdated that there was absolutely no support for the newer versions of Tailwind, which had a bunch of new features like JIT compilation and arbitrary value support. Instead, I was stuck using an older, compatibility build Tailwind had made specifically for outdated build tools like CRA.
Again, this was fixed in CRA 5.0, and now CRA users have access to the latest versions of Tailwind just like everyone else.
But history often repeats itself, and I can guarantee that all the problems CRA users have faced are bound to come up again as soon as another popular plugin or development tool gets updated.
Vite: A New Way to Develop React Applications
It’s time to switch. But what other options are there, especially for beginners and hobbyists who aren’t ready for more advanced build tools like Next.js?
Introducing Vite: A better, more efficient, more streamlined way to develop React applications.
Developed and maintained by the VueJS team*, Vite has full support for React development, including instant page refreshing, Hot Module Replacement (HMR), compiling with Babel, bundling with ESBuild, and just about everything CRA offers, and better.
* Vite was meant to be primarily for VueJS, but it has expanded over the years and now has full support for React.
Not only is Vite fast (installing dependencies takes ~20 seconds), it’s also constantly being updated and improved by the dev team. Outdated dependencies? Vulnerable packages? None exist for Vite.
In addition, due to the fact that Vite is always being updated, Vite has excellent support and compatibility with many plugins. When Tailwind 3.0 was released, Vite was one of the first build tools to have complete support for it. No workarounds, no extra steps, nothing. Just installing Tailwind and it’s dependencies.
Join me in my next article where I talk about how to initialize a React application with Vite, and how to make the transition from CRA to Vite. See you then!
