React.js (v0.14) cheatsheet
source link: https://devhints.io/[email protected]
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Deprecated: this guide targets an old version of React (v0.14). See the updated React cheatsheet for new versions.
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.
#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()}} />
Lists
var TodoList = React.createClass({
render: function() {
function item(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(item)}</ul>;
}
});
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK