React JS Cheatsheets for Component API, Specifications and Lifecycle

reactjs_componentapi_cheatsheet.md

ReactJS Component Cheatsheet

To create a ReactComponent:

ReactComponent React.createClass(object proto)

Basic JSX example:

var TitleComponent = React.createClass({
  // REQUIRED
  render: function() {
    return (<h1>Hello { this.props.name }</h1>);
  }
});
React.renderComponent(<TitleComponent name="John" />, mountNode);

Compiles to:

var TitleComponent = React.createClass({
  displayName: 'TitleComponent`,
  render: function() {
    return React.DOM.h1(null, "Hello ", this.props.name);
  }
});
React.renderComponent(TitleComponent( {name:"John"} ), mountNode);

Component API

• DOMElement getDOMNode() #
• setProps(object nextProps) #
• replaceProps(object nextProps) #
• ReactComponent transferPropsTo(ReactComponent targetComponent) #
• setState(object nextState[, function callback]) #
• replaceState(object nextState[, function callback]) #
• forceUpdate([function callback]) #
• bool isMounted() #

reactjs_lifecycle_cheatsheet.md

Component Lifecycle Methods

Mounting

• componentWillMount() #
• componentDidMount() #

Updating

• componentWillReceiveProps(object nextProps) #
• boolean shouldComponentUpdate(object nextProps, object nextState) #
• componentWillUpdate(object nextProps, object nextState) #
• componentDidUpdate(object prevProps, object prevState) #

Unmount

• componentWillUnmount() #

reactjs_specs_cheatsheet.md

Component Specifications

• ReactComponent render() required #
• object getInitialState() #
• object getDefaultProps() #
• object propTypes #
• array mixins #
• object statics #
• string displayName #