So, you’ve started building your React app, and everything is going great, until you realize your project folder is a mess. Sound familiar? Don’t worry, we’ve all been there. Structuring a React app can feel overwhelming, but with the right approach, you can keep your codebase clean, scalable, and easy to navigate.
In this article, I’ll walk you through a folder structure that’s worked wonders for me. It’s beginner-friendly, scalable, and perfect for small to medium-sized projects. Let’s dive in!
1. assets/ 🖼️
This folder is for all your static files like images, icons, fonts, and other media. Keeping them in one place makes it easy to manage and reference them throughout your app.
What to store here:
- Images (
logo.png,background.jpg) - Icons (SVGs or icon fonts)
- Fonts (custom or third-party)
2. components/ 🧩
This is where your reusable UI components live. Think of buttons, cards, modals, and anything else that can be reused across your app.
What to store here:
- Reusable components (
Button.jsx,Card.jsx) - Component-specific styles (if not using CSS-in-JS)
- Subfolders for complex components (e.g.,
components/Header/)
3. contexts/ 🌐
React Context is perfect for managing global state without prop drilling. This folder stores all your context providers and related logic.
What to store here:
- Context providers (
AuthContext.js,ThemeContext.js) - Reducers or custom hooks for context logic
4. helpers/ 🛠️
This folder is for utility functions that don’t belong to a specific component or feature. These are the little helpers that make your life easier.
What to store here:
- Utility functions (
formatDate.js,validateEmail.js) - Constants (
appConstants.js) - Custom error handlers
5. hooks/ 🎣
Custom hooks are a game-changer in React. This folder is for all your reusable hooks, keeping them organized and easy to import.
What to store here:
- Custom hooks (
useFetch.js,useLocalStorage.js) - Hooks for specific logic (e.g.,
useAuth.js,useTheme.js)
6. layouts/ 🖼️
Layouts are the skeleton of your app. They define the structure of your pages (e.g., header, footer, sidebar) and help maintain consistency across your app.
What to store here:
- Layout components (
MainLayout.js,AuthLayout.js) - Layout-specific styles
7. pages/ 📄
This folder contains the top-level components that represent each page of your app. Each file here corresponds to a route in your app.
What to store here:
- Page components (
Home.jsx,About.jsx,Contact.jsx) - Page-specific logic and styles
8. services/ 🌍
This folder is for all your API calls and external service integrations. Keeping them separate makes it easy to manage and mock during testing.
What to store here:
- API service files (
authService.js,userService.js) - Configuration files for APIs (e.g.,
apiConfig.js)
9. styles/ 🎨
This folder is for global styles, themes, and CSS utilities. If you’re using a CSS-in-JS library, you might not need this folder, but it’s still useful for global styles.
What to store here:
- Global styles (
global.css) - Theme files (
theme.jsfor styled-components or Material-UI) - CSS utility classes
10. App.js 🎯
This is the entry point of your app. It’s where you define your routes, wrap your app with providers, and set up any global configurations.
What to include here:
- Routing logic (using
react-router-dom) - Context providers (
AuthProvider,ThemeProvider) - Global error boundaries or wrappers
🗂️ The Full Folder Structure
Here’s the complete folder structure, including the files inside each folder:
🚀 Why This Structure Works
- Scalability: As your app grows, you can easily add new folders or subfolders without breaking the existing structure.
- Readability: Everything has its place, making it easy for you (or your team) to find what you need.
- Reusability: By separating concerns, you can reuse components, hooks, and utilities across your app.
🛠️ Pro Tips for Structuring Your React App
- Keep it simple: Don’t overcomplicate the structure. Start with what you need and expand as your app grows.
- Use meaningful names: Name your files and folders in a way that makes their purpose clear.
-
Document your structure: Add a
README.mdfile to explain your folder structure to your team (or your future self).
🎉 Ready to Build?
Now that you have a solid structure in place, it’s time to start building! Remember, the best structure is the one that works for you and your team. Feel free to tweak this setup to fit your needs.
Happy coding 💻
| Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hadil Ben Abdallah |
  
|
|---|
[deleted]