Tyler's Tech Blog Tyler's Blog

Journey for the best React structure #1 Directory Structure

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!

  /atoms # atom components
  /components # components


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.


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


This directory is for the page components.


Custom hooks


Redux actions


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 requests and data models


Custom type definitions

Table of contents

  1. Introduce [ X ]
  2. Directory Structure [ X ]
  3. Components [ X ]
  4. Redux + Redux Starter Kit(RSK) [ ]
  5. Reducer [ ]
  6. StyleSheet [ ]
  7. SVG [ ]
  8. Build & Deployment [ ]
  9. SSR [ ]

comments powered by Disqus