React

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

By Sravanthi

devto-react2w ago · Jul 9, 20266 min read

Image courtesy of devto-react

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

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.

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

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

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.

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

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.

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 injects the application into:

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

Enter fullscreen mode Exit fullscreen mode

This is the root container, where React renders your entire application inside this <div>.

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

<script type="module" src="/src/main.jsx"></script>

Enter fullscreen mode Exit fullscreen mode

vite.config.js

vite.config.js is the configuration file for Vite. It tells Vite how to build and run your React application.
As a beginner, I don't need to modify this file very often, but it's useful to know that it exists.

Conclusion

When I first opened my React project, the number of files and folders felt a little overwhelming.

After exploring them one by one, I realized that each file has a specific purpose.

As a beginner, I don't need to understand every detail immediately.

For now, knowing where my React code lives and what each important file does gives me a solid foundation to continue learning React.

Key Takeaways

After exploring the React project structure, here are the main things I learned:

src is where I write most of my React code.
public stores static files such as images and icons.
App.jsx is the main React component displayed in the browser.
main.jsx is the entry point of the React application.
package.json stores project information, dependencies, and scripts.

What's Next?

Now that I understand the React project structure, the next step is learning JSX, one of React's core concepts.

After that, I'll explore the four ways of conditional rendering and learn when to use each approach.

I'm excited to continue this learning journey, and I hope you'll join me!

Thanks for reading, and happy coding!

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

Introduction

Looking at the Project Structure

node_modules

public

The `src` Folder

App.jsx

App.css

index.css

main.jsx

assets

package.json

index.html

vite.config.js

Conclusion

Key Takeaways

What's Next?

I Created a Structured JavaScript and React Learning Repository as Part of My Learning Journey

React useState Hook

I Built React Native Apps for Months — Then Scored 3/10 on React Fundamentals

Introduction

Looking at the Project Structure

node_modules

public

The src Folder

App.jsx

App.css

index.css

main.jsx

assets

package.json

index.html

vite.config.js

Conclusion

Key Takeaways

What's Next?

Keep reading

I Created a Structured JavaScript and React Learning Repository as Part of My Learning Journey

React useState Hook

I Built React Native Apps for Months — Then Scored 3/10 on React Fundamentals

The `src` Folder