Loading course content...
React Project Structure
Now, let's take a closer look at what Vite has created for us:
text
<my_project>
├── .gitignore # Files and folders Git should ignore (e.g. node_modules, .env)
├── README.md
├── eslint.config.js # ESLint configuration for linting rules
├── index.html # App entry HTML served to the browser
├── package-lock.json # Exact dependency tree (auto-generated)
├── package.json # Project metadata, scripts, and dependencies
├── public # Static assets that are served publicly
│ ├── favicon.svg
│ └── icons.svg
├── src # Source code for the application
│ ├── App.css # Component-level styles for App.jsx
│ ├── App.jsx # Root React component for the app
│ ├── assets # Images and other media used by the app
│ │ ├── hero.png
│ │ ├── react.svg
│ │ └── vite.svg
│ ├── index.css # Global styles
│ └── main.jsx # App bootstrap, mounts React into the DOM
└── vite.config.js # Vite configurationThe folders
There are two folders under the project directory: public and src.
public contains all the static assets that should be publicly available, meaning the user can directly access the files by going to the url https://<your_domain>/favicon.svg:
text
<my_project>
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── favicon.svg
│ └── icons.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ ├── hero.png
│ │ ├── react.svg
│ │ └── vite.svg
│ ├── index.css
│ └── main.jsx
└── vite.config.jssrc contains the source code of the app, and that is why are going to do most of our work inside this folder:
text
<my_project>
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── favicon.svg
│ └── icons.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ ├── hero.png
│ │ ├── react.svg
│ │ └── vite.svg
│ ├── index.css
│ └── main.jsx
└── vite.config.jsNotice that there's also a src/assets folder, for storing static assets as well:
text
<my_project>
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── favicon.svg
│ └── icons.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ ├── hero.png
│ │ ├── react.svg
│ │ └── vite.svg
│ ├── index.css
│ └── main.jsx
└── vite.config.jsThe difference is that these assets can only be imported into the app, and user cannot access them directly.
The index.html file
text
<my_project>
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── favicon.svg
│ └── icons.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ ├── hero.png
│ │ ├── react.svg
│ │ └── vite.svg
│ ├── index.css
│ └── main.jsx
└── vite.config.jsindex.html is the entry point of the entire app. It is the file that is served to the user when they visit your site.
It looks like this:
index.html
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>example</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>Pay attention to the highlighted line. It imports a /src/main.jsx file into the app. This is the app bootstrap that brings React into the webpage.
The src/main.jsx file
text
<my_project>
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── favicon.svg
│ └── icons.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ ├── hero.png
│ │ ├── react.svg
│ │ └── vite.svg
│ ├── index.css
│ └── main.jsx
└── vite.config.jsThis file takes the root element from our index.html, and mounts an App component onto it.
src/main.jsx
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>,
);To avoid unexpected errors, do not change anything in this file.
The src/App.jsx file
text
<my_project>
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── favicon.svg
│ └── icons.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ ├── hero.png
│ │ ├── react.svg
│ │ └── vite.svg
│ ├── index.css
│ └── main.jsx
└── vite.config.jsThis is the root component for the entire app. It describes the homepage we saw in the previous lesson:
src/App.jsx
jsx
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "./assets/vite.svg";
import heroImg from "./assets/hero.png";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
return (
<>
<section id="center">
<div className="hero">
<img src={heroImg} className="base" width="170" height="179" alt="" />
<img src={reactLogo} className="framework" alt="React logo" />
<img src={viteLogo} className="vite" alt="Vite logo" />
</div>
<div>
<h1>Get started</h1>
<p>
Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
</p>
</div>
<button
type="button"
className="counter"
onClick={() => setCount((count) => count + 1)}>
Count is {count}
</button>
</section>
// . . .
</>
);
}
export default App;We'll discuss more about its syntax later.
export default function App() { return <h1>Hello, World!</h1> }