When you are building a large application in the initial stage itself you have to create the application directory architecture.
- 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
Usualy the above structure is used for large applications using React.js Flux. Folder structure can give you an idea of what your project is and what are its requirements. If you are using any module bundler like browserify it is easy to add require on relative pathing. You don’t have to search all files in different folders when working on a particular component, which saves time. Read more