React Project Folder Structure
A Typical src Folder Layout
Most React projects organize src/ into subfolders like components/ (reusable UI pieces), pages/ (top-level views tied to a route), and hooks/ (custom hooks) -- though the exact layout varies by project size.
Note: Small projects can start with a flat src/ folder and split into subfolders once it starts feeling crowded -- there's no need to over-organize on day one.
Warning: Copying a large, complex folder structure from a big project into a brand-new small app adds overhead without benefit yet.
Example: A Typical src Folder Layout
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<h2>Component from src/components/Button.jsx</h2>
<Button label={`Clicked ${count} times`} onClick={() => setCount(count + 1)} />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Colocating Related Files
A common pattern is keeping a component's JSX, styles, and tests in the same folder (e.g. Button/Button.jsx, Button/Button.css, Button/Button.test.js) so everything related to that piece of UI lives together.
Note: Colocating files makes it obvious what to delete when you remove a component -- everything is in one folder.
Warning: Scattering a component's styles into a single giant global CSS file makes it hard to tell which rules belong to which component.
Example: Colocating Related Files
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Button/Button.jsx and Button/Button.css live in the same folder
function Button() {
return (
<div>
<style>{`.btn { background: #4a90d9; color: white; padding: 8px 16px; border: none; }`}</style>
<button className="btn">Colocated Button</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Button />);
</script>
</body>
</html>Naming Conventions for Files
Component files are commonly named to match their component (Header.jsx exports Header), using PascalCase for the filename just like the component name itself.
Note: Consistent file naming makes a component easy to find just by searching its name.
Warning: Naming a file header.jsx (lowercase) while the component itself is Header can cause case-sensitivity import errors on Linux-based deployment servers even if it works locally on Windows.
Example: Naming Conventions for Files
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Header.jsx -- PascalCase filename matches the PascalCase component
function Header() {
return <h2>My Site</h2>;
}
// App.jsx
// import Header from './Header';
function App() {
return <Header />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Dumping all components into one giant folder with no organization as the project grows.
- Not knowing that files in the
publicfolder are served as-is, unlike files insrc. - Editing
node_modulesdirectly instead of the actual source files.
src/holds your application's source code -- components, styles, and logic.public/holds static files served as-is, like the HTML shell and favicon.node_modules/holds installed dependencies and should never be edited directly.package.jsonlists dependencies and defines the npm scripts for the project.
Not applicable -- project structure is a development-time convention, not a runtime concern.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: