ReactJS Flux Application directory structure

Question

My team is currently working on a large application being written in ReactJS using Facebook\'s Flux architecture. It is still in its infancy right now but it is going to gro

Answer 1

The usual directory structure is more like this:

js
├── AppBootstrap.js
├── AppConstants.js
├── AppDispatcher.js
├── actions
│   ├── AppActions.js
│   ├── FriendActions.js
│   └── PhotoActions.js
├── components
│   ├── AppRoot.react.js
│   ├── friends
│   │   ├── Friend.react.js
│   │   ├── FriendList.react.js
│   │   └── FriendSection.react.js // a querying-view, AKA controller-view
│   └── photos
│       ├── Photo.react.js
│       ├── PhotoCategoryCard.react.js
│       ├── PhotoCategoryCardTitle.react.js
│       ├── PhotoGrid.react.js
│       └── PhotoSection.react.js // another querying-view
├── stores
│   ├── FriendStore.js
│   ├── PhotoStore.js
│   └── __tests__
│       ├── FriendStore-test.js
│       └── PhotoStore-test.js
└── utils
    ├── AppWebAPIUtils.js
    ├── FooUtils.js
    └── __tests__
        ├── AppWebAPIUtils-test.js
        └── FooUtils-test.js

The css directory usually looks like a mirror of the components directory, with one css file per component. Some folks these days prefer to do all of their styling inline on the component, however.

Don't overthink all that -- there is not always a 1:1 between stores and a querying-view or "section", as there is in this example.

And really you just need to do what is right for your app. This is not dogma. The data flow stuff, the inversion of control and the decoupling of the stores -- these are much more important ideas than how you organize your files.