Understanding React Project Structure Created by Vite (Beginner’s Guide)

Vite is a blazing fast frontend build tool powering the next generation of web applications. It is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is very popular among developers especially React developers because it is easy to use and provides different useful features that help in the development. It is not only popular but also the recommended method for creating React Project in React official docs. So, understanding the structure of React project created by Vite would help a lot in the journey of learning and working with React. This is a simplified but detailed guide for beginners who are new to React and do not understand its project structure.

Prerequisites

You should know how to create React project. If you don’t, that’s not a big deal. You can read this guide to understand how to create your React project.

Create React Project using Vite (Quick Recap)

As you know, to create our React Project, we run this command:

npm create vite@latest project-name

Overview of the Project Structure

The Project looks like this:

my-react-app/
├── node_modules/
├── public/
├── src/
├── index.html
├── .gitignore
├── package.json
├── vite.config.js
└── ...

The Project could seem complex to you at first. But believe me, it’s not that much complex as you’ve imagined.

---

Now, I’ll briefly explain each folder and file.

1. node_modules/

   This folder contains the dependencies of the project. Dependencies are those lines or files of code that are needed in our project. Mostly, dependencies are written by senior developers or organizations. Dependencies are regularly maintained and updated. But, we will not be playing much with this folder. Also, this folder is not pushed to GitHub. This is because these are third-party dependencies and anyone can easily install and use them in their project easily. So, pushing these on GitHub would burn the resources. Also, it is a good developer practice not to push them to GitHub.

2. public/

   This folder holds the static assets. Static assets means those which are not updated frequently. The assets in this folder will be served on main ‘/’ path during development. Assets in src/ are processed by Vite for optimizations like hashing, bundling, and cache-busting. Assets in public/ are served as-is and are not processed by Vite, making them suitable for static files. Sometimes, it is not required. To prevent Vite from processing our those assets, we put them in public/ folder. These files can be directly accessed by their fixed path.

3. src/

   It is the most important directory of a React Project. All important files are found here. You would be playing most of the time in this directory. I’ll briefly explain this directory:

   assets: It contains images, icons, fonts, etc.

   main.jsx: Entry point. React Root is implemented here

   App.jsx: Root component. All other components are rendered from here.

   components/: The components are placed in this directory.

4. index.html

   It is the main entry point of the app. It defines the root <div id=”root”></div>. It’s the placeholder from where React mounts and renders the application

5. package.json

   It contains the record of project dependencies and developer dependencies. It also contains the meta data of the app like name, version, type, scripts, etc. When we run npm install, npm installs the dependencies listed in this file. So, if you delete your node_modules, you can install the node_modules again if you have package.json.If you accidentally delete package.json, your project setup will break, as npm won’t know which dependencies to install.

6. vite.config.js

   This file contains Vite’s configuration. Beginners usually do not need to modify it initially

7. .gitignore

   This file is important in source control. It controls those files which are not intended to push on GitHub. Like node_modules as I discussed above. This file contains the name of those files which are not to be pushed.

---

I’ve tried to briefly explain the important parts of the React Project created using Vite. You would understand this better and better with the passage of time and more and more experience. For better understanding, do practice more and more. Because “Practice makes a man perfect.”