A React project can quickly become an unmanageable pile of files if you don't organize it deliberately. This lesson walks through the standard folder structure — components, hooks, assets, pages, and utils — plus the roles of App.jsx and main.jsx, so your project stays navigable as it grows.
1The Source of Truth
A freshly generated React project comes bundled with configuration files, a node_modules folder, and a public folder — but the src/ folder is where virtually all of your actual application code lives. Treat it as the project's source of truth.
Everything else in the project root exists to support what's inside src/: bundler config, dependency management, static files served as-is — but the components, hooks, and logic you write day to day belong here.
// React Project Architecture: Scalability FirstThe src/ Folder
2File Organization
Dropping every file directly into src/ works for a tiny demo, but it quickly becomes unmanageable as an app grows past a handful of components. The standard fix is to organize src/ into subdirectories grouped by purpose.
A typical structure separates components/, hooks/, assets/, pages/, and utils/, each holding one category of file, so anyone opening the project can predict where a given piece of code lives without searching.
src/
components/
Button.jsx
Navbar.jsx
hooks/
useAuth.js
App.jsx
main.jsxSubdirectories
3The components/ Directory
The components/ folder holds reusable UI building blocks that don't represent an entire page on their own — things like buttons, navbars, cards, and modals. Think of them as the LEGO bricks your pages are assembled from.
Because these pieces are meant to be reused across multiple pages, keeping them in one dedicated folder makes it obvious which parts of the UI are shared versus which belong to a single specific view.
// src/components/Button.jsx
export default function Button() {
return <button>Click</button>;
}UI Bricks
4Atomic Component Files
A simple but important convention: one component per file, named to match. A Button component lives in Button.jsx, a Navbar component in Navbar.jsx, and so on.
This makes any component instantly findable by its name alone and keeps individual files small and focused, instead of letting a single file balloon into an unreadable dumping ground for unrelated UI pieces.
import logo from './assets/logo.png';
function Header() {
return <img src={logo} alt='Logo' />;
}One File, One Job
5Assets & Media
Images, fonts, and global icons belong in the assets/ folder inside src/. Unlike files placed in the top-level public/ folder, anything in src/assets/ is processed by the bundler — Vite, Webpack, or whichever tool your project uses.
That processing step is what lets you import logo from './assets/logo.png' directly inside a JavaScript file and use the resulting reference as an <img src={logo} />, rather than having to hardcode a static file path.
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Bundled Assets
6Styles and CSS
CSS can live right next to the component it styles — Button.css sitting beside Button.jsx — or be centralized in a dedicated styles/ folder, depending on the project's convention. Either way, the file is applied by importing it directly into the component's JavaScript file.
Colocating styles with their component tends to scale better for large component libraries, since deleting or moving a component also moves its styling in one step.
// Result: Industrial-Grade ModularityStyling
7Utility Functions
Pure JavaScript functions that format dates, do calculations, or parse data don't belong mixed into UI component files — they belong in a utils/ (or lib/) folder. Keeping them separate makes them easy to reuse and to unit test in isolation from any React rendering.
A good rule of thumb: if a function has no React imports and doesn't return JSX, it's a candidate for utils/ rather than living inside a component file.
/* Next: State & useState (Memory) */Pure Logic
8Step-by-Step Breakdown
The Source of Truth. When you generate a React project, you'll see many configuration files. However, the src/ folder is your sanctuary. It is the absolute source of truth where 99% of your actual application code will live.
File Organization. Inside the src/ folder, dumping all your files into a single directory becomes a nightmare as your app grows. We use a strict folder structure to categorize files by their purpose.
The components/ Directory. The components/ folder is where you put reusable UI pieces that don't represent a full page. Think Buttons, Navbars, Cards, and Modals. These are the LEGO bricks of your application.
Where should a highly reusable Header component be placed in a standard React project?
- →src/assets/
- →src/components/
Atomic Component Files. Rule of thumb: One component per file. If you have a Button component, it goes inside Button.jsx. This makes it instantly searchable and prevents massive, unreadable files.
Assets & Media. Images, fonts, and global icons belong in the assets/ folder. Unlike the public/ folder, files in src/assets/ are processed by the bundler (like Vite or Webpack), meaning you can import them directly into JavaScript.
Styles and CSS. CSS files can be placed next to their components (e.g., Button.css next to Button.jsx) or in a dedicated styles/ folder. You import CSS directly into the JavaScript file to apply the styles.
Utility Functions. If you have pure JavaScript functions that format dates, calculate math, or parse data, keep them out of your UI components. Place them in a utils/ or lib/ folder.
Custom Hooks Folder. When you extract complex state logic out of components, those new Custom Hooks go into a hooks/ folder. This keeps your component files lean and focused purely on the UI.
You wrote a function useTheme() that manages the dark/light mode state. Which folder should it live in?
- →utils
- →hooks
Pages / Views Routing. For applications using a router (like React Router), it's highly recommended to have a pages/ (or views/) folder. These files represent full screen layouts, which then import the smaller pieces from components/.
The App Component. At the root of src/ is App.jsx. This is the top-level orchestrator of your application. It usually houses your Route definitions, global Context Providers, and high-level layout wrappers.
The Entry Point. Finally, main.jsx (or index.jsx) is the absolute entry point. This is the first file the bundler executes. Its sole job is to grab the HTML file and inject the App component into it.
Which file is the primary entry point responsible for mounting the React application to the actual HTML DOM?
- →App.jsx
- →main.jsx (or index.js)
Architectural Mastery. Structure set! You now have an industrial-grade architectural foundation. By keeping your files modular and organized, your app can scale to hundreds of components without becoming a mess.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1A Predictable Structure Makes Accessibility Fixes Easier to Find and Apply
When components, pages, and shared UI pieces live in clearly separated folders, it's far faster to locate every instance of a given pattern (like all buttons or all form inputs) and apply a consistent accessibility fix across the whole app.
2Colocate Component Markup With Its Styles to Avoid Inconsistent Focus Styling
Splitting a component's JSX and its CSS across unrelated folders makes it easy for someone to edit one without noticing the other — colocating them (e.g., Button.jsx next to Button.css) reduces the risk of accidentally breaking visible focus indicators or hover states.
SEO Implications
- 1
A Clear pages/ Folder Maps Naturally to Crawlable Routes
Structuring route-level components in a dedicated pages/ folder, one file per URL, makes it straightforward to audit that every important route has its own title, meta description, and indexable content.
- 2
Well-Organized Code Reduces Bundle Bloat That Slows Page Load
Keeping components, hooks, and utilities cleanly separated makes it easier to code-split and lazy-load only what a given page needs, which improves load performance — a factor search engines weigh when ranking pages.
Best Practices
Keep One Component Per File, Named to Match
A Button component belongs in Button.jsx, not bundled alongside unrelated components in a shared file — this keeps components instantly searchable and prevents any single file from becoming unmanageably large.
Separate Pure Logic From UI Components
Functions that format dates, calculate totals, or parse data shouldn't live inside a component file — placing them in utils/ keeps them independently testable and reusable without dragging in React-specific code.
Frequent Bugs
An asset imported from the assets/ folder fails to load in production.
Files in src/assets/ are processed by the bundler and must be imported in JavaScript (e.g., import logo from './assets/logo.png'); static files that should be served as-is untouched by the bundler belong in the top-level public/ folder instead.
Real-World Examples
Standard Project Layout for a Mid-Size App
A typical React app separates concerns into src/components (shared UI), src/pages (route-level views), src/hooks (custom hooks), src/utils (pure helper functions), and src/assets (images and fonts), with App.jsx and main.jsx at the root tying everything together.
src/
components/
Button.jsx
pages/
Dashboard.jsx
hooks/
useAuth.js
utils/
formatDate.js
App.jsx
main.jsx