How to setup ReactJs with Vite ?

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:

• 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.

Step 4: Select Variant

Choose any variant according to your project requirement.

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

Project Structure:

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/.

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 */
.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
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: