Understanding the React Project Structure: What Did Vite Create for Me?

Byadmin



Introduction

In my previous article, I learned how to create a React project using Vite and understood what each setup command does.

After opening the project in Visual Studio Code, I noticed that Vite had created several files and folders for me.

At first, I wasn’t sure what most of them were used for.

Questions like these came to mind:

  • Why do I have both a src folder and a public folder?
  • What is package.json?
  • Why are there two CSS files?
  • What is vite.config.js?
  • Which files will I actually work with every day?

Instead of ignoring them, I decided to understand what each one does.

In this article, I’ll walk through the React project structure and explain the purpose of the most important files and folders.

React project structure created by Vite in Visual Studio Code



Looking at the Project Structure

When I first looked at the project, I saw folders and files like these:

  • node_modules
  • public
  • src
  • package.json
  • index.html
  • vite.config.js

It looked a little overwhelming at first.

The good news is that we don’t need to understand everything immediately.

As beginners, we mainly work with just a few of these files every day.



node_modules

I remembered that this folder was created after running npm install in my previous article.

The node_modules folder stores all the installed packages and dependencies required for the React application to run.

Although it’s an important folder, developers usually don’t edit anything inside it manually.



public

React inside public folder

When I expanded the public folder, I found files like favicon.svg.

The public folder is used to store static files such as images, icons, and other assets.

If a file is placed inside the public folder, it can be accessed directly without importing it into your React components.



The src Folder

React inside src folder

The name src stands for source.

This is the main folder where we write most of our React application.

Inside this folder, Vite created several files for us:

  • App.jsx
  • App.css
  • main.jsx
  • index.css
  • assets

As I continue learning React, this is the folder I’ll spend most of my time working in.

Let’s take a look at each file.



App.jsx

After opening App.jsx, I realized that it contains the main React component that is displayed in the browser.

Whenever I modify this file and save it, I can immediately see the changes reflected in my browser.

React modifying in app_jsx file

React after running app_jsx file how it reflects in browser

This is one of the files I’ll be working with the most while learning React.



App.css

This file contains styles specifically for the App.jsx component.

When I change the CSS here, the appearance of my application changes.

Later, when I create more components, each component can also have its own CSS file.



index.css

At first, I wondered why there were two CSS files.

Unlike App.css, the index.css file contains styles that apply to the entire application.

This is a good place for global styles such as fonts, margins, and background colours.



main.jsx

React inside main_jsx file

The main.jsx file is the entry point of the React application.

Think of it as the starting point.

It loads the App component and displays it inside the browser.

Whenever the application starts, React begins its journey from this file.



assets

In React, assets are static files used by your application, such as:

  • Images (.png, .jpg, .svg, .gif, .webp)
  • Icons
  • Fonts (.ttf, .woff, .woff2)
  • Videos (.mp4)
  • Audio (.mp3)
  • JSON files (sometimes)

If you want to use images from the src/assets folder, you first need to import them into your component.

React (through Vite) then bundles and optimizes these files during the build process.



package.json

I like to think of package.json as the project’s identity card. It stores project information, lists the project’s dependencies and development dependencies, and defines scripts for running, building, and testing the application. When we run npm install, npm reads package.json and installs all the required packages automatically.

React inside package_json file

Here’s what each section of package.json does:

name: The name of your project (react-intro).
private: Setting "private": true prevents the project from being accidentally published to npm.

Since this is my own learning project, I don’t want it to be published as a package.

version: The current version of the project. 0.0.0 is often used for projects still under development.
type: “module” means the project uses ES Modules, allowing you to use import and export.
Scripts:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
Enter fullscreen mode

Exit fullscreen mode

These are commands you can run:

Script Purpose
npm run dev Starts the development server
npm run build Creates an optimized production build
npm run lint Checks the code for errors and coding issues
npm run preview Runs the production build locally for testing

Dependencies:


  "dependencies": {
    "react": "^19.2.7",
    "react-dom": "^19.2.7"
  },
Enter fullscreen mode

Exit fullscreen mode

These packages are required for your application to run.

  • react : The core React library used to build user interfaces.
  • react-dom : Renders React components into the browser’s DOM.

Dev Dependencies:

  "devDependencies": {
    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.3",
    "oxlint": "^1.71.0",
    "vite": "^8.1.1"
  }
Enter fullscreen mode

Exit fullscreen mode

These packages are only needed during development.

  • @types/react : Type definitions for React (mainly for TypeScript support).
  • @types/react-dom : Type definitions for React DOM.
  • @vitejs/plugin-react : Enables React support in Vite (including Fast Refresh).
  • oxlint : A fast linter that checks your code for mistakes and style issues.
  • vite : The build tool and development server for your React project.



index.html

index.html is the main HTML page of a React application. It is the only HTML file that the browser loads. React then takes control and renders the application inside it.

React inside index_html file

React injects the application into:
Enter fullscreen mode

Exit fullscreen mode

This is the root container, where React renders your entire application inside this

.

It also loads main.jsx, which starts the React app.