How to Set Up a React JS Project Using Vite: A Complete Beginner’s Guide

React JS is one of the most popular JavaScript libraries for building fast, interactive, and reusable user interfaces. It is commonly used for creating websites, admin dashboards, e-commerce applications, portfolio websites, and large-scale web applications.

Before you start building a React application, you need to set up the project correctly. In this guide, you will learn how to create and run a React JS project using Vite.

Vite is a modern frontend development tool that provides a fast development server and a simple project structure.

Prerequisites

Before creating a React project, make sure the following tools are installed on your computer:

• Node.js
• npm
• Visual Studio Code
• A modern web browser

Node.js is required because React projects use npm packages and JavaScript development tools.

Step 1: Install Node.js

Download and install the LTS version of Node.js on your computer.

During installation, keep the default options selected and complete the setup.

After installing Node.js, restart Visual Studio Code or your computer.

Open the terminal and run:

node -v

Then check the npm version:

npm -v

When both commands display version numbers, Node.js and npm are installed correctly.

Example:

v22.12.0
10.9.0

When the terminal shows an error such as:

npm is not recognized as the name of a cmdlet

Node.js may not be installed correctly, or its installation path may not have been added to the system environment variables.

Reinstall Node.js and restart your computer before trying again.

Step 2: Open the Required Folder

Create a folder where you want to store your React project.

For example:

D:\React-Projects

Open this folder in Visual Studio Code.

You can also navigate to it through the terminal:

cd D:\React-Projects

Make sure the terminal is running inside the correct folder before creating the project.

Step 3: Create a React Project Using Vite

Run the following command:

npm create vite@latest

The terminal will ask you to enter the project name.

Example:

Project name: my-react-app

Next, select the framework:

React

Then select the language variant:

JavaScript

You can also create the project directly with one command:

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

In this command:

• my-react-app is the project name.
• react tells Vite to create a React project.
• JavaScript is used as the project language.

You can replace my-react-app with any suitable project name.

Example:

npm create vite@latest blog-project -- --template react

Step 4: Enter the Project Folder

After creating the project, move inside the project directory.

cd my-react-app

When your project name is blog-project, use:

cd blog-project

You must enter the project folder before installing packages or starting the application.

Step 5: Install Project Dependencies

Run the following command:

npm install

This command reads the package.json file and installs all required dependencies.

The installation may take a few seconds or minutes, depending on your internet speed.

After the installation is complete, a new folder called node_modules will appear inside the project.

Do not manually edit files inside the node_modules folder.

Step 6: Start the React Development Server

Run:

npm run dev

The terminal will display a local development URL similar to:

http://localhost:5173/

Open this URL in your browser.

You can also hold the Ctrl key and click the terminal link.

Your first React application should now be running successfully.

Complete React Setup Commands

You can use the following commands one by one:

cd D:\React-Projects
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

These commands will:

1. Open the project location.
2. Create a React application.
3. Enter the project directory.
4. Install all dependencies.
5. Start the development server.

Open the Project in Visual Studio Code

When you create the project using an external terminal, open it in Visual Studio Code with:

code .

The dot represents the current folder.

When the code command does not work, open Visual Studio Code manually and select:

File → Open Folder

Then select your React project folder.

React Project Folder Structure

A Vite React project normally has the following structure:

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

Each file and folder has a specific purpose.

Understanding Important React Files

src Folder

The src folder contains the main source code of your React application.

Most of your components, CSS files, pages, images, and JavaScript logic will be stored inside this folder.

App.jsx

App.jsx is the main React component.

You can edit this file to change the content displayed on the page.

Replace the existing code with:

function App() {
  return (
    <div>
      <h1>My First React Project</h1>
      <p>React setup completed successfully.</p>
    </div>
  );
}

export default App;

Save the file.

The browser will update automatically.

This feature is called hot module replacement.

main.jsx

The main.jsx file connects your React application with the HTML page.

Example:

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

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

The App component is rendered inside the HTML element with the ID root.

index.html

The index.html file is the main HTML file of the application.

It contains:

