Vite React Setup – Detailed Notes

Vite React Setup is the process of creating and configuring a React application using Vite, a modern frontend build tool. Vite provides a development server, fast updates during development, and a build process for preparing applications for production.

React is used to build user interfaces, while Vite helps developers run, develop, and build React projects efficiently.

React JS Training: JustAcademy React JS Training Course

Course Demo: Register for React JS Course Demo

1. What Is Vite?

Vite is a frontend build tool designed to provide a fast development experience for modern web applications. It supports frameworks such as React, Vue, and others through project templates and plugins.

Vite provides two major features:

• Development server: Runs the application locally and supports Hot Module Replacement (HMR), allowing supported code changes to appear in the browser without a full page reload in many cases.
• Production build: Generates optimized assets that can be deployed to a hosting service.

Example

When you change a React component and save the file, Vite can update the application during development so you can see the changes quickly.

Official documentation: Vite Getting Started Guide.

2. What Is React with Vite?

React with Vite means using React to build the user interface and Vite to manage the development server and build process.

3. Prerequisites for Vite React Setup

Before creating a Vite React application, make sure you have the following tools.

• Node.js: Runs JavaScript-based development tools.
• npm: Installs and manages project dependencies. It is included with Node.js.
• Code editor: Visual Studio Code or another editor.
• Web browser: Chrome, Edge, Firefox, or another modern browser.
• Basic knowledge: HTML, CSS, JavaScript, and introductory React concepts.

Current Vite documentation requires Node.js version 20.19+ or 22.12+; some templates may require a higher version. Check the official guide if your installation displays a compatibility warning.

Download Node.js

Check Node.js Installation

Open Command Prompt, PowerShell, or the terminal in your editor and run:

node -v
npm -v

If both commands display version numbers, Node.js and npm are available in your terminal.

4. Create a React Project Using Vite

Follow these steps to create a new React application using the official Vite project generator.

Step 1: Open the Terminal

Open your terminal and navigate to the folder where you want to create your project.

Step 2: Run the Project Creation Command

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

Explanation:

• npm create vite@latest runs the latest Vite project generator.
• my-react-app is the name of your project folder.
• -- passes the following arguments to the Vite generator when using npm 7 or later.
• --template react selects the React JavaScript template.

You can replace my-react-app with another project name.

Step 3: Move into the Project Folder

cd my-react-app

This command changes the current terminal directory to your new project.

Step 4: Install Dependencies

npm install

This command installs the packages specified in the project's package configuration.

Step 5: Start the Development Server

npm run dev

The terminal displays a local development URL, often http://localhost:5173/. Open the exact URL shown in your terminal in your browser.

Step 6: Start Editing the Application

Open the my-react-app folder in your code editor. Find src/App.jsx, modify the component, save the file, and check the result in your browser.

Official reference: Create a Project with Vite.

5. Vite React Setup Workflow

Install Node.js
      |
      v
Verify Node.js and npm
      |
      v
Create React Project Using Vite
      |
      v
Enter the Project Directory
      |
      v
Install Dependencies
      |
      v
Start Vite Development Server
      |
      v
Open Local URL in Browser
      |
      v
Edit React Components
      |
      v
Test the Application
      |
      v
Build for Production

6. Understanding the Vite React Project Structure

A typical React project created using Vite has the following structure:

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── .gitignore

The exact files may vary according to the selected template and configuration.

7. Understanding the App.jsx File

The App.jsx file typically contains the main React component in a Vite React starter project.

Example

function App() {
  return (
    <div>
      <h1>Welcome to Vite + React</h1>
      <p>My React application is running successfully.</p>
    </div>
  );
}

export default App;

Explanation

• function App() declares a function component.
• return returns the UI description.
• groups the page content.

• displays the main heading.

• displays supporting text.

• export default App allows the component to be imported into another file.

8. Understanding the main.jsx File

The main.jsx file is the entry point that connects the React application to the HTML document.

Example

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Explanation

• StrictMode enables additional development checks for certain React issues.
• createRoot creates a React root for rendering.
• document.getElementById("root") selects the HTML element where React will render.
• renders the App component.
• index.css imports the global stylesheet.

9. Understanding the index.html File

In a Vite project, index.html is located at the project root. Vite uses it as the starting HTML document and processes the referenced JavaScript entry point.

Example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vite React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

The root element is the mounting point for React in this example. The script loads the application's entry point.

10. Add CSS to the React Application

CSS controls the visual design of your React application.

Example: App.css

#root {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  color: #2563eb;
}

p {
  color: #444;
  font-size: 18px;
}

Import the stylesheet into App.jsx:

import "./App.css";

Save the files and view the styling in the browser.

11. Add Interactivity Using useState

The useState() Hook allows a React component to store data and update the UI when that data changes.

Example: Counter App

