reactjs Cheat Sheet
by kitallis via [Link]/21042/cs/3890/
Using components Lifecycle
var Component = [Link]({ ... }); componentWillMount()
var compo = React.render(<Component />, componentDidMount()
mountnode); // not on initial render
componentWillReceiveProps(props)
Before Rendering shouldComponentUpdate(props, state)
[Link]({ componentWillUpdate(props, state)
componentWillMount: function () { componentDidUpdate(prevProps, prevState)
$.get(this.prop[Link], function (data) componentWillUnmount()
{ // ...there is no DidUnmount or ReceiveState.
this.setState(data);
}); Methods
}, {
render: function () { render: function()
return ( getInitialState: function()
<CommentList data={this.stat‐ getDefaultProps: function()
[Link]} /> mixins: []
); propTypes: {} / for validation /
} statics: { .. } / static methods /
}); displayName: '..' / automatically filled in
by jsx /
Default Properties }
[Link]({
getDefaultProps: function () { API
return {name: ''}; [Link]() // deprecated 0.13
} React.findDOMNode(c) // 0.13+
); [Link]eUpdate()
[Link]unted()
Initial States
[Link]({ Properties
getInitialState: function () { [Link]({ fullscreen: true });
return {data: []}; this.props.fullscreen === true
}, this.replaceProps({ ... });
render: function () {
return ( States
<CommentList data={this.stat‐ [Link]({ editing: true });
[Link]} /> this.state.editing === true
); this.replaceState({ ... });
}
});
By kitallis Published 13th April, 2015. Sponsored by [Link]
[Link]/kitallis/ Last updated 12th May, 2016. Everyone has a novel in them. Finish
Page 1 of 3. Yours!
[Link]
reactjs Cheat Sheet
by kitallis via [Link]/21042/cs/3890/
Basic class Lists
[Link]({ var TodoList = [Link]({
render: function () { render: function() {
return ( var createItem = function(itemText) {
<div>Hello {this.props.name} return <li>{itemText}</li>;
</div> };
); return <ul>{t[Link][Link][Link]p(c‐
} reateItem)}</ul>;
}); }
});
Actions
<form onSubmit={[Link]}> Property validations
Name: <input ref="name"> [Link]({
</form> propTypes: {
React.createClass({ // required
handleSubmit: function (event) { requiredFunc: React.PropTy[Link]‐
name = this.refs['name'].getDOMNod‐ nc.isRequired,
e().value; requiredAny: React.PropTy[Link]y.i‐
// see two-way binding below sRequired,
} // primitives, optional by default
}) bool: React.PropTy[Link],
func: React.PropTy[Link],
Two-way binding number: React.PropTy[Link]mber,
[Link]({ string: React.PropTy[Link]ring,
mixins: [[Link]dons.LinkedStateMixin], }
getInitialState: function() { });
return {value: 'Hello!'};
}, Class set
render: function() { render: function() {
return <input type="text" valueLink= var cx = React.add[Link]assSet;
{t[Link]nkState('value')} />; var classes = cx({
} 'message': true,
}); 'message-important': this.props.i‐
// LinkedStateMixin adds a method to your React sImportant,
component called 'message-read': this.props.isRead
// linkState(). });
// same final string, but much cleaner
return <div className={classes}>Great
Scott!</div>;
}
By kitallis Published 13th April, 2015. Sponsored by [Link]
[Link]/kitallis/ Last updated 12th May, 2016. Everyone has a novel in them. Finish
Page 2 of 3. Yours!
[Link]
reactjs Cheat Sheet
by kitallis via [Link]/21042/cs/3890/
Propagating properties to children
var VideoPlayer = [Link]({
render: function() {
return <VideoEmbed {...this.props}
controls='false' />;
}
});
<VideoPlayer src="vi[Link]4" />
Mixins
var TickTock = [Link]({
mixins: [SetIntervalMixin]
}
SetIntervalMixin = {
componentWillMount: function() { .. }
}
Source
Thanks to http://ricostac[Link]m/cheatsheets/reac[Link]
By kitallis Published 13th April, 2015. Sponsored by [Link]
[Link]/kitallis/ Last updated 12th May, 2016. Everyone has a novel in them. Finish
Page 3 of 3. Yours!
[Link]
