Directory Structure

Organizing a directory structure is important because it affects the way we think. Especially it affects how you treat components and Redux stores. And it influences the complexity and redundancy of the entire app. So, think carefully and communicate with colleagues!

/src
/atoms # atom components
/button
/typography
/components # components
/PostList
/PostDropdown
/pages
/paperShow
/signUp
/hooks
/reducers
/actions
/helpers
/typings
/api


/atoms

This directory is for atomic components which is the smallest component. If your project’s atomic components are entirely depends on external library(such as Bootstrap), this directory can be omitted.

/components

This directory is for the common component which knows about our business logic.

/pages

This directory is for the page components.

Custom hooks

Redux actions

/reducers

Redux reducers & slices. Redux reducers should be functional, data-driven, feature-based. Making reducer following by Page or Component is an anti-pattern. I’ll explain it later.

helper functions

/api

API requests and data models

/typings

Custom type definitions