Initialise React Projects with Vite in 2024

Every React project is unique, but they all starts from the same place and contains a basic structure within them all.

• an main.js/index.js file
• an App.jsx file 
• Toolchain to use jsx
• a bundler to bundle all .js, .css file into one ready to deploy file

This is an essential foundation. But doing the same thing again and again for every project initialisation becomes monotonous. 

There comes Vite (pronounced as Veet) to help easy set up for fresh React project. Vite means "Quick" in french. And as the name implies, you can easily initialise a new React app white Vite fast, almost in the blink of an eye and a few keystrokes.

Let's see how Vite can be used to initialise a new project.

Step-1: 

Open terminal in the directory/folder where you want to initialise the React project. In the terminal, type the following command:

npm create vite@4.2.0

Step-2:

After that, you will be asked to input the project name. Enter project name as per your requirement. 

Step-3:

Then you will be asked to select a framework, select React from the list.

Step-4:

As you select your framework, you will be asked about the variant you want to imply on your project, choose the variant you prefer. 

Step-5:

As soon as all the above mentioned steps are done, your project will be ready. 

Step-6:

Navigate to the project folder with the following command and install the relevant dependencies using the next mentioned command.

cd `your-project-folder-name`

npm install

Step-7:

Finally, run the following command to get started with your React project.

npm run dev 

Once the dev server is started, in the terminal you will find the server and portname your app is running. Navigate to the server with the designated portname in your browser and you will see your project running there.

Remove the unnecessary boilerplate code in the app, and write your own code to develop something interesting.

See you in another post. Have a good day and a happy learning journey ahead.