Open In App

How to setup ReactJs with Vite ?

Last Updated : 31 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Vite is a fast and modern build tool for creating web applications. It increases the development process by providing faster build times and better performance. Some of the benefits of using React with Vite are mentioned below:

vite_react
ReactJS with Vite


  • Fast updates without page reloads.
  • Faster and smaller production builds.
  • Automatic JSX handling.
  • Faster Build

Steps to set up ReactJS with Vite

Step 1: Install the NodeJS

To install NodeJS and npm, visit the NodeJS official website and download the latest stable version. 

Step 2: Create a New Project with Vite

Vite provides a simple way to scaffold new projects. You can use the following command to create a new React project with Vite.

npm create vite@latest my-react-app 
cd my-react-app
  • my-react-app is the name of your project. You can change it to any name you prefer.
  • npm create vite@latest my-react-app: This command initializes a new Vite project with a React template. Replace my-react-app with your desired project name.
  • cd my-react-app: Navigate into your newly created project directory.

Step 3: Select a Framework

Select the React framework.

React
Reactjs with VIte

Step 4: Select Variant

Choose any variant according to your project requirement.

Javascript
ReactJs with Vite

Step 5: Install Dependencies

After initializing the project, you need to install the necessary dependencies. This command will install all the required dependencies listed in the package.json file.

npm install

or

npm i
Screenshot-2025-04-23-183403
How to setup ReactJs with Vite ?

Project Structure:

viteStructure

Step 6: Start the Server

To start the server run the following command:

  npm run dev

This will start the server on the http://localhost:5173/.

Output
Reactjs with Vite

Example: Let's build a basic project using React-Vite, In this example, we will develop a user interface component featuring a button, when button clicked, increments a count value.

App.css
/* App.css */
.btn {
	background-color: bisque;
	border-radius: 6px;
	border: 1px solid transparent;
	padding: 0.7em 1.5em;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	background-color: bisque;
	cursor: pointer;
	transition: border-color 0.25s;
	border: none;
	width: 10rem;
}
App.js
// App.js
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
	const [count, setCount] = useState(0)

	return (
		<>
			<div>
				<img src=
{`https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png%60%7D 
className="logo" alt="Vite logo" />
			</div>
			<h1>Vite + React</h1>
			<div className="card">
				<button className='btn'
					onClick={() =>
						setCount((count) => count + 1)}>
					count is {count}
				</button>
			</div>
		</>
	)
}

export default App

Output:



Article Tags :

Similar Reads