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!

/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.

/hooks

Custom hooks

/actions

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.

/helpers

helper functions

/api

API requests and data models

/typings

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