reactjs Cheat Sheet

by kitallis via cheatography.com/21042/cs/3890/

Basic class

Lifecycle

React.createClass({

componentWillMount()

render: function () {

componentDidMount()

return (

// not on initial render

<div>Hello {this.props.name}</div>

componentWillReceiveProps(props)

);

shouldComponentUpdate(props, state)

componentWillUpdate(props, state)

});

componentDidUpdate(prevProps, prevState)
componentWillUnmount()

Using components

// ...there is no DidUnmount or ReceiveState.

var Component = React.createClass({ ... });

var compo = React.render(<Component />, mountnode);

Initial States
React.createClass({

States

getInitialState: function () {
return {data: []};

this.setState({ editing: true });

},

this.state.editing === true

render: function () {

this.replaceState({ ... });

return (
<CommentList data={this.state.data} />

Properties

);
this.setProps({ fullscreen: true });

this.props.fullscreen === true

});

this.replaceProps({ ... });

Default Properties

API

React.createClass({
c.getDOMNode() // deprecated 0.13

getDefaultProps: function () {

React.findDOMNode(c) // 0.13+

return {name: ''};

c.forceUpdate()

c.isMounted()

);

Methods

Before Rendering

React.createClass({
render: function()

componentWillMount: function () {

getInitialState: function()

$.get(this.props.url, function (data) {

getDefaultProps: function()

this.setState(data);

mixins: []

});

propTypes: {} / for validation /

},

statics: { .. } / static methods /

displayName: '..' / automatically filled in by jsx /

render: function () {
return (

By kitallis

Published 13th April, 2015.

Sponsored by CrosswordCheats.com

cheatography.com/kitallis/

Last updated 13th April, 2015.

Learn to solve cryptic crosswords!

Page 1 of 3.

http://crosswordcheats.com

reactjs Cheat Sheet

by kitallis via cheatography.com/21042/cs/3890/

Before Rendering (cont)

Property validations

<CommentList data={this.state.data} />

React.createClass({

);

propTypes: {

// required
requiredFunc: React.PropTypes.func.isRequired,

});

requiredAny: React.PropTypes.any.isRequired,
Actions

// primitives, optional by default

bool: React.PropTypes.bool,

<form onSubmit={this.handleSubmit}>

func: React.PropTypes.func,

Name: <input ref="name">

number: React.PropTypes.number,

</form>

string: React.PropTypes.string,

React.createClass({

handleSubmit: function (event) {

name = this.refs['name'].getDOMNode().value;
// see two-way binding below

});
Class set

}
})

render: function() {
var cx = React.addons.classSet;

Two-way binding

var classes = cx({

'message': true,

React.createClass({

'message-important': this.props.isImportant,

mixins: [React.addons.LinkedStateMixin],

'message-read': this.props.isRead

getInitialState: function() {

});

return {value: 'Hello!'};

// same final string, but much cleaner

},

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

render: function() {
return <input type="text" valueLink=
{this.linkState('value')} />;

}
Propagating properties to children

}
});

var VideoPlayer = React.createClass({

// LinkedStateMixin adds a method to your React

render: function() {

component called

return <VideoEmbed {...this.props}

// linkState().

controls='false' />;

Lists

});

<VideoPlayer src="video.mp4" />

var TodoList = React.createClass({

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

By kitallis

Published 13th April, 2015.

Sponsored by CrosswordCheats.com

cheatography.com/kitallis/

Last updated 13th April, 2015.

Learn to solve cryptic crosswords!

Page 2 of 3.

http://crosswordcheats.com

reactjs Cheat Sheet

by kitallis via cheatography.com/21042/cs/3890/

Mixins
var TickTock = React.createClass({
mixins: [SetIntervalMixin]
}
SetIntervalMixin = {
componentWillMount: function() { .. }
}
Source
Thanks to http://ricostacruz.com/cheatsheets/react.html
By kitallis

Published 13th April, 2015.

Sponsored by CrosswordCheats.com

cheatography.com/kitallis/

Last updated 13th April, 2015.

Learn to solve cryptic crosswords!

Page 3 of 3.

http://crosswordcheats.com