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`} 
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:

Understanding Vite's Benefits with React

• Fast Hot Module Replacement (HMR): Vite provides almost instant feedback on changes made in the code. You no longer have to wait for a long reload time when you modify a file.
• Optimized Builds: Vite leverages esbuild for ultra-fast builds and tree shaking, ensuring your app is optimized for production.
• Built-In React Support: Vite comes with built-in support for React. It automatically handles React-specific features like JSX compilation without the need for additional configuration.
• Faster Builds: Vite uses esbuild for bundling the app in production, which is significantly faster than traditional bundlers like Webpack.

Conclusion

Setting up a React project with Vite is incredibly easy and fast. With just a few simple commands, you can have a fully functional React development environment that benefits from Vite’s lightning-fast development server and optimized production builds. Whether you’re starting a new project or migrating an existing one, Vite makes it easy to build modern, high-performance React applications.