Why Create React App is dead?

If you are a React developer then you probably have used CRA or Create-react-app previously. The very first step to setting up a basic ReactJS project is with creating React App, or at least it was. This article covers Why Create React App is dead and what are the alternatives.

Create React App is used to create a single-page React application. It also provides a modern build setup with no configuration.

However, while CRA simplifies the setup process, it comes with some drawbacks.

Why CRA is slow?

CRA uses a Webpack under the hood. The webpack bundles the entire application code before it can be served. When there is a vast codebase, it takes more time to spin up the development server and it takes a while for the changes to take effect.

For example, CRA’s initial build process can be slow, especially for larger projects. This is because CRA generates a large number of files, and the build process has to go through all of them. Additionally, CRA’s development server can be slow to reload changes, which can be frustrating for developers who want to see their changes reflected immediately.

Alternative?

This is where Vite comes in. Vite is a modern build tool that was created with the goal of making development faster and more enjoyable. It uses modern browser features like ES modules to achieve faster builds and faster development server reloads.

npm create vite@latest

You’ll be asked to provide the name of your directory and given the options of working with React, Preact, Lit, Svelte, and Others. Choose ‘React’ and then you have also the ability to work with ‘TypeScript’.

Or you can simply use a react template for Vite with this:

npm init vite@latest my-app --template react

Then use the following commands in the terminal to enter the directory, install the necessary dependencies, and start the development server.

cd my-app npm install npm run dev

How Vite saves the day?

Faster Build Times: Vite’s build process is faster than CRA’s, thanks to its use of modern browser features like ES modules and other optimizations. Vite’s build times are significantly faster than CRA’s, especially for larger projects.

Faster Hot Module Replacement (HMR): Vite’s development server supports HMR, which means that changes to code are reflected in the browser almost instantly. This makes Vite a great tool for rapid prototyping and development.

Smaller Bundle Sizes: Vite optimizes the size of the JavaScript bundle by using tree-shaking and other techniques. This results in smaller bundle sizes and faster page load times.

Support for Vue.js and Other Frameworks: While CRA is primarily focused on React, Vite supports other frameworks like Vue.js out of the box. This makes it a great choice for developers who work with multiple frameworks or who want to experiment with different tools.

Flexible Configuration: Vite provides a flexible configuration system that allows developers to customize the build process to their specific needs. This can be especially useful for complex projects that require specific optimizations or configurations.

Related: How to send emails with JavaScript (opens in a new tab)

Here comes NextJS:

Next.js is a popular framework for building React applications that provides a number of features out-of-the-box, such as server-side rendering, automatic code splitting, and optimized performance. This makes it a great choice for building complex applications that require high performance and SEO optimization.

One of the biggest advantages of Next.js is its server-side rendering (SSR) capabilities. This allows the application to be rendered on the server and sent to the client as an HTML page, which can improve performance and SEO by reducing the time-to-first-byte (TTFB) and providing search engines with fully-rendered content.

Additionally, Next.js supports automatic code splitting, which can further improve performance by reducing the amount of JavaScript that needs to be downloaded by the client.

Next.js also provides a number of performance optimizations out-of-the-box, such as preloading of pages and images, prefetching of data, and automatic code optimization. These optimizations can significantly improve the user experience of your application and reduce the time it takes to load pages.

However, it’s important to note that Next.js has a bit of a learning curve, particularly if you’re new to server-side rendering and build tools. Next.js requires a more complex setup than CRA or Vite, and may require more configuration and customization depending on your specific project requirements.

While Next.js can improve performance and SEO, it may not be necessary for all projects, particularly smaller projects or those that don’t require advanced performance optimizations.

Conclusion

To work with React, I had been using Vite for some time now and I assume it’s just a bit faster.

However, I’ve had to set up a few of my professional websites over the past two weeks, so I put my hands on NextJS. Believe me, once you work with NextJS, you’re going nowhere, it is insanely fast and super beneficial for SEO. Search engine optimization is something you should keep in mind, especially if you’re developing a brand, and NextJS’s Server side rendering is just the icing on the cake.

Summing up, we’ve looked at Why Create React App is dead, what Vite and NextJS are as alternatives to create-react-app, and how they can outperform. However, if you’re new to React, you only need to worry about learning React. As a beginner, you can visit the latest official docs for React (opens in a new tab).