Skip to content

Instantly share code, notes, and snippets.

@spoike
Created May 13, 2014 07:51
Show Gist options
  • Save spoike/b9d6dddeb495c3e75477 to your computer and use it in GitHub Desktop.
Save spoike/b9d6dddeb495c3e75477 to your computer and use it in GitHub Desktop.
React JS Cheatsheets for Component API, Specifications and Lifecycle

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

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

Component Specifications

  • ReactComponent render() required #
  • object getInitialState() #
  • object getDefaultProps() #
  • object propTypes #
  • array mixins #
  • object statics #
  • string displayName #
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment