Step-by-Step Tutorial: Create a React Vite Project in 7 Easy Steps

Introduction

In the past, Create React App was the go-to tool for building React applications. However, it had a major drawback: it significantly slowed down the build and development time, making it take longer to develop the server or reflect file changes.

This issue is now a thing of the past. Thanks to Vite, you can easily set up your React application and reduce the wait time for your file changes to be updated.

Vite , pronounced as "Veet," is a faster and lightweight way to easily build up your React applications. It was introduced in 2020 by the Vue.js creator, Evan You.

In this article, you would learn how to setup your React Application and start your development server.

Prerequisites

• Ensure you have Node.Js installed on your system, if you don't, visit Node.Js official website to install the package.

• A basic knowledge on how to use the terminal.

• A Code editor or IDE (prefferably VS code for this tutorial).

Steps for Setting up a React project with Vite

1. Create a New Folder

   Navigate to File Explorer or Finder if you are on a Mac, and create a new folder. Then, open that folder in your text editor. In this tutorial, we will be using VS Code as our text editor.

2. Create a New React Vite Project

   Open your terminal and type the following command prompt to create a new React Vite Project.

   npm create vite@latest <project-name>
   

   In the above example, The "<project name>" is important because it will be the directory name where Vite sets up your project structure. You can use any name of your choice. In this tutorial, we will use "React-Project".

3. Select your Framework

   You'll be presented with a list of frameworks. Use the arrow keys to navigate and select React.
   
   

4. Select your Variant

   Choose the language or transpiler of your choice. In this tutorial, we're using JavaScript.

After running this command successfully, you should have a project structure containing all your files and resources, the project structure should look like this.

5 Change Directory into Your Folder

Run the next command to change the directory into the folder we created, "React-app".

 cd "React-Project"

6 Install Dependencies

Run the following command to install your project dependencies.

npm install

7 Start Project

To view your website live in your browser, enter the following command.

  npm run dev

Next, you will receive a link like this http://localhost:5173 with a default port of 5173 . Click on the link to view your application in your browser. You should see a display like the one below.

Conclusion

In this article, you successfully learned how to set up a new React project with Vite. Vite provides a faster way of setting up your development environment compared to Create-React-App. I hope you build more React apps with Vite in the future. Happy coding!