React.js Flux application directory architecture

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.