DEV Community

Discussion on: Simple React Folder Structure

Collapse
 
fantasticsoul profile image
幻魂

I like this style structure, but what the different point is I put all component to folder components

here is my folder structure example.

|____runConcent.js      # run concent script
|____App.css            # App css file
|____index.js           # app entry file
|____utils              # general function package(non business)
| |____...
|
|____models             # business models
| |____index.js
| |____global
| | |____index.js
| | |____reducer.js     # change state methods(optional)
| | |____computed.js    # computed methods(optional)
| | |____watch.js       # watch methods(optional)
| | |____init.js        # async state initialization function(optional)
| | |____state.js       # module init state(required)
| |____...
| |
|____components         # [[base component]]
| |____biz-dumb         # business dumb component
| |____biz-smart        # business smart component
| |____dumb             # non business dumb component
| |____smart            # non business smart component
|
|____pages              # [[router component]]
| |____PageFoo
|   |____model          # page model definition
|   |____dumb           # page dumb components(if multi page will reuse some of these, we can put them to components/dumb)
|   |____...
|
|____types             # types folder
| |____store           # store associated
| |____eventMap        # event associated
| |____domain          # domain object associated
| |____biz             # biz logic associated
|
|____App.js             # app root component
|____base
| |____common-func      # business function package
| |____constant         # constant
|
|____services           # services
| |____...
Collapse
 
pcofilada profile image
Patrick Ofilada

I love this setup also.