The React project structure of a new Vite app is a small set of files, and each one has one clear job. Understanding them before you write components stops you from editing the wrong file and makes errors easier to read.

If you have not created a project yet, follow the guide on how to create a React app with Vite. The tree below is what that command produces.

Here is the structure of the generated project:

text

my-app/
  index.html
  package.json
  vite.config.js
  public/
  src/
    main.jsx
    App.jsx
    App.css

The src folder also holds index.css for global styles and an assets folder for imported images. The generated project also includes a config file for the linter you chose during setup, plus git and editor settings that are omitted here.

index.html

The browser loads this file first. Unlike a plain HTML site, it contains almost no visible content.

html

<!doctype html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

The important parts are the div with id root and the script tag. The div is an empty container, and the script loads your React code into it. React takes over that div and renders your app inside it.

src/main.jsx

This file is the entry point of your JavaScript. It creates a React root and renders your app into the div from index.html.

App.jsx

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>,
);

Each line has a purpose: the first two import StrictMode from React and createRoot from React DOM, the third loads global styles, and the fourth imports your root component. The final call finds the root div and renders the App component into it.

StrictMode is a development-only wrapper that helps catch mistakes early. In development it deliberately runs rendering and Effect setup an extra time so impure components and missing cleanup show up sooner. It does nothing in a production build.

src/App.jsx

This is your root component. It is the top of the component tree, so it is the natural place to put your page layout and top-level state.

The template ships a counter demo here. A minimal version looks like this:

App.jsx

function App() {
  return <h1>My React App</h1>;
}
 
export default App;

Whatever App returns becomes the visible page inside the root div. As your app grows, you split this into smaller components, each one a function in its own file.

package.json and vite.config.js

These two files sit at the project root and control tooling rather than UI.

package.json lists the project name, its scripts, and its dependencies. The scripts are the commands you run in the terminal, such as dev for the development server and build for a production bundle.

vite.config.js configures the build tool. For a React project it is short:

index.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
});

The react plugin teaches Vite how to transform JSX and enable fast refresh. You rarely edit this file when you are learning.

public and src/assets

The public folder holds static files that are served exactly as they are, such as favicon.svg. Files here are not processed by the build tool.

The src/assets folder is for files you import from your code, such as images. Vite processes these imports and can fingerprint their names for caching.

The global stylesheet index.css styles the whole app. App.css is imported by App.jsx, but a plain CSS import is not scoped, so its rules apply to the whole page too. Splitting styles per component is a naming convention here, not a scoping feature.

What to learn next

With the structure clear, build something interactive. The guide on your first React component walks through a counter, and the React with TypeScript guide covers the same setup when you want types.

Rune AI

Key Insights

index.html is the shell the browser loads, with a div of id root.
src/main.jsx mounts the React app into that div.
src/App.jsx is your root component.
package.json lists scripts and dependencies.
vite.config.js enables React support through a plugin.

Frequently Asked Questions

Which file is the entry point of a React app?

The entry point is src/main.jsx. It calls createRoot on the element with id root in index.html and renders the App component inside it.

What is the difference between index.html and App.jsx?

index.html is the static HTML shell that the browser loads first. App.jsx is a React component whose output replaces the div with id root inside that shell.

Where do I put my own React components?

Create files inside the src folder, usually one component per file. For small projects, App.jsx can hold extra components, but a separate file per component scales better.

Conclusion

A Vite React project is small and predictable. index.html is the browser entry point, src/main.jsx mounts the app, App.jsx holds your root component, and vite.config.js wires up the build. Put your own components in the src folder.

React Project Structure for Beginners: Files and Folders

index.html

src/main.jsx

src/App.jsx

package.json and vite.config.js

public and src/assets

What to learn next

Rune AI

Frequently Asked Questions

Which file is the entry point of a React app?

What is the difference between index.html and App.jsx?

Where do I put my own React components?

Conclusion

How to Build a Dropdown Menu in React

How to Animate React Components with Motion

Headless UI Components Explained: Logic Without Locked Styling

React Project Structure for Beginners: Files and Folders

index.html

src/main.jsx

src/App.jsx

package.json and vite.config.js

public and src/assets

What to learn next

Rune AI

Frequently Asked Questions

Which file is the entry point of a React app?

What is the difference between index.html and App.jsx?

Where do I put my own React components?

Conclusion

More in this topic

How to Build a Dropdown Menu in React

How to Animate React Components with Motion

Headless UI Components Explained: Logic Without Locked Styling