cheatsheets/react.md

title	layout
React.js	default

Use the React.js jsfiddle to start hacking. {:.brief-intro.center}

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

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

{:.light}

Nesting

Nest components to separate concerns. See multiple components. {:.center}

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

{:.light}

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

States & Properties

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

this.setProps({ fullscreen: true });
this.setState({ username: 'rstacruz' });

this.props.fullscreen === true
this.state.username === 'rstacruz'

this.replaceProps({ ... });
this.replaceState({ ... });

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

Setting defaults

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

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

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

Component API

These are methods available for Component instances. See Component API. {:.center}

React.findDOMNode(c) // 0.13+

{:.light}

c.forceUpdate()
c.isMounted()

c.state
c.props

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

c.refs

Component specs

Methods and properties you can override. See component specs.

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

Lifecycle

Mounting

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

| componentWillMount() | Before rendering (no DOM yet) | | componentDidMount() | After rendering | {:.greycode.no-head.lc}

Updating

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

| 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 | {:.greycode.no-head.lc}

Unmounting

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

| componentWillUnmount() | Invoked before DOM removal | {:.greycode.no-head.lc}

Example: loading AJAX data

See initial AJAX data.

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

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

DOM nodes

References

Allows access to DOM nodes. See References.

<input ref="myInput">

{:.light}

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

DOM Events

Add attributes like onChange. See events.

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

{:.light}

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

Two-way binding

Use LinkedStateMixin for easier two-way binding.

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

{:.light}

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

this.state.email

Property validation

Basic types

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

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

Required types

Add .isRequired.

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

React elements

Use .element, .node.

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

Enumerables

Use .oneOf, .oneOfType.

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

Arrays and objects

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

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
  }),

Custom validation

Supply your own function.

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

Other features

Class set

Manipulate DOM classes with classnames, previously known as React.addons.classSet. See 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>;
}

Propagating properties

See Transferring props.

<VideoPlayer src="video.mp4" />

{:.light}

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

Mixins

See addons for some built-in mixins.

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

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

Top level API

React.findDOMNode(c)
React.createClass({ ... })

React.render(<Component />, domnode, [callback])
React.unmountComponentAtNode(domnode)

React.renderToString(<Component />)
React.renderToStaticMarkup(<Component />)

React.isValidElement(c)

JSX patterns

Style shorthand

See inline styles.

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

InnerHTML

See dangerously set innerHTML.

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

Lists

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

See also

• Animations