React.js (v0.14) free cheat sheet

Components

var Component = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<Component name="John" />, document.body);

Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)

Nesting

var UserAvatar  = React.createClass({...});
var UserProfile = React.createClass({...});

var Info = React.createClass({
  render() {
    return <div>
      <UserAvatar src={this.props.avatar} />
      <UserProfile username={this.props.username} />
    </div>;
  }
});

Nest components to separate concerns. See multiple components.

States & Properties

States and props

<MyComponent fullscreen={true} />

// props
  this.props.fullscreen //=> true

// state
  this.setState({ username: 'rstacruz' });
  this.replaceState({ ... });
  this.state.username //=> 'rstacruz'

render: function () {
  return <div className={this.props.fullscreen ? 'full' : ''}>
    Welcome, {this.state.username}
  </div>;
}

Use props (this.props) to access parameters passed from the parent.
Use states (this.state) to manage dynamic data.

Setting defaults

React.createClass({
  getInitialState: function () {
    return { comments: [] };
  },

  getDefaultProps: function () {
    return { name: "Hello" };
  }
);

Pre-populates this.state.comments and this.props.name.

Components

Component API

ReactDOM.findDOMNode(c)  // 0.14+
React.findDOMNode(c)  // 0.13
c.getDOMNode()        // 0.12 below

c.forceUpdate()
c.isMounted()

c.state
c.props

c.setState({ ... })
c.replaceState({ ... })

c.setProps({ ... })       // for deprecation
c.replaceProps({ ... })   // for deprecation

c.refs

These are methods available for Component instances. See Component API.

Component specs

Method	What
`render()`
`getInitialState()`
`getDefaultProps()`
`mixins: [ ... ]`	Mixins … more
`propTypes: { ... }`	Validation … more
`statics: { ... }`	Static methods
`displayName: "..."`	Automatically filled by JSX

Methods and properties you can override. See component specs.

Lifecycle

Mounting

`componentWillMount()`	Before rendering (no DOM yet)
`componentDidMount()`	After rendering

Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See reference.

Updating

`componentWillReceiveProps`(newProps={})	Use `setState()` here
`shouldComponentUpdate`(newProps={}, newState={})	Skips `render()` if returns false
`componentWillUpdate`(newProps={}, newState={})	Can’t use `setState()` here
`componentDidUpdate`(prevProps={}, prevState={})	Operate on the DOM here

Called when parents change properties and .setState(). These are not called for initial renders. See reference.

Unmounting

componentWillUnmount() Invoked before DOM removal

Clear your DOM stuff here (probably done on didMount). See reference.

Examples

Example: loading data

React.createClass({
  componentDidMount: function () {
    $.get(this.props.url, function (data) {
      this.setState(data);
    }.bind(this));
  },

  render: function () {
    return <CommentList data={this.state.data} />
  }
});

See initial AJAX data.

DOM nodes

References

<input ref="myInput">

this.refs.myInput
ReactDOM.findDOMNode(this.refs.myInput).focus()
ReactDOM.findDOMNode(this.refs.myInput).value

DOM Events

Add attributes like onChange. See events.

<input type="text"
    value={this.state.value}
    onChange={this.handleChange} />

handleChange: function(event) {
  this.setState({ value: event.target.value });
}

Allows access to DOM nodes. See References.

Two-way binding

Email: <input type="text" valueLink={this.linkState('email')} />

React.createClass({
  mixins: [React.addons.LinkedStateMixin]
});

this.state.email

Use LinkedStateMixin for easier two-way binding.

Property validation

Basic types

React.createClass({
  propTypes: {
    email:      React.PropTypes.string,
    seats:      React.PropTypes.number,
    settings:   React.PropTypes.object,
    callback:   React.PropTypes.func,
    isClosed:   React.PropTypes.bool,
    any:        React.PropTypes.any,
  }
});

Primitive types: .string, .number, .func, and .bool. See propTypes.

Required types

propTypes: {
  requiredFunc:  React.PropTypes.func.isRequired,
  requiredAny:   React.PropTypes.any.isRequired,

Add .isRequired.

React elements

propTypes: {
  element:  React.PropTypes.element,  // react element
  node:     React.PropTypes.node,     // num, string, element
                                      // ...or array of those

Use .element, .node.

Enumerables

propTypes: {
  enum:     React.PropTypes.oneOf(['M','F']),  // enum
  union:    React.PropTypes.oneOfType([        // any
              React.PropTypes.string,
              React.PropTypes.number ]),

Use .oneOf, .oneOfType.

Arrays and objects

propTypes: {
  array:    React.PropTypes.array,
  arrayOf:  React.PropTypes.arrayOf(React.PropTypes.number),
  object:   React.PropTypes.object,
  objectOf: React.PropTypes.objectOf(React.PropTypes.number),

  message:  React.PropTypes.instanceOf(Message),

  object2:  React.PropTypes.shape({
    color:  React.PropTypes.string,
    size:   React.PropTypes.number
  }),

Use .array[Of], .object[Of], .instanceOf, .shape.

Custom validation

propTypes: {
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error('Validation failed!');
    }
  }
}

Supply your own function.

Other features

Class set

var cx = require('classnames');

render: function() {
  var classes = cx({
    'message': true,
    'message-important': this.props.isImportant,
    'message-read': this.props.isRead
  });

  return <div className={classes}>Great Scott!</div>;
}

Manipulate DOM classes with classnames, previously known as React.addons.classSet. See Class set.

Propagating properties

<VideoPlayer src="video.mp4" />

var VideoPlayer = React.createClass({
  render: function() {
    /* propagates src="..." down to this sub component */
    return <VideoEmbed {...this.props} controls='false' />;
  }
});

See Transferring props.

Mixins

var SetIntervalMixin = {
  componentWillMount: function() { .. }
}

var TickTock = React.createClass({
  mixins: [SetIntervalMixin]
}

See addons for some built-in mixins.

Top level API

React.createClass({ ... })

React.isValidElement(c)

ReactDOM.findDOMNode(c) // 0.14+
ReactDOM.render(<Component />, domnode, [callback]) // 0.14+
ReactDOM.unmountComponentAtNode(domnode) // 0.14+

ReactDOMServer.renderToString(<Component />) // 0.14+
ReactDOMServer.renderToStaticMarkup(<Component />) // 0.14+

JSX patterns

Style shorthand

var style = { backgroundImage: 'url(x.jpg)', height: 10 };
return <div style={style}></div>;

See inline styles.

InnerHTML

function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} />

See dangerously set innerHTML.

Lists

var TodoList = React.createClass({
  render: function() {
    function item(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(item)}</ul>;
  }
});