tool

CRA is gone.

Yes, it’s no longer the recommended tool for starting React apps.

Some of us were surprised, but many of us knew it was a long time coming.

The React team has decided to shift their focus to more modern and lightweight tools and frameworks.

CRA was a great starting point for many, but there are now better options available.

Don’t worry though, this change is actually a positive one, as it means we can now take advantage of newer and more efficient tools that will help us build better React applications.

So, let’s embrace the change and explore these new options together!

Why did they dump CRA?

Create React App was great.

Setting up React apps become as easy as ever.

There was no need to bother with tedious Webpack or Babel configs.

But despite all that, it had notable issues we just couldn’t ignore:

1. Bulky and slow

Create React App is a bloated tool.

It installs an unbelievable number of packages and takes forever to finish.

If you’re a long-time CRA user like me, you’ve probably gotten used to this process, but it’s far from normal.

Once you enter the command to start a new project, you will quickly realize the insane number of packages CRA needs to set up.

Look at how large the node_modules folder is for CRA compared to a superior alternative!

And both folders were just newly set up.

Many packages mean longer install times. Yarn and PNPM can still be slow.

2. Insecure and outdated packages

Bundling so many packages makes tracking harder. Some become insecure later.

Things improved but any insecure package is something to worry about. There are still quite a few.

GitHub knows this very well.

Dependabot alerts everywhere.

I still get Dependabot alerts from one of my first GitHub projects.

And they’re always about security flaws in packages CRA installed.

3. Limited customization options

Create React App is a black box.

To add new libraries and customize it you must always depend on Craco and the rest.

Before CRA v5 Craco was pretty much our only hope to get Tailwind support.

I remember all those times when I was creating Electron + React desktop apps, and I had to install react-app-rewired just to set the target to 'electron-renderer' to access Node modules in the React part of the app.

For total control you can always do npm eject, but of course then you become responsible for all the dependencies installed by CRA, which has trade-offs that may not be worth it for you.

What to use instead of Create React App

Old habits die hard, sure.

If you’ve been hesitating to switch to a superior tool, hopefully, the React team dumping CRA should finally do it for you.

There are far more modern and better-maintained alternatives out there; let’s check out some of the most popular ones:

Vite

Try Vite.

It’s a fast way to develop modern web projects.

It’s designed for efficiency. It makes development smoother.

The VueJS team is responsible for developing and maintaining Vite, so you can trust that it’s a reliable tool.

Even if you’re working with React, Vite has full support, including features like instant page refreshing and Hot Module Replacement (HMR).

Plus, it compiles with Babel, bundles with ESBuild, and provides just about everything CRA does – but better!

Vite is lightning-fast. Installing dependencies is quick. The dev team is always improving its speed.

You don’t worry about outdated dependencies or vulnerable packages.

Another great thing about Vite: it’s always being updated.

It has excellent support.

It’s compatible with many plugins. Vite quickly provided support for Tailwind 3.0 after it first came out.

You don’t need to worry about workarounds or extra steps. Just install Tailwind and its dependencies, do a little config, and you’re good to go!

Parcel

It’s perfect for quick web projects.

It’s a zero-config bundler with no setup required.

Great for beginners and quick starts.

It’s also still more flexible than Create React App (CRA), which needs more customization work.

Parcel supports all the latest web technologies, including React, Vue, and TypeScript, and it can bundle any type of asset, from images and CSS to HTML and JavaScript.

Plus, it has excellent performance, thanks to its use of worker processes, which allows it to parallelize tasks and speed up builds.

Parcel also has HMR support.

Hot Module Replacement: code changes show instantly in the browser. No need for a full page refresh.

This saves you time and makes development more efficient.

Finally, Parcel is updated often with the latest features and optimizations. You can trust the team to keep up with the latest web technologies and best practices.

The result: your projects are built with the best tools available.

Custom Webpack configuration

Webpack is still king.

The level of control of flexibility it gives you is unmatched.

There’s a massive number of options you can set, far more than just path and filename.

Give it a try to break free from the limitations of Create React App.

Another benefit to note: Webpack can generate a development build without a local server. Unlike Parcel and others.

This particular feature saved me when I was debugging React in a VSCode extension.

Loading data from localhost didn’t work properly for a Webview; I had to build to a local file and read the contents.

With source maps enabled and dev mode turned on, I could easily see the exact line where the error occurred in the TS code. Unlike with Parcel, where all I got was a minified build.

Of course setting up a Webpack config can be complex and more involved. You must configure various options to get everything working right.

But once you’re set up, you’ll have a heavily personalized build process for your project.

It’s a trade-off that may or may not be worth it for you.

Frameworks to replace Create React App

Need React’s state and UI capabilities without extras? The options above are great.

Want high-performance apps with advanced features like SSR? Consider frameworks with built-in routing, data fetching, etc.

Frameworks like:

Next.js

Many of us know Next.js already.

Next.js has advanced features like server-side rendering (SSR) and static website generation.

Server-side rendering renders pages on the server and sends them to the client.

SSR greatly boosts performance, UX, and SEO.

Use npx create-next-app instead of Create React App.

It sets up a new project with all dependencies and configurations for Next.js. This makes getting started easy.

So, if you’re looking to enhance your React app’s performance and capabilities, it’ll be great if you start exploring what Next.js has to offer.

With its advanced features and easy setup, it could be just what your app needs to deliver an exceptional user experience.

Remix

Explore Remix for superior performance.

Get advanced features and easy setup.

Deliver exceptional user experiences with this flexible and extensible framework.

npx create-remix my-app sets every up beautifully.

With Remix, you’ll have access to a wide range of features and capabilities that speed up your development process.

And because it’s a newer framework, you’ll be able to take advantage of the latest technologies and best practices.

Gatsby

Gatsby is another awesome one – for scalable static sites.

Gatsby creates fast-loading and consistent sites with React.

Use npm init gatsby to set up a new project with all the necessary dependencies and configurations.

Once your app is set up, you can start building your website using the many plugins and tools available in the Gatsby ecosystem.

Gatsby has many resources for developers.

Starter kits, plugins, etc., that add functionality to your site.

You can easily build a blog, e-commerce site, or portfolio with Gatsby’s tools.

With Gatsby, you’ll benefit from its ease of use, powerful features, and vast ecosystem.

It’s a framework that’s definitely worth exploring if you’re looking for a flexible, high-performance way to build React apps. So why not give it a try and see what you can create?

Final thoughts

CRA was a popular tool.

But it had its limitations and issues.

It was bulky, outdated, and had few ways to customize it.

There are now more modern and lightweight alternatives to use.

Vite, Parcel, Custom Webpack, Next.js, Remix, and Gatsby are all great options for developers looking to enhance their React app’s performance and capabilities.

They offer unique features, flexibility, and customization options, making them ideal for a variety of projects.

It’s time to embrace the change and explore these new tools to take advantage of the latest technologies and best practices.

Whether you’re a beginner or an experienced developer, there’s an option out there that’s perfect for your needs.

So, don’t hesitate to try them out and see what you can create!