Depending on your objectives and needs, there are many ways of organizing a project in React. But some patterns are considered best practices; here, I'll explain a few.
Atomic Design.
Atomic Design is a concept introduced by Brad Frost, and it's a methodology to build consistent and reusable design systems, especially in web interfaces.
Atoms
Atoms are the basic building blocks in this methodology. They're the smallest possible components, like form labels, buttons, inputs, or even design tokens such as colors, fonts, etc. Atoms can be abstract and don't necessarily represent the final product, but they help to create a consistent interface and development process.
Molecules
Molecules are combinations of two or more atoms that form relatively simple components together. An example could be a form label, a text input, and a button combined to make a search form. While atoms can exist in isolation (like a button), molecules find their true meaning when used in conjunction.
Organisms.
Organisms are relatively complex UI components composed of groups of molecules (and possibly atoms). Examples might include the header of a website with a logo (atom), a navigation menu (molecule), and a search form (molecule). Organisms provide context for the molecules and demonstrate how molecules can work together.
/src
/components
/atoms
Button.jsx
Icon.jsx
...
/molecules
FormInput.jsx
UserAvatar.jsx
...
/organisms
Header.jsx
Sidebar.jsx
...
/templates
MainLayout.jsx
UserLayout.jsx
...
/pages
HomePage.jsx
UserProfilePage.jsx
...
By feature or Domain.
This structure is popular for large projects. Here, we group components by the feature they relate to
/src
/components
/Button
Button.jsx
Button.test.jsx
Button.css
/Modal
Modal.jsx
Modal.test.jsx
Modal.css
/features
/Todo
/components
TodoList.jsx
TodoItem.jsx
TodoActions.js
TodoReducer.js
/User
/components
UserProfile.jsx
UserSettings.jsx
UserActions.js
UserReducer.js
By File Type
In smaller projects or applications with many shared components, it might make sense to group files by their type.
/src
/components
Button.jsx
Modal.jsx
...
/containers
TodoContainer.jsx
UserContainer.jsx
...
/actions
TodoActions.js
UserActions.js
...
/reducers
TodoReducer.js
UserReducer.js
...
/styles
Button.css
Modal.css
...
Domain-driven Design (DDD)
For projects that closely align with domain-driven Design, you might structure your folders around aggregates, entities, and value objects.
/src
/User
UserAggregate.js
UserEntity.js
UsernameValue.js
...
/Product
ProductAggregate.js
ProductEntity.js
PriceValue.js
...
Modules or Packages
Modules are self-contained units of code that encapsulate a specific functionality or feature, often used in mono repo structures or when scaling with multiple teams.
/src
/modules
/Todo
TodoView.jsx
TodoLogic.js
TodoService.js
...
/User
UserView.jsx
UserLogic.js
UserService.js
...
Conclusions
The takeaway is to keep your structure simple. It should be intuitive for developers to know where to place their files and easy for them to be consistent.
I showed a few common structures in this article, but feel free to use what fits your team.
Top comments (0)