How to Structure a React App Like a Pro 🔥
Hadil Ben Abdallah

Hadil Ben Abdallah @hadil

About: Software Engineer • Technical Content Writer • LinkedIn Content Creator

Location:
Tunisia
Joined:
Nov 13, 2023

How to Structure a React App Like a Pro 🔥

Publish Date: Feb 11
130 46

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)

assets
Assets folder

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/)

components
Components folder

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

contexts
Contexts folder

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

helpers
Helpers folder

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)

hooks
Hooks folder

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

layouts
Layouts folder

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

pages
Pages folder

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)

services
Services folder

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.js for styled-components or Material-UI)
  • CSS utility classes

styles
Styles folder

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:

The Full Folder Structure
The full folder structure

🚀 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

  1. Keep it simple: Don’t overcomplicate the structure. Start with what you need and expand as your app grows.
  2. Use meaningful names: Name your files and folders in a way that makes their purpose clear.
  3. Document your structure: Add a README.md file 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
LinkedIn GitHub Daily.dev

Comments 46 total

  • АнонимFeb 11, 2025

    [deleted]

  • Shaquille Niekerk
    Shaquille NiekerkFeb 11, 2025

    Great read!

  • JACK NGUYEN
    JACK NGUYENFeb 11, 2025

    wow

  • Sateesh
    SateeshFeb 11, 2025

    Good one

  • Ansell Maximilian
    Ansell MaximilianFeb 12, 2025

    Nice!

  • M. Fandi Arfabuma
    M. Fandi ArfabumaFeb 12, 2025

    nice information

  • Minato
    MinatoFeb 12, 2025

    Very helpful!

  • Engineer Robin 🎭
    Engineer Robin 🎭Feb 12, 2025

    Thank you for sharing! 😊🔥

  • Richard William
    Richard WilliamFeb 12, 2025

    It all began with a sinking feeling in the pit of my stomach. I had invested $152,000 in what I thought was a promising cryptocurrency venture, only to realize too late that it was a sophisticated scam.  I felt like I had lost everything—my hard-earned money, my confidence, and my hope, I tried everything I could think of to recover my funds. I reached out to the platform’s support (which no longer existed), But every door I knocked on seemed to lead to a dead end. The world of cryptocurrency, with its anonymity and decentralization, felt like a labyrinth designed to keep me trapped in my loss, as I scoured the internet for any glimmer of hope, I stumbled upon Dexdert Net Pro. At first, I was skeptical. I had seen countless recovery services promising to retrieve lost funds, only to discover they were scams themselves. But something about Dexdert Net Pro felt different. Their website was professional, their team was transparent, and they had a track record of success stories that seemed genuine. Desperate I  decided to take a chance,  I reached out to Dexdert Net Pro and explained my situation. To my surprise, they responded quickly and with genuine empathy. Their team of experts, specializing in blockchain technology and cyber investigations, took the time to understand the details of my case. They asked for all the relevant information—transaction records, communication with the scammers, and any other evidence I could provide,   Dexdert Net Pro worked tirelessly on my case. Throughout the process, they kept me informed, providing regular updates and answering my questions with patience and clarity, Dexdert Net Pro successfully recovered my lost Bitcoin. I couldn’t believe it. The $152,000 I thought was gone forever was being returned to me. The relief and gratitude I felt were overwhelming. Dexdert Net Pro had not only reclaimed my funds but also restored my faith in the possibility of justice in the digital age,  I realize how fortunate I was to find Dexdert Net Pro,  Their expertise, dedication, and integrity turned what seemed like an impossible situation into a story of redemption. If you ever find yourself in a similar predicament, I can’t recommend Dexdert Net Pro enough. They truly are the best in the business.

    Email:(DexdertNetPro@mail.com) Telegram:(@Dexdertprorecovery)

  • Alex
    AlexFeb 12, 2025

    Terrible advice, to implement 1 more or less complex page will need 10 files in different directories. Will be a mess that hard to navigate.

    Working with codebase structured by many folders, that person also used Crypto.randomUUID() as React key, just because Eslint complained about indexes.
    Code should reflect app and business logic, and adapt to it, there is no "right" universal answer.

    Just structure folders by routes, put files right there, is something reused, then move it to a folder at the top level

    App
    -- public (or 'static')
    -- routes/pages
    -- -- route1
    -- -- -- Page.tsx
    -- -- -- Component1.tsx
    -- -- -- Component2
    -- -- -- -- Component2.tsx
    -- -- -- -- index.ts
    -- -- -- -- index.module.css
    -- -- -- -- Component2.test.tsx
    -- -- -- index.module.css
    -- hooks
    -- components
    ...

    Don't do stuff like in picture.
    Image description

    • erkn
      erknFeb 12, 2025

      I half agree, clearly context of the content is aiming for mid/big projects. On the other hand projects are alive as long as there are users, so you need to keep adapting your project, making big assumptions will be harder to fix.

      • Alex
        AlexFeb 12, 2025

        There are more important principle than Solid - YAGNI (You aren't gonna need it).

        Do things as needed, don't overcomplicate things. Assuming some folder structure from the start is a waste of time.
        If project is small, anything will work, if it will grow, most of it will be restructured on the way. So why bother with making 100500 folders.

        Image description

        • erkn
          erknFeb 17, 2025

          solid and yagni are saying the same thing as you, they don't care about your folder structure. when i do folder structure i think like this, if i to remove this new feature, would be done by removing entire directory or do i need to navigate 50 different places and nit-pick them.

      • Naval Deep
        Naval Deep Feb 12, 2025

        Its all written by AI

        • erkn
          erknFeb 17, 2025

          Yeah totally possible, didn't check that.

    • Hadil Ben Abdallah
      Hadil Ben AbdallahFeb 12, 2025

      There’s no one-size-fits-all solution when it comes to structuring a React app.
      The best structure depends on the specific needs of the project, the team’s workflow, and the complexity of the app.

      Your suggestion to organize by routes and keep related files together is a fantastic approach, especially for larger teams and more complex applications. It makes it easier to navigate, debug, and maintain the codebase, as everything related to a specific feature or route is grouped logically.

      For example, your structure:

      App  
      -- public (or 'static')  
      -- routes/pages  
      -- -- route1  
      -- -- -- Page.tsx  
      -- -- -- Component1.tsx  
      -- -- -- Component2  
      -- -- -- -- Component2.tsx  
      -- -- -- -- index.ts  
      -- -- -- -- index.module.css  
      -- -- -- -- Component2.test.tsx  
      -- -- -- index.module.css  
      -- hooks  
      -- components  
      ...  
      
      Enter fullscreen mode Exit fullscreen mode

      is a great way to keep things modular and intuitive. It ensures that developers can quickly find what they need without jumping between multiple folders.

      The key takeaway here is that code structure should reflect the app’s logic and adapt to its needs. Whether it’s organizing by routes, features, or modules, the goal is to make the codebase scalable, maintainable, and easy to navigate for everyone involved.

      Thanks for sharing your insights

    • Roldex Stark
      Roldex StarkFeb 13, 2025

      That key thing is true though and also at starting new coder will not understand that much of context but they'll learn slowly and gradually.

      • Alex
        AlexFeb 13, 2025

        Index as a key bad idea only if you can reorder children, so 95% of cases it's not the issue.
        Modern popular ESLint configs not include this any more.

  • Vaibhav thakur
    Vaibhav thakurFeb 12, 2025

    Great insights! The structured approach you’ve outlined for building React apps will definitely help developers keep their projects organized and maintainable. The clear explanation of the folder structure and separation of concerns is particularly helpful for scaling applications. Thanks for sharing these valuable tips

  • Kunal Kumar
    Kunal KumarFeb 12, 2025

    Nice

  • Tomas Stveracek
    Tomas StveracekFeb 12, 2025

    Great article! I really like how you explained the structure of a React app. It's clear and easy to follow, especially for beginners. I'll definitely use some of these tips in my own projects. Thanks for sharing!

  • Saisathish
    SaisathishFeb 12, 2025

    very nice, well explained. I am currently using similar structure. thank you for writing considering all parts of the project

  • krlz
    krlzFeb 12, 2025

    Define shared and core components for reuse and composition. Standardize naming to align with main components, especially for granular elements. More details here blog.stackademic.com/react-folder-...

  • Block Experts
    Block ExpertsFeb 12, 2025

    Using Javascript instead of Typescript is bad idea! ;)

  • Rense Bakker
    Rense BakkerFeb 12, 2025

    Please don't structure your React project like this if a team is going to work on it, seperate the project into modules or use a folder structure that represents the routes of the app. Keep related things together, so other developers can easily find stuff, instead of having to look through several different folders when debugging.

    • Hadil Ben Abdallah
      Hadil Ben AbdallahFeb 12, 2025

      Thank you for sharing your perspective!

      You’re absolutely right, when working in a team, modularity and route-based organization can make a huge difference in maintainability and collaboration.

      The structure I shared is more of a general starting point for small to medium-sized projects, especially for solo developers or beginners. However, for larger teams or complex apps, organizing by modules or routes is often the better approach. It keeps related files (components, styles, hooks, etc.) together, making it easier for everyone to navigate and debug.

      For example, a route-based structure might look like this:

      src/  
      ├── features/  
      │   ├── auth/  
      │   │   ├── components/  
      │   │   ├── hooks/  
      │   │   ├── services/  
      │   │   └── index.js  
      │   ├── dashboard/  
      │   │   ├── components/  
      │   │   ├── hooks/  
      │   │   ├── services/  
      │   │   └── index.js  
      └── shared/  
          ├── components/  
          ├── hooks/  
          └── utils/  
      
      Enter fullscreen mode Exit fullscreen mode

      This way, everything related to a specific feature or route is grouped together, which can be a game-changer for team collaboration.

      Ultimately, the best structure depends on the size of the project, the team’s preferences, and the complexity of the app. The key is to keep it organized, consistent, and easy to navigate.

      Thanks again for your comment

  • Mushtak Shaikh
    Mushtak ShaikhFeb 13, 2025

  • May Sanders
    May SandersFeb 13, 2025

    To deliver a pro-level React application one must use best practices that combine component modularization with reusable design alongside properly organized folders and need the implementation of state management tools like Redux and Context API. Assessable coding architecture coupled with the implementation of TypeScript and ESLint tools together with best practices generates considerable improvements to code maintenance. Through established practices and efficient workflow protocols a software development company facilitates smooth application development that leads to exceptional quality results.

  • Conor
    ConorFeb 13, 2025

    How to Structure a React App Like a Pro - use Typescript

  • Aida Said
    Aida SaidJun 27, 2025

    Very helpful. Thanks for sharing

  • Saeed Khosravi
    Saeed KhosraviJun 27, 2025

    Very helpful for quick starting a new react project

Add comment