In 2023, where time is more important than anything and you're still using create-react-app to create a react application starter. It takes forever to create a react app using create-react-app, it's so slow that you can make your coffee and it won't be done after that. And now even the new official react documentation doesn't recommend you to use create-react-app.

So, what's the best possible way to create a react app? There are multiple ways you can do that, as said in the official docs you can use the NextJS framework to do so, but not everyone needs a framework just to create a react application as you might not need to do complex tasks like SSR or something.

The best way is to use Vite which is developed by the creator of Vue and is actively maintained. It is a relatively new build tool that has been gaining popularity in the React development community as an alternative to Create-React-App. In this article, we will explore more about Vite as a build tool for React applications.

What is Vite?

Vite is a fast and lightweight build tool that was created by Evan You, the creator of Vue.js. It is designed to be a simple and efficient alternative to complex build tools like Webpack. Vite takes advantage of the modern web platform's native module system and provides near-instantaneous hot module replacement (HMR) that allows developers to see changes in their code in real time.

How does Vite differ from Create-react-app?

Create-React-App is a popular build tool that provides a lot of configurations and features out of the box. While it is great for beginners, it can be a bit cumbersome and slow for more advanced developers. Vite, on the other hand, is designed to be simple and fast. It comes with only the bare minimum configurations needed to get a React application up and running.

Benefits of using Vite

Faster Build Time

One of the biggest advantages of using Vite is its speed. It uses native ES modules to bundle your code, which makes it significantly faster than tools like Webpack. Vite also provides near-instantaneous HMR, which means that the changes to your code are reflected in real-time without the need for a full page reload again and again.

Simplicity

Vite is extremely simple and easy to use. It comes with only the essential configurations needed to get a React application up and running. It comes with minimal files and dependencies that are needed to run a React application.

Scalability

Vite is highly scalable and can be used for small and large-scale projects alike. It provides a flexible architecture that allows you to customize your project as needed. This makes it a great choice for teams that need a build tool that can grow with their project.

Getting Started with Vite

To get started with vite, run the below command:-

With NPM-

npm create vite@latest

With Yarn-

yarn create vite

With PNPM-

pnpm create vite

After that follow the prompts and create a react application.

Or you can also run the following command to do so:-

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

Conclusion

Vite is a lightweight and blazing-fast build tool that provides a great alternative to Create-React-App. While it may not be as feature-rich or configurable as other tools, its simplicity and speed make it a great choice for developers who want a streamlined workflow. Whether you are a beginner or an experienced developer, Vite is definitely worth considering for your next React project. And please do not use Create-React-App anymore.