I have seen projects flourish and projects fail. Often, the difference isn’t the complexity of the code, but how the components are organized.
When I first started, I used to dump everything into a single folder. It worked for a week, but it quickly became a nightmare to maintain.
In this tutorial, I will show you exactly how I structure my React apps today to ensure they remain easy to manage as they grow.
Component Structure in React
React gives you a lot of freedom, which is both a blessing and a curse. Without a solid plan, your src folder will eventually look like a digital junk drawer.
I have spent countless hours searching for a specific button component hidden deep within unrelated folders.
A good structure helps you find files faster and makes it easier for new developers to join your team.
It also prevents “prop drilling” and makes your code more reusable across different parts of the application.
Method 1: The Group by File Type Approach
This is the most common method I use for small to medium-sized projects, like a New York real estate listing site.
In this approach, you group files based on what they are (components, hooks, services). It is easy to set up when you are just starting a new project.
The Folder Hierarchy
Here is how I usually set up the directory:
src/
components/
Header.jsx
Footer.jsx
PropertyCard.jsx
hooks/
useFetchProperties.js
pages/
Home.jsx
ListingDetails.jsx
styles/
App.cssExample: A Property Listing Component
Let’s look at a practical example. Imagine we are building a component for a Dallas-based housing market app.
// src/components/PropertyCard.jsx
import React from 'react';
const PropertyCard = ({ property }) => {
return (
<div style={{ border: '1px solid #ddd', padding: '20px', margin: '10px', borderRadius: '8px' }}>
<img src={property.imageUrl} alt={property.address} style={{ width: '100%' }} />
<h3>{property.address}</h3>
<p>City: {property.city}, {property.state}</p>
<p>Price: ${property.price.toLocaleString()}</p>
<button onClick={() => alert(`Inquiry sent for ${property.address}`)}>
Contact Agent
</button>
</div>
);
};
export default PropertyCard;And here is how you would use it in your main App file:
// src/App.jsx
import React from 'react';
import PropertyCard from './components/PropertyCard';
const App = () => {
const dallasProperty = {
address: '1230 Maple Avenue',
city: 'Dallas',
state: 'TX',
price: 450000,
imageUrl: 'https://via.placeholder.com/300'
};
return (
<div className="App">
<header style={{ textAlign: 'center', padding: '20px' }}>
<h1>Lone Star Real Estate</h1>
</header>
<main>
<PropertyCard property={dallasProperty} />
</main>
</div>
);
};
export default App;You can refer to the screenshot below to see the output.
Method 2: The Feature-Based Structure
As my projects grew to handle thousands of users, I moved toward a feature-based structure.
This is perfect for complex apps, such as a California DMV appointment scheduler or a US-wide banking portal.
Instead of grouping by “type,” you group by “feature” (e.g., Auth, Profile, Payments).
I found that this reduces the need to jump between distant folders to edit a single feature.
The Folder Hierarchy
src/
features/
authentication/
components/
hooks/
services/
dashboard/
components/
DashboardLayout.jsx
common/
Button.jsx
Input.jsxExample: A Feature-Specific Component
In this example, we will create a “Tax Calculator” feature specifically for users in the United States.
// src/features/taxes/components/IncomeTaxForm.jsx
import React, { useState } from 'react';
const IncomeTaxForm = () => {
const [income, setIncome] = useState(0);
const [tax, setTax] = useState(null);
const calculateTax = (e) => {
e.preventDefault();
// Simplified US Federal Tax logic for demonstration
const estimatedTax = income * 0.22;
setTax(estimatedTax);
};
return (
<div className="tax-form" style={{ maxWidth: '400px', margin: 'auto' }}>
<h2>US Federal Tax Estimator</h2>
<form onSubmit={calculateTax}>
<label>Annual Income (USD):</label>
<input
type="number"
value={income}
onChange={(e) => setIncome(e.target.value)}
placeholder="e.g. 75000"
style={{ display: 'block', width: '100%', marginBottom: '10px' }}
/>
<button type="submit" style={{ backgroundColor: '#004a99', color: 'white', padding: '10px' }}>
Calculate My Tax
</button>
</form>
{tax !== null && (
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>
Your estimated federal tax is: ${tax.toLocaleString()}
</div>
)}
</div>
);
};
export default IncomeTaxForm;You can refer to the screenshot below to see the output.
Method 3: Use Atomic Design Principles
I often turn to Atomic Design when I am working on a project with a very strict design system.
This breaks components down into Atoms, Molecules, Organisms, Templates, and Pages.
It feels a bit overkill at first, but it is incredibly powerful for maintaining consistency across a large platform like an e-commerce giant.
Example: The “Atom” and “Molecule”
An Atom is the smallest possible unit, like a specialized button for a Chicago-based pizza delivery app.
// src/components/atoms/OrderButton.jsx
import React from 'react';
const OrderButton = ({ label, onClick }) => {
return (
<button
onClick={onClick}
style={{ padding: '10px 20px', borderRadius: '5px', border: 'none', cursor: 'pointer' }}
>
{label}
</button>
);
};
export default OrderButton;A Molecule combines atoms. Let’s create a “Pizza Item” molecule.
// src/components/molecules/PizzaItem.jsx
import React from 'react';
import OrderButton from '../atoms/OrderButton';
const PizzaItem = ({ name, price }) => {
const handleOrder = () => alert(`One ${name} added to your cart!`);
return (
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '15px', borderBottom: '1px solid #ccc' }}>
<div>
<strong>{name}</strong>
<p style={{ margin: 0 }}>Price: ${price}</p>
</div>
<OrderButton label="Add to Cart" onClick={handleOrder} />
</div>
);
};
export default PizzaItem;You can refer to the screenshot below to see the output.
Common Mistakes to Avoid
In my experience, the biggest mistake is over-engineering too early. I have seen developers create twenty folders for a simple “Contact Us” page.
Don’t create a complex structure if your app only has five components. Wait until you feel the “friction” of a messy folder before you start moving files around.
Another mistake is having circular dependencies, where Component A imports Component B, which then imports Component A.
A clean structure naturally prevents these loops by keeping the data flow in one direction.
Organize Styles and Assets
I prefer keeping styles close to the component they belong to. If I have a Navbar.jsx, I usually keep Navbar.css in the same folder.
This makes it much easier to delete a component and all its related code when a feature is no longer needed.
For global assets like the company logo or US state flags, I use a dedicated assets folder.
src/
assets/
images/
logo.png
usa-flag.svgFinal Thoughts on React Structure
Choosing the right structure is about finding what works for your specific team and project.
I usually start with the “File Type” approach and migrate to a “Feature-Based” structure once the app grows.
The goal is always the same: make the code easy to find, easy to read, and easy to test. I hope this guide helps you organize your next React project more effectively.
You may also like to read the other tutorials:
- How to Pass Arguments to React Components
- React Hide Component Without Unmounting
- How to Build a React Image Slider Component
- React Error Handling in Functional Components
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
