--- title: A Better Way to Structure React Projects | daily.dev description: Atomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the basic building blocks of living things and give our UI... canonical: https://daily.dev/posts/a-better-way-to-structure-react-projects-pa5-ekmus twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A Better Way to Structure React Projects | daily.dev og:description: Atomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the basic building blocks of living things and give our UI... og:url: https://daily.dev/posts/a-better-way-to-structure-react-projects-pa5-ekmus og:image: https://api.daily.dev/og/posts/pa5-ekMUs.png og:image:alt: A Better Way to Structure React Projects 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. # A Better Way to Structure React Projects **[Hashnode](https://daily.dev/sources/hashnode)** · 4 min read · 75 upvotes · 4 comments ## Summary Atomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the basic building blocks of living things and give our UI a hierarchical structure based on it. Atomic design is a framework that can help bridge the communication gap between development and design. It is important that developers understand it so they speak to designers in a unified language. ## 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. **@ghost** · 3 upvotes > Atomic design is great but I'm not sure if I will follow the same practice for all React apps i.e from simple to-do app to a MERN stack or similar. > > The explanation is good though! **@maplesyurp** · 0 upvotes > what can it do that, others structure programs can't do **@thatgriffith** · 0 upvotes > Interesting read, thanks for this. I am curious to know what structures the other guys in the comment section are using. Since they seem to not like this approach. Care to share? :) --- Tags: [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/a-better-way-to-structure-react-projects-pa5-ekmus) ```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":"A Better Way to Structure React Projects","url":"https://daily.dev/posts/a-better-way-to-structure-react-projects-pa5-ekmus","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-better-way-to-structure-react-projects-pa5-ekmus"},"datePublished":"2020-12-03T04:35:04.589Z","dateModified":"2021-10-07T14:17:10.317Z","description":"Atomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the basic building blocks of living things and give our UI...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6836c6378a1842e62b7ddb815ebf53ef","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6836c6378a1842e62b7ddb815ebf53ef","isAccessibleForFree":true,"articleSection":"Hashnode","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":"Hashnode","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4","url":"https://daily.dev/sources/hashnode"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/a-better-way-to-structure-react-projects-pa5-ekmus","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":75},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"react","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hashnode","item":"https://daily.dev/sources/hashnode"},{"@type":"ListItem","position":3,"name":"A Better Way to Structure React Projects"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/a-better-way-to-structure-react-projects-pa5-ekmus","comment":[{"@type":"Comment","text":"Atomic design is great but I’m not sure if I will follow the same practice for all React apps i.e from simple to-do app to a MERN stack or similar.\nThe explanation is good though!","datePublished":"2020-12-03T12:47:29.552Z","url":"https://daily.dev/posts/pa5-ekMUs#c-E0oQe0-S7","author":{"@type":"Person","name":"Deleted user","url":"https://daily.dev/ghost","image":"https://media.daily.dev/image/upload/s--hNIUzLiO--/f_auto/v1705327420/public/ghost_vlftth"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"what can it do that, others structure programs can’t do","datePublished":"2020-12-03T15:27:29.212Z","url":"https://daily.dev/posts/pa5-ekMUs#c-2syjYJHFC","author":{"@type":"Person","name":"SIDNEY MONSE","url":"https://daily.dev/maplesyurp","image":"https://lh3.googleusercontent.com/a-/AOh14GhEnYdTtV95X6zXeeb7Gh5I3JvXDFXw_aP9PueIFA=s100"}},{"@type":"Comment","text":"Interesting read, thanks for this. I am curious to know what structures the other guys in the comment section are using. Since they seem to not like this approach. Care to share? :)","datePublished":"2021-01-05T19:57:53.726Z","url":"https://daily.dev/posts/pa5-ekMUs#c-Aknn_E0w6","author":{"@type":"Person","name":"Kevin H Griffith","url":"https://daily.dev/thatgriffith","image":"https://avatars2.githubusercontent.com/u/10831463?v=4"}}]} ```