How to learn React

text.md

Read "Smart and Dumb Components" by Dan Abramov (who later wrote Redux, a hugely popular variation on Facebook's Flux architecture).

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mo7f1h57v

In general, you need to make more components than you think you do. Facebook has over 15,000. Not only is more components not harmful to performance, by giving a lot of split points and more narrowly defining what data is needed to render, you can reduce how much DOM gets invalidated--which is a massive performance gain.

As of React 0.14.0, React supports stateless function components which are functions that take a props object as an argument and return as a render function. They have caveats though, like no lifecycle, state, or refs. So why use them? Because they encourage writing small, focused components that take simple values in and render based on those.

As a general rule, objects are more frustrating to pass down as props. Doing primative comparisons is easy (1 != 2, `'bar' != 'baz'), but objects will mutate when you assign to their properties. This leads to subtle bugs.

var obj = {
  stuff: {
    a: 0
  }
  ,other: {
    //...
  }
};

var stuff = obj.stuff; // plain assignment

stuff.a = 1;

console.log(obj.stuff.a, stuff.a);
// 1 1

This means that when we change a value on an object like that, we need to do a deep copy, which is much much more expensive. React does not do deep copies for you. It can also cause subtle, hard to find bugs if you have an object stored in a parents state and accidentally assign to it in a child.