Thinking in React.md

• Break the UI into a component hierarchy

• Build a static version

  • components will only have render() methods and use props. The component at the top of your hierarchy will take your data model as a prop
  • To build a static version of your app that renders your data model, you’ll want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child. If you’re familiar with the concept of state, don’t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time.
  • You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with FilterableProductTable) or with the ones lower in it (ProductRow). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up and write tests as you build.

• Identify the minimal (but complete) representation of UI State

  • To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: Don’t Repeat Yourself. Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand.
  • To figure out if something is state, ask three questions: 1) Is it passed in from a parent via props? If so, it probably isn’t state. 2) Does it remain unchanged over time? If so, it probably isn’t state. 3) Can you compute it based on any other state or props in your component? If so, it isn’t state.

• Identify where your state should live

  • we need to identify which component mutates, or owns, this state.
  • For each piece of state in your application:
    • Identify every component that renders something based on that state.
    • Find a common owner component (a single component above all the components that need the state in the hierarchy).
    • Either the common owner or another component higher up in the hierarchy should own the state.
    • If you can’t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

• Add inverse data flow