<div id="root"></div>

React loads the complete application inside this element.

package.json

The package.json file contains:

• Project information
• Installed dependencies
• Development scripts
• React version
• Vite configuration details

Example scripts:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview"
}

How to Add a New React Component

Inside the src folder, create a new folder named:

components

Inside the components folder, create a file:

Navbar.jsx

Add the following code:

function Navbar() {
  return (
    <nav>
      <h2>My React Website</h2>
    </nav>
  );
}

export default Navbar;

Now import the component inside App.jsx:

import Navbar from "./components/Navbar";

function App() {
  return (
    <div>
      <Navbar />

      <h1>Welcome to React</h1>
      <p>This is my first React application.</p>
    </div>
  );
}

export default App;

This is how reusable components are created and used in React.

How to Add CSS in React

Open the App.css file and add:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f7fb;
}

h1 {
  color: #1e3a5f;
  text-align: center;
}

p {
  text-align: center;
  color: #555;
}

Import the CSS file inside App.jsx:

import "./App.css";

Complete example:

import "./App.css";

function App() {
  return (
    <div>
      <h1>My First React Project</h1>
      <p>React setup completed successfully.</p>
    </div>
  );
}

export default App;

How to Stop the React Server

To stop the development server, return to the terminal and press:

Ctrl + C

The terminal may ask:

Terminate batch job? (Y/N)

Type:

Y

Then press Enter.

How to Start the Project Again

Whenever you reopen the project, you do not need to create it again.

Open the project folder and run:

npm run dev

Make sure the terminal is inside the correct project directory.

Example:

cd D:\React-Projects\my-react-app
npm run dev

Common React Setup Errors

Error: npm Is Not Recognized

Error:

npm is not recognized as the name of a cmdlet

Solution:

1. Install Node.js.
2. Restart Visual Studio Code.
3. Restart the computer.
4. Run node -v.
5. Run npm -v.

Error: Cannot Find package.json

Error:

Could not read package.json

This usually means the terminal is not inside the React project folder.

Use:

cd my-react-app

Then run:

npm run dev

Error: Port 5173 Is Already in Use

Vite may automatically start the project on another port.

Example:

http://localhost:5174/

Open the new URL shown in the terminal.

You can also stop the other running development server with:

Ctrl + C

Error: Missing Dependencies

When dependencies are missing, run:

npm install

Then start the project again:

npm run dev

Error: Blank Browser Page

Check the following:

• App.jsx has valid JSX.
• The component is exported correctly.
• File names and import paths are correct.
• The terminal does not show compilation errors.
• Browser developer tools do not show JavaScript errors.

Example of a correct export:

export default App;

How to Build the React Project

When your application is ready for deployment, run:

npm run build

This command creates an optimized production build.

A new folder named dist will be generated.

my-react-app
└── dist

The dist folder contains the files that can be deployed to a hosting platform.

Benefits of Using Vite with React

Vite provides several advantages:

• Fast project creation
• Quick development server
• Automatic browser updates
• Simple configuration
• Optimized production builds
• Support for JavaScript and TypeScript
• Easy integration with modern frontend tools

For beginners, Vite makes React project setup straightforward and less confusing.

Best Practices for a New React Project

Follow these practices while building your React application:

• Keep component names in PascalCase.
• Store reusable components inside a components folder.
• Store pages inside a pages folder.
• Avoid writing the complete application inside one file.
• Use meaningful variable and function names.
• Remove unused imports.
• Keep CSS organized.
• Check terminal errors carefully.
• Save your code regularly.
• Use Git for version control.

A clean project structure becomes increasingly important as the application grows.

Conclusion

Setting up a React JS project with Vite is simple when the required tools are installed correctly.

The complete process includes installing Node.js, creating the project with Vite, installing dependencies, and starting the development server.

The most important commands are:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

After completing these steps, you can begin creating React components, adding styles, connecting APIs, and building complete web applications.

React may initially appear difficult, but the fundamentals become much easier when you practise by building small projects. Start with a basic page, then move towards forms, CRUD applications, authentication, and API integration.