Component-based React-Redux project directory structure

Question

I know there are a few questions about the response-redux project code structure, but I hope to discuss a different approach. Therefore, the main libraries that we are going to use are: webpack - react - redux -mocha - karma.

The classic folder structure for this is as follows:

js
├── actions
│   ├── action-for-componentA.js
├── components
│   ├── componentA.js
├── reducers
│   ├── reducer-for-componentA.js
└── stores ...

This is similar to what everyone else and all generators do. But I feel that this is not a reactive way of structuring a project. The focus should be on the component, not the individual reaction or contraction constructs. I would like to think about it this way when you need to change the button in PageX that is contained in the component hierarchy that starts with ComponentX -> ChildOfX - I should be able to move directories the same way.

Instead of having a components folder with all the components thrown inside it, I would like to have something like:

js
├── PageX
│   ├── action-for-pagex.js
    ├── componentX.js
    ├── containerX.js
    ├── reducerX.js
    ├── children
        ├── childrenC
        ├── childrenB 
            ├── componentB.js
            ├── reducerB.js
            ├── ...
├── PageY
│   ├── ...
├── PAgeZ
│   ├── ...

It will be easier to go through, and it makes sense when you think you are “reacting”. Can anyone see anything that might go wrong with this approach?

: http://engineering.kapost.com/2016/01/organizing-large-react-applications/

Answer 1

TL; DR ; .

- React Redux. , R & R stack. , .

, , , . " ", " ".

React/Redux , .

, :

• pages.
• .
• component.js
• , , shared
• , . , .
• , (app.js).
• ES6, .

:

constants
  -- const.js
  -- const2.js
helpers
  --helperfunc1.js
shared
  --Shared Element1
    --- component.js
    --- reducer.js
  --Shared Element2
    --- component.js
    --- reducer.js
specs
  -- spec1.js
  -- spec2.js
pages
 -Page1
 -- Subpage1
   --- component.js
   --- reducer.js
   -- Subpage2
     --- component.js
     --- reducer.js
  -- component.js
 -- reducer.js
 -Page2
 -- component.js
 -- reducer.js
 ...
container.js
app.js
reducer.js

, , :  - .  - .  - ,  - .  - .  - , TableDataComponent.js , table/component.js.  - React , . . - .

Reddit thread , .

Answer 2

,