# Set Up React Typescript with Vite  | Thirdy Gayares

Original Content → [https://thirdygayares.com/react/set-up-react-vite-typescript](https://thirdygayares.com/react/set-up-react-vite-typescript)

In this article, I will show you how to set up a **React** project using **Vite** and **TypeScript** step by step. This guide is perfect for beginners who want to start using React with TypeScript in a fast and efficient way. By the end, you will have a working project that is ready for development.

Important Note

Before starting, make sure you have Node.js installed on your machine. Vite requires Node.js to run. You can download and install it from the official website: [https://nodejs.org/](https://nodejs.org/).

### 1\. Create a Vite + React + TypeScript Project

Run the following command in your terminal:

```plaintext
npm create vite@latest my-new-app --template react-ts
```

![1. Create a Vite + React + TypeScript Project](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F1-create-vite.png&w=1920&q=75 align="left")

Choose React:

![2. Choose React](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F2-choose-react.png&w=1920&q=75 align="left")

Choose Typescript:

![3. Choose TypeScript](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F3-choose-typescript.png&w=1920&q=75 align="left")

Then, go into the project folder:

![4. Go to the Project](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F4-go-into-the-project-folder.png&w=1920&q=75 align="left")

---

### 2\. Install Dependencies

![5. Install Dependencies](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F5-install-dependencies.png&w=1920&q=75 align="left")

### 3\. View Source Code on your favorite IDE

![View Source Code on your favorite IDE ](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F6-view-source-code.png&w=1920&q=75 align="left")

### 4: Run your code

![Run your code ](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F7-run-your-code.png&w=1920&q=75 align="left")

### Your **React + Vite + TypeScript** project is now ready!

![React Setup Output](https://thirdygayares.com/_next/image?url=%2Fimage%2Fblog%2Freact%2F1-set-up-react-vite-typescript%2F8-react-run-output.png&w=1920&q=75 align="left")