Browse Courses

React Structure

July 26, 2025 4 min read Frontend Docs IBM-FSSD Vite Project-Structure

This document explains how to create React projects using the Vite build tool detailing the project setup process and the resulting folder structure.

On this page

This document provides a guide to creating React applications using the Vite build tool. It covers the steps for project creation, explains the advantages of Vite over traditional tools like Create React App, and offers a detailed breakdown of the generated folder and file structure.

Introduction to Vite for React

Previously, React projects were often created using the Create React App (CRA) tool. However, CRA can install numerous files and folders that may not be necessary, potentially leading to a large project size.

A newer, improved tool for front-end development is Vite. Vite is a build tool that enhances the development experience for modern web projects, supporting not only React but also Angular, plain JavaScript, and other libraries. It accelerates the build and development process by leveraging how modern browsers handle JavaScript modules, bundling code only when necessary. This optimization significantly speeds up programming and build times.

Creating a React Project with Vite

To create a new React project using Vite, follow these steps:

  1. Run the npm create command in the terminal of a code editor.
  2. Provide a project name when prompted. From the list of frameworks that appears, select React.
  3. Choose JavaScript as the scripting language. A new folder with the project name will be created.
  4. The terminal will display instructions to start the project.
    • cd <project-name>: Navigates to the project directory.
    • npm install: Installs all the necessary packages and dependencies.
    • npm run dev: Starts the development server and runs the React application.
  5. A link with a port number will be provided to open the application in a web browser.

Understanding the React Folder Structure

After creating a project with Vite, the folder structure includes several key directories and files.

Directory/FileDescription
node_modules/Contains all dependencies installed via NPM or Yarn.
public/Holds static assets like the main HTML file, images, and fonts. The index.html file serves as the entry point for the application.
src/Contains the main source code for the React application.
src/main.jsxThe entry point for the React application. It renders the root component (App.jsx) into the main HTML file.
src/App.jsxThe root component of the application. It composes the UI by combining other components and logic.
package.jsonContains project metadata, dependencies, and scripts for running, building, and testing the application.
vite.config.jsConfiguration file for the Vite build tool. Used to customize the build process, add plugins, and configure the development server.
.gitignoreSpecifies files and directories that should be ignored by Git version control.
README.mdProvides project information, including setup instructions and usage guidelines.
eslintrc.cjsA configuration file for ESLint, a tool for linting JavaScript code. The .cjs extension indicates a CommonJS module.

Conclusion

Vite offers a modern and efficient way to build front-end projects. It optimizes development by bundling code on demand, which speeds up both programming and build times. The resulting folder structure is well-organized, with distinct directories for dependencies, public assets, and source code, providing a solid foundation for building React applications.

FAQs

Vite offers faster build and development times by bundling code on demand, which avoids the installation of unnecessary files and reduces the overall project size.

  1. npx create-react-app <project-name>
  2. npm init react-app <project-name>
  3. npm create vite@latest <project-name>
  4. vite new <project-name>
(3) The correct command to create a new React project with Vite is npm create vite@latest <project-name>.

The src/main.jsx file is the entry point of the application, responsible for rendering the root component (App.jsx) into the index.html file.

  1. It contains static assets like images and fonts.
  2. The index.html file inside it serves as the application’s entry point.
  3. It holds the main source code of the React application.
  4. Files in this directory are served directly by the development server.
(3) The public directory is for static assets, not the main source code, which is located in the src directory.

Vite leverages modern browser features to handle JavaScript modules, bundling code only when required. This on-demand approach significantly speeds up both programming and build times.

ItemDescription
A. node_modules/1. Contains project metadata and dependencies
B. src/2. Holds static assets like the main HTML file
C. package.json3. Contains all installed NPM packages
D. public/4. Contains the main source code for the React application
A-3, B-4, C-1, D-2.

The vite.config.js file is used to configure the behavior of the Vite build tool, including specifying plugins and customizing the development server.

True. The vite.config.js file allows developers to customize Vite’s build and development settings.

It is a configuration file for ESLint, a linting tool that helps enforce consistent code style and identify potential errors in JavaScript code.
Frontend Frameworks
ES6