Setup React With Vite on VSCode: A Step-by-Step Tutorial

Vite is a fast and efficient build tool that delivers a high performance, flexible, and leaner development experience for modern web projects.

Creating a React project can be slow and would take a couple of minutes, thereby slowing the development process. It's even worse with an older machine.

Vite will make your project faster than usual. It also allows you to select the framework you want to work with.

In this step-by-step tutorial, you will learn how to install React with Vite on your VSCode editor.

This article is best suited for beginner front-end developers.

Step 1: Open your VScode (Visual Studio Code) editor and open a new terminal.
To do this, click on the three white dots at the top left area of your screen and select “Terminal” and “New Terminal”.

or press ```Ctrl

• Shift + {% raw %}`` and select the folder you want your project to be in. A new terminal will open at the bottom of your VScode editor.

Step 2: Inside your terminal, type npm create vite@latest and press enter.

It will ask for permission to download create-vite@latest packages.

Press y and click enter.
It will download the create-vite@latest packages; it will only take 2 or 3 seconds.

Step 3: Vite allows you to give a name to your project. The default name is vite-project.

In this step, you can change the name to whatever you want or leave it as the default name and press enter.

I will leave mine in the default name.

Step 4:You will see a list; use the arrow keys to move up and down the list, click enter to choose your preferred option.
In this step, we will select React

Next, You will see four options to choose from, Navigate to and select JavaScript.

And that's it; you now have your Vite project. Easy peasy, lemon squizy.

But we still haven't finished yet; you have to run your project and make it live.

Step 5: Enter your Vite project with the name you saved it with in Step 3.

Look at your terminal, and you will see a list of three commands. Type in the first command exactly as it is written, and press enter. Look at the image below to better understand it.

In the image above, I typed in the first command on the list. Your command will be different if you had saved your project with a different name from mine.

Type it as you see it written on your terminal and press enter to access your project.

Step 6: Next, type the second command on that list, npm install and click enter.

That will install all the dependencies inside the Vite project.

It will take 3 seconds to 1 minute to complete the installation, depending on the speed of your machine and the internet.

Step 7: Type the third command on the list, npm run dev. Remember to type it exactly as you see it written on the list.

Type npm run dev and press enter. It will start your Vite project.

On your terminal, you will see a blue link; click on it to open your Vite project in your web browser.

Your Vite React project will look like this;

Step 8: To access your project files, go to your VScode editor and click Explorer at the top left corner of your screen.

A panel will open, and you will see your project folder with all the Vite and React packages.

You can now start working on your project.

Conclusion:
See, that wasn't hard at all, and the whole process didn't take too long to complete. With time and practice, it will become faster and more intuitive.

Now that you have learned to install React with Vite on your VSCode editor, I advise that you keep practicing and learn to install other libraries and frameworks. Remember, practice makes perfect.

Thank You
And
Happy Coding.