--- title: Delightful React File/Directory Structure | daily.dev description: React is famously unopinionated when it comes to file/ directory structure. How should you structure the files and directories in your applications? There is... canonical: https://daily.dev/posts/delightful-react-file-directory-structure-yqt5b45vl twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Delightful React File/Directory Structure | daily.dev og:description: React is famously unopinionated when it comes to file/ directory structure. How should you structure the files and directories in your applications? There is... og:url: https://daily.dev/posts/delightful-react-file-directory-structure-yqt5b45vl og:image: https://api.daily.dev/og/posts/yQT5B45VL.png og:image:alt: Delightful React File/Directory Structure 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. # Delightful React File/Directory Structure **[Josh W Comeau](https://daily.dev/sources/joshwcomeau)** · 14 min read · 111 upvotes · 5 comments ## Summary React is famously unopinionated when it comes to file/ directory structure. How should you structure the files and directories in your applications? There is no one “right” way, but I've tried lots of different approaches in the 7+ years I've been using React. In this blog post, I'll share the structure I use across all my current projects, including this blog. ## 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. **@kkurko** · 5 upvotes > Components, hooks and helpers are layers, you will have scale problems with per-layer approach. Per-feature or vertical approach will work much better (when features are as self-contained you can ship independently, you can work without too much context of the whole app and more), and yeah, you kinda showed it later with a FileViewer **@dailydevtips** · 3 upvotes > Lovely article, and great you mention refactoring is key. > We have many things starting as feature specific structure, but quickly seem to turn into global wide-used abstractions. > > It all comes down to your needs now and in the future, generally would suggest where possible try to abstract as far as possible (you might need it one day, and then you'll be ready for it) **@idoshamun** · 2 upvotes > That's pretty neat. I love it **@hamatoyogi** · 2 upvotes > Great post. **@danferrer** · 1 upvotes > Love these examples and explanation! Have been structuring my apps by features for a while (and separating anything thats shared into common, utils, helpers, types, etc folders) And its worked best for me ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/delightful-react-file-directory-structure-yqt5b45vl) ```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":"Delightful React File/Directory Structure","url":"https://daily.dev/posts/delightful-react-file-directory-structure-yqt5b45vl","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/delightful-react-file-directory-structure-yqt5b45vl"},"datePublished":"2022-03-15T13:19:51.201Z","dateModified":"2022-03-15T13:19:51.201Z","description":"React is famously unopinionated when it comes to file/ directory structure. How should you structure the files and directories in your applications? There is...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ba371a2c28dec2dd3defbea4bcafaaf9","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ba371a2c28dec2dd3defbea4bcafaaf9","isAccessibleForFree":true,"articleSection":"Josh W Comeau","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":"Josh W Comeau","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/4a121572d03c40a2bff9e8ed0f0792b5","url":"https://daily.dev/sources/joshwcomeau"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/delightful-react-file-directory-structure-yqt5b45vl","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":111},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"react","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Josh W Comeau","item":"https://daily.dev/sources/joshwcomeau"},{"@type":"ListItem","position":3,"name":"Delightful React File/Directory Structure"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/delightful-react-file-directory-structure-yqt5b45vl","comment":[{"@type":"Comment","text":"Components, hooks and helpers are layers, you will have scale problems with per-layer approach. Per-feature or vertical approach will work much better (when features are as self-contained you can ship independently, you can work without too much context of the whole app and more), and yeah, you kinda showed it later with a FileViewer","datePublished":"2022-03-22T22:58:25.657Z","url":"https://daily.dev/posts/yQT5B45VL#c-1FDDnoGy-","author":{"@type":"Person","name":"Kirill Kurko","url":"https://daily.dev/kkurko","image":"https://avatars.githubusercontent.com/u/58859242?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Lovely article, and great you mention refactoring is key.\nWe have many things starting as feature specific structure, but quickly seem to turn into global wide-used abstractions.\nIt all comes down to your needs now and in the future, generally would suggest where possible try to abstract as far as possible (you might need it one day, and then you’ll be ready for it)","datePublished":"2022-05-16T11:42:58.523Z","url":"https://daily.dev/posts/yQT5B45VL#c-MaKQTGmH4","author":{"@type":"Person","name":"Chris Bongers","url":"https://daily.dev/dailydevtips","image":"https://media.daily.dev/image/upload/s--9gxFz1e7--/f_auto/v1705902590/avatars/avatar_JUNiIGCV-?_a=BAMAMiZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"That’s pretty neat. I love it","datePublished":"2022-03-20T11:42:36.566Z","url":"https://daily.dev/posts/yQT5B45VL#c-zZY68_Kxj","author":{"@type":"Person","name":"Ido Shamun","url":"https://daily.dev/idoshamun","image":"https://media.daily.dev/image/upload/s---xy_OAwk--/f_auto,q_auto/v1703781380/avatars/avatar_28849d86070e4c099c877ab6837c61f0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Great post.","datePublished":"2022-03-28T06:33:45.758Z","url":"https://daily.dev/posts/yQT5B45VL#c-NKnBXIHlF","author":{"@type":"Person","name":"Yoav Ganbar","url":"https://daily.dev/hamatoyogi","image":"https://avatars0.githubusercontent.com/u/6682981?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Love these examples and explanation! Have been structuring my apps by features for a while (and separating anything thats shared into common, utils, helpers, types, etc folders) And its worked best for me","datePublished":"2022-05-17T14:15:33.450Z","url":"https://daily.dev/posts/yQT5B45VL#c-ClpdSeRoc","author":{"@type":"Person","name":"Daniel","url":"https://daily.dev/danferrer","image":"https://media.daily.dev/image/upload/s--wKLi-R9w--/f_auto/v1751341583/avatars/avatar_158ffcf7f3f1450fbe48bb2621aba79b?_a=BAMClqZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```