import { useState } from "react";
import "./App.css";

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

  return (
    <div>
      <h1>Vite React Counter</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

export default App;

Explanation

• useState(0) initializes the count to zero.
• count stores the current value.
• setCount updates the state.
• onClick handles the button click.
• When state changes, React renders the updated UI.

12. Important Vite Commands

The scripts are defined in package.json. A standard Vite React project includes the dev, build, and preview scripts.

13. What Is Hot Module Replacement (HMR)?

Hot Module Replacement (HMR) is a development feature that allows supported code changes to update in the browser without requiring a complete page reload in many cases.

Example

1. Open src/App.jsx.
2. Change the heading from Welcome to Vite + React to Learning React with Vite.
3. Save the file.
4. Check the browser to see the updated heading.

HMR helps developers see changes quickly while working on the application. Exact behavior depends on the type of change and the module being updated.

14. Build a Vite React Application for Production

Once the application is ready, create a production build.

Step 1: Run the Build Command

npm run build

Vite generates optimized files, usually in the dist/ directory.

Step 2: Preview the Production Build

npm run preview

Open the URL displayed in the terminal and check the production build locally. This command is intended for previewing, not as a production hosting server.

Step 3: Deploy the Application

Deploy the contents of the dist/ directory to a compatible static hosting service, or follow the deployment instructions for your chosen framework or platform.

15. Common Vite React Setup Errors

16. Advantages of Using Vite with React

• Fast development startup: Vite is designed to start the development server quickly.
• Hot Module Replacement: Supported edits can appear without a full page reload.
• Simple setup: The React template provides a ready-to-use starter project.
• Production build: Vite generates optimized assets for deployment.
• Flexible configuration: Plugins and configuration options support different project needs.
• Modern JavaScript support: Works with modern frontend development workflows.
• Useful for learning: Helps beginners focus on React components, JSX, CSS, and state.

17. Vite vs Create React App

Create React App (CRA) is an older tool for creating React projects. It has been deprecated by the React team. Vite is a common alternative for setting up a client-side React project, while React also recommends considering a framework for many new production applications.

Reference: React Official Guide to Creating a React App.

18. Best Practices for Vite React Projects

• Use clear and meaningful component names.
• Organize reusable components into suitable folders.
• Keep component logic understandable and focused.
• Use state and props to manage UI data.
• Use CSS files or a styling system consistently.
• Keep dependencies updated and review compatibility before upgrading.
• Read terminal and browser-console messages when debugging.
• Use environment variables carefully and never expose private secrets in client-side code.
• Test the production build before deployment.
• Choose a React framework if your application requires features such as server rendering, integrated routing, or framework-level data handling.

19. Practice Exercise: Create a Student Profile App

Use your Vite React setup to create a small student profile page.

App.jsx

import "./App.css";

function App() {
  const student = {
    name: "Aarav Sharma",
    course: "React JS",
    goal: "Frontend Developer"
  };

  return (
    <div className="profile">
      <h1>Student Profile</h1>
      <h2>{student.name}</h2>
      <p>Course: {student.course}</p>
      <p>Career Goal: {student.goal}</p>
    </div>
  );
}

export default App;

App.css

.profile {
  max-width: 500px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: Arial, sans-serif;
}

.profile h1 {
  color: #2563eb;
}

.profile p {
  line-height: 1.6;
}

Practice Tasks

1. Create the project using Vite.
2. Replace the default component with the student profile component.
3. Add CSS styling.
4. Change the sample student's name and course.
5. Add a button that toggles extra profile details using useState().
6. Run npm run build and resolve any errors.

20. Frequently Asked Interview Questions

Q1. What is Vite?

Vite is a frontend build tool that provides a development server and a production build process for modern web applications.

Q2. Why is Vite used with React?

Vite provides a convenient way to create, run, and build a React application, including support for fast development updates.

Q3. What command creates a Vite React project?

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

Q4. What does npm install do?

It installs the dependencies listed in the project's package configuration.

Q5. How do you start a Vite development server?

npm run dev

Q6. What is HMR?

Hot Module Replacement updates supported modules during development without requiring a full page reload in many cases.

Q7. What is the purpose of main.jsx?

It usually creates the React root and renders the main App component into the HTML document.

Q8. Where is index.html located in a Vite project?

It is normally located at the root of the project and serves as the HTML entry document.

Q9. How do you build a Vite React application?

npm run build

Q10. Where are the production files generated?

In a standard Vite project, the production build is generated in the dist/ directory.

21. Quick Revision Notes

• Vite is a frontend build tool.
• React builds the UI using components.
• Node.js and npm are commonly used for local project setup.
• npm create vite@latest my-react-app -- --template react creates a React starter project.
• npm install installs project dependencies.
• npm run dev starts the development server.
• src/App.jsx usually contains the main component.
• src/main.jsx connects React to the HTML root element.
• Vite supports Hot Module Replacement during development.
• npm run build generates production assets in dist/ by default.

22. Conclusion

Vite React Setup provides a straightforward way to create and run a React project. By installing Node.js, generating a project with Vite, installing dependencies, writing components, and running the development server, you can begin building interactive web applications. Once development is complete, use the production build command and test the generated files before deployment.

Learn React JS with JustAcademy

Explore the JustAcademy React JS Training Course to learn React concepts and develop practical web application skills.

To learn more about the course, Register for the React JS Course Demo.

Official Learning Resources

• Vite Official Documentation – Getting Started
• React Official Documentation – Build an App from Scratch
• React Official Documentation – Creating a React App
• Node.js Official Website