React.js (v0.14) cheatsheet

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)

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.

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.

Methods and properties you can override. See component specs.

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

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

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

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.

<input ref="myInput"> 

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

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.

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

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

this.state.email 

Use LinkedStateMixin for easier two-way binding.

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.

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

Add .isRequired.

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

Use .element, .node.

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

Use .oneOf, .oneOfType.

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.

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

Supply your own function.

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.

<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.

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

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

See addons for some built-in mixins.

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+ 

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

See inline styles.

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

See dangerously set innerHTML.

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

• Animations