Architect folder structure (Component Organisation)

Background

This project differs from Network Canvas in that it attempts to use subcomponents for organisation rather than the container/component top-level structure. This is because the flat container/component structure tends to grow too large to navigate for a large application. By keeping components that are only ever used within "top-level" components nested, we can keep the root directories manageable. There's no reason not to use the component/container split within the components. e.g.

|- MyComponent/
   |- index.js (handles exports)
   |- MyComponent.js (container component)
   |- SubComponent.js (stateless view component)

Usage:

import MyComponent from './components/MyComponent';

const () => (<MyComponent />);

Another pattern that fits this nested structure is to make collections of components:

|- MyCollection/
   |- index.js (exports all sub components)
   |- TypeA.js
   |- TypeB.js
   |- TypeC.js

Usage:

import { TypeA, TypeB } from './components/MyCollection';

const () => (
  <div>
    <TypeA />
    <TypeB />
  </div>
);

Architect folder structure

|- src/
   |- behaviours (HOCs which extend components with generalised behaviours)
   |- components (React components in nested form)
      |
      |  (notable components)
      |
      |- Routes/ (Top level views linked to <Router /)
      |- App.js	(main app container)
      |- ...
   |- ducks (redux reducers and actions)
   |- other (non-component modules)
   |- selectors (redux selectors)
   |- utils (utility functions and shims)