Guidelines

###Filenames and case sensitivity

Use PascalCase filenames for components - to keep consistency between component's class name and filename

Good: MyAwesomeComponent.jsx

Bad: myAwesomeComponent.jsx

---

Use lowercase for module imports unless the module specifically has uppercase letter. Inconsistency in module name case will work on OSX but not on case-sensitive filesystems (most linux distros)

Good: import React from 'react'

Bad: import React from 'React'

---

###Compose components

If you pass a lot of common props to multiple instances of a component, compose a new component from it, to keep the markup simple

e.g.

<CustomButton red />
<CustomButton blue />

is better than

<Button dense styler={{ rippleStyle: { background: 'rgba(255, 0, 0, .2)' }, style: { background: 'rgb(255, 0, 0)', border: 0 } }} />
<Button dense styler={{ rippleStyle: { background: 'rgba(0, 170, 255, .2)' }, style: { background: 'rgb(0, 170, 255)', border: 0 } }} />

---

###Route structure

Here's a Generic App routes (pages and subsections) structure we follow

app/routes
├── home/
├── ├── index.jsx
├── gallery/
├── ├── components/
├── ├── ├── Gallery.jsx
├── ├── └── Photo.jsx
├── ├── subroute/
├── ├── ├── index.jsx
├── ├── actions.js
├── ├── reducer.js
├── ├── index.jsx
├── contact/
├── ├── components/
├── ├── └── ...
└── └── index.jsx

The idea is to keep route-specific stuff in their own folders. Any global component goes in app/theme/yourTheme folder and global actions in app/actions etc. But try to avoid global actions/reducers wherever possible. Route specific actions/reducers/component can still easily be used elsewhere.

e.g. import Photo from 'routes/gallery/components/Photo'

---

###Import paths

Do not use relative paths unless trying to get from the same directory

this is acceptable import { Something } from './something'

this is not import { Something } from '../../elsewhere/something'

To replace the latter, use "app" folder as base. So If I were to import Photo.jsx from /gallery in a different route, I can just use

import Photo from 'routes/gallery/components/Photo'

---

###non-dynamic objects/arrays Future proofing: If you're feeding your components object/arrays that don't change for each render or instance, define them outside component class to allow for comparision by reference in shouldComponentUpdate