modern techniques for building react components

Over the last couple years many smart people both from within Facebook and from the community have redefined how to build React applications, and how to structure them. Concepts like Smart, Dumb, Pure, Containers, Higher Order Components (HoCs). And libraries like FLUX, Redux, Recompose have emerged out of this community to handle data flow. Today we will examine the concepts core to each of these.

Dumb

Dumb components have also taken a lead role in modern component building. Dumb components rely on no external application state, action, or logic. A Dumb components API is defined by it props.

Dumb components should be the majority of the nodes in your application tree

const Collapsible = (props) => {
  const classes = classnames({
    'collapsible': true,
    'collapsible-open': props.isOpen,
    'collapsible-closed': !props.isOpen
  });
  return (
    <div className={classes} onClick={props.toggle}>
      {props.children}
    </div>
  );
}

<Collapsible isOpen={true} toggle={this.handleToggle}>
  <div>Content that can be hidden</div>
</Collapsible>

Smart

Smart components are directly tied the application, they should depend on the actions, stores, and logic needed by the Dumb components. They also should manage the subscriptions and rendering of their children.

Smart components should just be Dumb components wrapped in an environmental aware container.