--- title: React Folder Structure for Beginners: The Folder... description: A beginner-friendly guide to organizing React projects with a clear folder structure. Covers the purpose of each directory including assets, components, pages,... canonical: https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: React Folder Structure for Beginners: The Folder Organization That Finally Made Sense to Me | daily.dev og:description: A beginner-friendly guide to organizing React projects with a clear folder structure. Covers the purpose of each directory including assets, components, pages,... og:url: https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco og:image: https://api.daily.dev/og/posts/UvKbiLACO.png og:image:alt: React Folder Structure for Beginners: The Folder Organization That Finally Made Sense to Me og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # React Folder Structure for Beginners: The Folder Organization That Finally Made Sense to Me **[Medium](https://daily.dev/sources/medium_js)** · 4 min read · 275 upvotes · 22 comments ## Summary A beginner-friendly guide to organizing React projects with a clear folder structure. Covers the purpose of each directory including assets, components, pages, layouts, hooks, context, services, utils, constants, routes, and styles. Also touches on keeping components small, feature-based organization for larger apps, and consistent naming conventions. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@sahilatahar** · 21 upvotes > This for mid level project not for large projects this project structure will become headache. I start from basic normal folder structure then function based folder structure (you are talking about) but when you have 30+ features in one app you will have to go through a long process to find files even you have name it properly. It feels like a mess. Now i am using features based folder structure. All the files related to one feature is on one place. All the components, pages, hooks, apis, services, states related to one feature will in inside one folder named that feature. it feels like... **@kosai106** · 17 upvotes > This is such a bad frontend architecture if your application scales beyond an MVP. **@aczr** · 4 upvotes > This is a great starting point for beginners and small MVPs. As applications grow, they often become part of a monorepo, with shared packages for the design system, API clients, configuration, validation, and reusable hooks. At that point, organizing everything only by technical type—such as `components`, `hooks`, and `services`—can make related business logic spread across many folders. > > A feature- or domain-oriented structure, inspired by Feature-Sliced Design, usually scales better. For example, a `checkout` feature could contain its own `ui`, `hooks`, `model`, `schemas`, and `server`... **@testtoast909532** · 3 upvotes > Pages and route should be one (routes if using tanstack router or apps in next) layout files should in the route or in components and instead of page/routes use feature to categorized each feature components while common one should be in components. And in the route folder components dont add any code but use them to call feature component. **@bob72** · 3 upvotes > if you are a beginner then just put all in the same directory, no need to waste time on stuff that is not needed yet. Over time it will evolve in good folder structure suitable for the project anyway. > > > If you start a new complex project with a team then all the conventions will be discussed before anyway. > > > P.S. that AI generated image does not make much sense, very bad stuff for beginners that do not have own opinion yet. --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"React Folder Structure for Beginners: The Folder Organization That Finally Made Sense to Me","url":"https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco"},"datePublished":"2026-07-12T05:39:40.634Z","dateModified":"2026-07-12T18:17:31.038Z","description":"A beginner-friendly guide to organizing React projects with a clear folder structure. Covers the purpose of each directory including assets, components, pages,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9b6dc97ec31c9dd2f0189fe856908428?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9b6dc97ec31c9dd2f0189fe856908428?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":22,"discussionUrl":"https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":275},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":22}],"keywords":"javascript,react,frontend","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"React Folder Structure for Beginners: The Folder Organization That Finally Made Sense to Me"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco","comment":[{"@type":"Comment","text":"This for mid level project not for large projects this project structure will become headache. I start from basic normal folder structure then function based folder structure (you are talking about) but when you have 30+ features in one app you will have to go through a long process to find files even you have name it properly. It feels like a mess. Now i am using features based folder structure. All the files related to one feature is on one place. All the components, pages, hooks, apis, services, states related to one feature will in inside one folder named that feature. it feels like function based folder structure for each feature but not all, a lot thing are shared across projects…\nFunction-based\nGroups files by their type.\nsrc/\n├── components/\n├── hooks/\n├── pages/\n├── api/\n├── utils/\n├── types/\n└── schemas/\n\nProblem: One feature is scattered across many folders.\ncomponents/UserForm.tsx\nhooks/useUsers.ts\napi/user.ts\nschemas/user.ts\ntypes/user.ts\n\nFeature-based\nGroups everything related to one feature together.\nsrc/\n├── features/\n│ ├── users/\n│ ├── auth/\n│ └── products/\n└── shared/\n\nInside each feature, you still organize functionally.\nfeatures/\n└── users/\n ├── components/\n ├── hooks/\n ├── api/\n ├── schemas/\n ├── types.ts\n ├── utils.ts\n └── index.ts\n\nFeature-based = Business features at the top level + Function-based organization inside each feature.\n\nFunction-based: “Where is the component?”\nFeature-based: “Where is the Users feature?” → Everything for Users is inside it.\n\nSee https://feature-sliced.design for more info and examples","datePublished":"2026-07-13T04:21:47.718Z","dateModified":"2026-07-13T09:19:14.837Z","url":"https://daily.dev/posts/UvKbiLACO#c-3C1Jg30hl","author":{"@type":"Person","name":"Sahil Atahar","url":"https://daily.dev/sahilatahar","image":"https://media.daily.dev/image/upload/s--jYTP98TM--/f_auto/v1768622996/avatars/avatar_3E5CUHMGZwkEqSfvFYXsF?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":21}},{"@type":"Comment","text":"This is such a bad frontend architecture if your application scales beyond an MVP.","datePublished":"2026-07-12T14:43:13.446Z","url":"https://daily.dev/posts/UvKbiLACO#c-kHgER3jbM","author":{"@type":"Person","name":"Kevin Østerkilde","url":"https://daily.dev/kosai106","image":"https://lh3.googleusercontent.com/a/ACg8ocJLrOJQALcNQWS4AvSVBT5mP8T8GmCD8E9CUe_Bk0HGlQoP2mDP=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":17}},{"@type":"Comment","text":"This is a great starting point for beginners and small MVPs. As applications grow, they often become part of a monorepo, with shared packages for the design system, API clients, configuration, validation, and reusable hooks. At that point, organizing everything only by technical type—such as components, hooks, and services—can make related business logic spread across many folders.\nA feature- or domain-oriented structure, inspired by Feature-Sliced Design, usually scales better. For example, a checkout feature could contain its own ui, hooks, model, schemas, and server folders, while shared UI primitives following Atomic Design could live in a separate packages/ui package. In Next.js applications, server-side data access and Server Actions can also stay close to the feature or business flow they support or they also can be shared and live in a separate package. This keeps each domain more cohesive while still separating truly reusable code.","datePublished":"2026-07-14T14:55:44.382Z","url":"https://daily.dev/posts/UvKbiLACO#c-i8kG62ONG","author":{"@type":"Person","name":"anna","url":"https://daily.dev/aczr","image":"https://media.daily.dev/image/upload/s--uC-Dg8LP--/f_auto/v1776342258/avatars/avatar_VXOiUDMvB?_a=BAMAMiWQ0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Pages and route should be one (routes if using tanstack router or apps in next) layout files should in the route or in components and instead of page/routes use feature to categorized each feature components while common one should be in components. And in the route folder components dont add any code but use them to call feature component.","datePublished":"2026-07-12T19:55:35.621Z","url":"https://daily.dev/posts/UvKbiLACO#c-jSRfVd3c7","author":{"@type":"Person","name":"Test","url":"https://daily.dev/testtoast909532","image":"https://media.daily.dev/image/upload/s--Lju-sS4X--/f_auto/v1724001914/avatars/avatar_geWfqL9aaZHCYdaFNbrid"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"if you are a beginner then just put all in the same directory, no need to waste time on stuff that is not needed yet. Over time it will evolve in good folder structure suitable for the project anyway.\nIf you start a new complex project with a team then all the conventions will be discussed before anyway.\nP.S. that AI generated image does not make much sense, very bad stuff for beginners that do not have own opinion yet.","datePublished":"2026-07-12T20:43:54.221Z","url":"https://daily.dev/posts/UvKbiLACO#c-AAIJVuA3m","author":{"@type":"Person","name":"Bob","url":"https://daily.dev/bob72","image":"https://avatars.githubusercontent.com/u/193962566?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}]} ```