spoike
5/13/2014 - 7:51 AM

React JS Cheatsheets for Component API, Specifications and Lifecycle

React JS Cheatsheets for Component API, Specifications and Lifecycle

Component Specifications

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

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 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() #