High level overview how to write a React app, and overview of tricky .bind and this.props

Thinking in React.md

Thinking in React

Notes from reading: https://facebook.github.io/react/docs/thinking-in-react.html

Big idea implementation:

1. Break UI into component hierarchy

   • Child components should be children in hierarchies

2. Build a static version

   • No interactivity
   • Don't use state at all!

   -Build bottom-up or top-down

   • Simpler? top-down
   • Larger? bottom-up, write tests as you build

3. Identify Minimal (but complete) Representation of UI State

   - DRY: Don't repeat yourself
   - It's NOT state if:
   	- passed in from a parent via props
   	- remains unchanged over time
   	- can compute it based on any other state or props in your component
   

4. Identify where your state should live

   - Identify which component *mutates* or owns this state
   - Highest common owner should hold the state
   - Can't identify? Make a new component simply for holding the state
   

5. Add Inverse Data Flow

   - components should only update their own state	
   - Example: search for products, filteredProducts changes as searchBar input changes
   

---

Bind in React

Why do you have to use bind?

"When using ES6 classes, React does not automatically bind the member functions inside the component." Source: https://daveceddia.com/avoid-bind-when-passing-props/

Good:

handleClick = () => {

OR

constructor(props) {
    super(props);

Bad:

handleClick() {

---

State and Lifecycle

https://facebook.github.io/react/docs/state-and-lifecycle.html