React-parent-child-fun.js

/**
 * The parent "owns" and manages the state.
 * It passes down props to its children
 *  Some props are data and the children simply display them "read"
 *  Some props are functions that can update/affect state "write"
 */
const ShoppingCart = React.createClass({
  getInitialState() {
    return {
      cartQuantity: 0,
    };
  },
  
  incrementQuantity() {
    this.setState({
      cartQuantity: this.state.cartQuantity + 1,
    });
  },
  
  render() {
    const { cartQuantity } = this.state;
    return (
      <div>
        <h3>A Great Item</h3>
        <QuantityDisplayer quanity={cartQuantity} />
        <MoarButton increment={this.incrementQuantity} />
      </div>  
    )
  }
});

/**
 * The children require/accept props from "the great above" (parent)
 */
  
const QuantityDisplayer = (props) => (
  <div>
    Quantity in cart: {props.quantity}
  </div>
);

QuantityDisplayer.propTypes = {
  quantity: React.PropTypes.number.isRequired,
};

const MoarButton = (props) => (
  <button onClick={props.increment}>
    MOAR!!!
  </button>
);

MoarButton.propTypes = {
  increment: React.PropTypes.func.isRequired,
};