Guidelines

• All files should be placed in a generic directory. The only exceptions are the app's entry point (i.e. the top-level index.js) and nested components.
• Do not nest directories outside of the components directory.
• Within the components directory...
  • Do not nest more than 3 levels.
  • Use a generic images directory to group image assets.
  • Use a generic shared directory to group shared components.
  • Do not nest shared directories within other shared directories.
• File/directory names should follow one of the following patterns.
  • MyClassName: Pascal case for components and constructors.
  • myUtilityName: Camel case for utilities and side-effects.
  • my-asset-name: Kebab case for assets.
• If a component requires multiple file types, each file should be named index.
  • MyClassName/index.css
  • MyClassName/index.js
  • MyClassName/index.tpl

Generic Directories

• collections: Backbone.Collection extensions.
• components: UI components (e.g. Marionette.View extensions, React components).
• components/**/shared: Groups of shared children components.
• fonts: Global font assets.
• images: Shared image assets.
• models: Backbone.Model extensions.
• screens: Page handlers (i.e. fetch data, select top-level component to render).
• utils: Utilities, initializers.

Example

src
├── collections
│   ├── Champs.js
│   └── Categories.js
├── components
│   ├── Champ
│   │   ├── images
│   │   │   ├── bg-champ.jpg
│   │   │   └── icon-champ.png
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.tpl
│   └── DanceParty
│       ├── DancePartyLoading
│       │   ├── Avatar
│       │   ├── DancePartyLoadingFooter
│       │   ├── DancePartyStatusIndicator
│       │   ├── index.css
│       │   ├── index.js
│       │   └── index.tpl
│       ├── TimerBar
│       ├── shared
│       │   └── SharedForDanceParyLoadingAndTimer
│       ├── index.css
│       ├── index.js
│       └── index.tpl
├── fonts
│   └── global-font.woff2
├── images
│   └── image-used-in-more-than-one-component.png
├── index.js
├── models
│   ├── Category.js
│   └── Champ.js
├── screens
│   ├── Categories.js
│   ├── Category.js
│   └── Settings.js
└── utils
    └── logOut.js