Say you want to start a new React project, the first thing you will do is run

npx create-react-app my-app

Now you have to manually install all the required dependencies. Now this process will take 4-5 mins on an average.

Enter Vite

Vite is a build tool that promotes a faster development experience for developers. It was created by Evan You.

1. Hot Module ReplacementA fast development server, that provides swift Hot Module Replacement (HMR), due to its enhanced features.

You can read more about ES native modules from here.

1. RollupVite has a build command that bundles the developers code with Rollup.

This is a JavaScript module bundler that compiles simple pieces of code and builds them into complex applications.

Since Rollup is pre-configured, its easy to generate static applications that are highly optimized for production.

Benefits of Vite

A developers productivity is influenced by many factors including performance and speed.

JavaScript can cause an application to slow down depending on its complexity. Vite resolves this issue by using Esbuild.

EsBuild is a dependency pre-bundler that enhances the pre-bundling of dependencies than other frameworks. This results in increased server speeds and Hot Module Replacement.

Features of Vite

The key features of Vite include:

• Instant server start.
• Fast Hot Module Replacement.
• Optimized build process.

Lets now create a React application using Vite.

Creating a react application using Vite.

Navigate to your desktop and create a new folder. This directory will store all of our files.

Write the following command in your CLI.

npm init vite

You will see different process running on the screen those are product dependencies and build packages.

Our project is now created. Lets install and then run it.

Your package.json file should look, as shown below:

Finally, include the following command to start the dev server:

npm run dev

Copy and paste the provided link on your browser. You now have React and Vite running on your local server. Congratulations!