In this article, we'll take a look at
Hide
React is a free and open-source front-end JavaScript library for building user interfaces based on components, developed by Facebook Developer. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. Let’s start with the React Cheat Sheet.
Using components
|
1 2 3 |
var Component = React.createClass({ ... }); var compo = React.render(<Component />, mountnode); |
Before Rendering
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
React.createClass({ componentWillMount: function () { $.get(this.props.url, function (data) { this.setState(data); }); }, render: function () { return ( <CommentList data={this.state.data} /> ); } }); |
Default Properties
|
1 2 3 4 5 |
React.createClass({ getDefaultProps: function () { return {name: ''}; } ); |
Initial States
|
1 2 3 4 5 6 7 8 9 10 11 |
React.createClass({ getInitialState: function () { return {data: []}; }, render: function () { return ( <CommentList data={this.state.data} /> ); } }); |
Lifecycle
|
1 2 3 4 5 6 7 8 9 10 11 12 |
componentWillMount() componentDidMount() // not on initial render componentWillReceiveProps(props) shouldComponentUpdate(props, state) componentWillUpdate(props, state) componentDidUpdate(prevProps, prevState) componentWillUnmount() // ...there is no DidUnmount or ReceiveState. |
Methods
|
1 2 3 4 5 6 7 8 9 |
{ render: function() getInitialState: function() getDefaultProps: function() mixins: [] propTypes: {} /<em> for validation </em>/ statics: { .. } /<em> static methods </em>/ displayName: '..' /<em> automatically filled in by jsx </em>/ } |
API
|
1 2 3 4 |
c.getDOMNode() // deprecated 0.13 React.findDOMNode(c) // 0.13+ c.forceUpdate() c.isMounted() |
Properties
|
1 2 3 |
this.setProps({ fullscreen: true }); this.props.fullscreen === true this.replaceProps({ ... }); |
States
|
1 2 3 |
this.setState({ editing: true }); this.state.editing === true this.replaceState({ ... }); |
Basic class
|
1 2 3 4 5 6 7 |
React.createClass({ render: function () { return ( <div>Hello {this.props.name}</div> ); } }); |
Actions
|
1 2 3 4 5 6 7 8 9 10 |
<form onSubmit={this.handleSubmit}> Name: <input ref="name"> </form> React.createClass({ handleSubmit: function (event) { name = this.refs['name'].getDOMNode().value; // see two-way binding below } }) |
Two-way binding
|
1 2 3 4 5 6 7 8 9 10 11 |
React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { return {value: 'Hello!'}; }, render: function() { return <input type="text" valueLink={this.linkState('value')} />; } }); // LinkedStateMixin adds a method to your React component called // linkState(). |
Lists
|
1 2 3 4 5 6 7 8 |
var TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; } }); |
Property validations
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
React.createClass({ propTypes: { // required requiredFunc: React.PropTypes.func.isRequired, requiredAny: React.PropTypes.any.isRequired, // primitives, optional by default bool: React.PropTypes.bool, func: React.PropTypes.func, number: React.PropTypes.number, string: React.PropTypes.string, } }); |
Class set
|
1 2 3 4 5 6 7 8 9 10 |
render: function() { var cx = React.addons.classSet; var classes = cx({ 'message': true, 'message-important': this.props.isImportant, 'message-read': this.props.isRead }); // same final string, but much cleaner return <div className={classes}>Great Scott!</div>; } |
Propagating properties to children
|
1 2 3 4 5 6 7 |
var VideoPlayer = React.createClass({ render: function() { return <VideoEmbed {...this.props} controls='false' />; } }); <VideoPlayer src="video.mp4" /> |
Mixins
|
1 2 3 4 5 6 7 |
var TickTock = React.createClass({ mixins: [SetIntervalMixin] } SetIntervalMixin = { componentWillMount: function() { .. } } |
Leave a Comment