# How To Setup a React Project With Vite

Typically, you create a React project with create-react-app ([CRA](https://create-react-app.dev/)) which takes a lot of time to install over 140mb of dependencies. [Vite](https://vitejs.dev/) is a lightweight tool that takes up 31 MB of dependencies, which will save time in starting a new project. Vite also uses the browser-native ES ([ECMAScript](https://ecma-international.org/publications-and-standards/standards/ecma-262/)) modules for linking to JavaScript files, which doesn’t rebuild the entire bundle after each file change. These differences result in a faster experience when creating, updating, and building a React App with Vite.

### Prerequisites

Before we begin, ensure that you have the following installed on your computer:

1. Node.js (version 14.0 or above)
    
2. `npm` or `yarn`
    

You should also have a basic understanding of React and JavaScript.

### Setting up the React project

To create a fresh React project with Vite, run the following commands

```bash
yarn create vite
```

This command will run the Vite executable from the remote `npm` repository.

After the command finishes executing, it will prompt to enter your project name. You can enter your desired project name or type `./` to use the same parent directory as your project folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706599021621/22130c61-db5f-4f1c-ae06-cf5f6c29d16c.png align="center")

For this tutorial, we will use `test-vite-project` as the project name.

```bash
test-vite-project
```

Once the project name is entered, you will be prompted to select the framework. Select `> React` using the arrow-keys.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706599114386/7381f56b-341e-4ef4-a6af-1bc97967cb69.png align="center")

After that, select your desired language type. I will be selecting Typescript,

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706599181993/0a6c9b3c-af63-4dce-acea-25dcbb850354.png align="center")

After setting up the framework, you will see an output that the project has been scaffolded. Vite will then instruct you to install dependencies.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706599222491/e1dc5446-983e-4553-bda5-1b4b9be68c4d.png align="center")

Go to the project root directory,

```bash
cd test-vite-project
```

Then, install all the dependencies using the following command,

```bash
yarn
```

After all the dependencies are installed, execute the following command to run your local server.

```bash
yarn run dev
```

You will see the following output,

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706599325735/45f9505a-170c-4c8f-943c-0067217e8719.png align="center")

Next, open your browser and visit `http://localhost:5173/`. The default React project will be running on port `5173`:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706599507987/c3ce46c1-6a3c-4142-a8fc-a5244c36bc00.png align="center")

When you see this app running, you have successfully setup a React project with Vite. You can now start working on your Application. Open the project in any code editor and Start Coding! 🎉

### Conclusion

You’ve just created a new React application using Vite.js. Vite makes development quicker and simpler, letting you focus and spend more time on building your app and less time setting up your work environment.