How to setup ReactJs with Vite ?

In this article, we will see how to install ReactJs with Vite. The Vite is a build tool that provides a faster development experience for modern web projects.

Prerequisites:

• Nodejs
• React

Approach to setup React with Vite:

We have discussed below how to setup the Reactjs with Vite, we ensure that Nodejs is installed in our system or not if not then we will install that first, which will create a new Vite project using the terminal writing the command after that we will select the React framework then select the variant then the last step is to install all the dependencies.

Steps to set up ReactJS with Vite:

Step 1: Install NodeJs, If you haven’t installed NodeJs, download it from the official website.

Step 2: Create a new Vite Project

npm create vite@latest my-react-app --template

Step 3: Select a framework: select the React framework here using the downward arrow key.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 4: Select Variant: choose any variant of your choice using the downward arrow key,i.e: choose JavaScript

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 5: Now, switch to my-react-app directory

cd my-react-app

Step 6: Install Dependencies

npm install

package.json:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

Step 7: Start Server, make sure check your port no on the terminal it may be different for you system.

  ➜  Local:   http://localhost:5173/

Project Structure:

Project Structure

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.

Javascript

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

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;
}

Output:

Output