I know that there are few questions about the react-redux project code structure but I am hoping to discuss a different approach. So the main libraries we are going to use are : webpack - react - redux -mocha - karma.
The classic folder structure for this seems to be:
js
├── actions
│ ├── action-for-componentA.js
├── components
│ ├── componentA.js
├── reducers
│ ├── reducer-for-componentA.js
└── stores ...
This seems to be what everyone else and all the generators out there are doing. But I feel like this is not the react way of structuring a project. The focus should be on the component and not on the individual constructs of react or redux. I would like to think about it in this way, when you need to change a button in PageX which is contained in a component hierarchy that starts with ComponentX -> ChildOfX - I should be able to traverse the directories in this exact same way.
Rather than having a components folder with all components thrown inside it I would rather have something like :
js
├── PageX
│ ├── action-for-pagex.js
├── componentX.js
├── containerX.js
├── reducerX.js
├── children
├── childrenC
├── childrenB
├── componentB.js
├── reducerB.js
├── ...
├── PageY
│ ├── ...
├── PAgeZ
│ ├── ...
This will be easier to traverse and it makes more sense when you think in "react". Can anyone see anything that might go wrong with this approach?
Related reading : http://engineering.kapost.com/2016/01/organizing-large-react-applications/