High level structure

I like to keep the tests in their own test/ directory, separated from the actual code of the app

Files by nature

Files by feature

Pro's

- Everything is easy to import

- Easy to follow ( everything is where it should be )
 

Con's

- it "doesn't scale" ( lots of files kind of ugly if you don't like to scroll )

- It might not reflect your business logic

Files by nature

Pro's

- it "grows well" with the project

- Reflects your business logic
 

Con's

- Things are hard to find, because the order is not trivial

- You will need to add helpers and util to load stuff because imports are too complicated

Files by feature

With own style

W/O own styles

Components

Classifying components

• Presentational
• Containers
• HOC

How/When you use each

• Class Component
• Functional/Stateless Component
• PureComponent (class)

.JSX?

Auto gen

Boilerplate

Reducers

Why you should use middlewares

• redux-api-middleware
• redux-thunk
• redux-saga
• [your middleware here]

By domain

By file

Actions

DRY actions

DRY actions

Use Selectors

https://github.com/reactjs/reselect

Jest vs Enzyme

Snapshot testing

Testing Reducers

• Test action creators
• Test reducers 
• Use nock for async

Use a styleguide

• https://github.com/elierotenberg/coding-styles/blob/master/es6.md
• https://github.com/feross/standard
• https://github.com/airbnb/javascript

Know about your babel presets

stages, and all that stuff

Keep webpack minimal

Use . files

• .nvmrc
• .babelrc
• .postcss
• etc

Check out

• PostCSS
• FunctionalCSS
• Styled components
• cssmodules

general stuff

documentation