---
title: "Discussion on \"A Better Way to Structure React Projects\" | Hashnode"
description: "Discussion on \"A Better Way to Structure React Projects\". First off, if you don’t know what atomic design is, I’ll give a brief primer below but I suggest you go to Brad Frost’s website and check it out.\nAtomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the ..."
url: "https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [A Better Way to Structure React Projects](https://dev.krisguzman.com/a-better-way-to-structure-react-projects?utm_source=hashnode&utm_medium=feed)

First off, if you don’t know what atomic design is, I’ll give a brief primer below but I suggest you go to Brad Frost’s website and check it out. Atomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the ...

Dec 2, 2020 · 8 min read · dev.krisguzman.com  
Read the article

-   [#web-development](https://hashnode.com/tag/web-development)
-   [#web-design](https://hashnode.com/tag/web-design)
-   [#ui-design](https://hashnode.com/tag/ui-design)
-   [#software-architecture](https://hashnode.com/tag/software-architecture)
-   [#reactjs](https://hashnode.com/tag/reactjs)

## Written by

[Kristopher Guzman](https://hashnode.com/@kag359six)

@kag359six

  
[View profile](https://hashnode.com/@kag359six)

A Half-Ass JavaScript Developer

## Responses 5

Markdown supported · ⌘↵ to post

[Tadeu Agostini](https://hashnode.com/@TadeuA)

[Dec 7, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fce2b3c012e3c19a2d3efe9)

Part 2, now! Please.

[Kristopher Guzman](https://hashnode.com/@kag359six)

[Dec 9, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fce2b3c012e3c19a2d3efe9#reply-5fd0fb2d49835e38d0a9ba88)

Thanks for reading! Just released part 2 here: [dev.krisguzman.com/better-way-to-structure-react-…](https://dev.krisguzman.com/better-way-to-structure-react-projects-part-2)

[Gaston Morales](https://hashnode.com/@gmorales254)

[Dec 3, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fc8f27720237d635556c887)

That was awesome articule, Kris, you aren't so dumb after all haha, best regards dude!

[psanchezmvelarde](https://hashnode.com/@psanchezmvelarde)

[Dec 3, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fc8ab41820f7e5bbbc2a7c7)

This makes sense when you are building simple applications, but when you project involves a lot of business logic sometimes it is not that easy to abstract components. I usually use an approach of structuring my components hierarchically, separating UI common components, of course. This way parent components have their own directories with their specific children components inside.

What is your opinion on this method?

Nice article any ways! Good job!

[Kristopher Guzman](https://hashnode.com/@kag359six)

[Dec 3, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fc8ab41820f7e5bbbc2a7c7#reply-5fc8bf4f6241335dca59500f)

I'm glad you mentioned this! Abstraction certainly is difficult at times. Even further, sometimes there are components that only exist in 1 place, and it doesn't make sense to abstract them.

What I usually do is one of two things:

A. Create a sub "components" folder in the "pages" folder. These components ONLY exist within that page, and it makes it very easy to differentiate between shared components and one-off components.

B. Create a "domains" folder, which contains business logic heavy, not-so-reusable components. This is much like the approach you mentioned.

I think I did a poor job of explaining how to scale this type of project structure, but I plan on clarifying all that in a "part 2" article. Thanks for the feedback!

[Roger Minton](https://hashnode.com/@RogerMinton)

[Dec 3, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fc844694a717053a2f9e67f)

Great article Kris! I am definitely going to be looking more into atom design! Cant wait for the next part!

[Kristopher Guzman](https://hashnode.com/@kag359six)

[Dec 3, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fc844694a717053a2f9e67f#reply-5fc8bf6e87510c5da5d305a2)

Thanks a bunch!

[Kristopher Guzman](https://hashnode.com/@kag359six)

[Dec 5, 2020](https://hashnode.com/posts/a-better-way-to-structure-react-projects/5fc7a9aa6819c54efdf2e1f2/comment/5fc844694a717053a2f9e67f#reply-5fcb5dff7865da78339e5f1a)

Appreciate it!