Powerful React Cheat Sheet For Developers : Master Hooks, Components & State Management

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

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

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

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

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

Before Rendering

React.createClass({
  componentWillMount: function () {
    $.get(this.props.url, function (data) {
      this.setState(data);
    });
  },

  render: function () {
    return (
      <CommentList data={this.state.data} />
    );
  }
});

React.createClass({

componentWillMount: function () {

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

this.setState(data);

});

render: function () {

return (

);

}

});

Default Properties

React.createClass({
  getDefaultProps: function () {
    return {name: ''};
  }
);

React.createClass({

getDefaultProps: function () {

return {name: ''};

}

);

Initial States

React.createClass({
  getInitialState: function () {
    return {data: []};
  },

  render: function () {
    return (
      <CommentList data={this.state.data} />
    );
  }
});

React.createClass({

getInitialState: function () {

return {data: []};

render: function () {

return (

);

}

});

Lifecycle

componentWillMount()
componentDidMount()

// not on initial render
componentWillReceiveProps(props)
shouldComponentUpdate(props, state)
componentWillUpdate(props, state)
componentDidUpdate(prevProps, prevState)

componentWillUnmount()

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

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

{
  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>/
}

{

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

c.getDOMNode() // deprecated 0.13
React.findDOMNode(c) // 0.13+
c.forceUpdate()
c.isMounted()

c.getDOMNode() // deprecated 0.13

React.findDOMNode(c) // 0.13+

c.forceUpdate()

c.isMounted()

Properties

this.setProps({ fullscreen: true });
this.props.fullscreen === true
this.replaceProps({ ... });

this.setProps({ fullscreen: true });

this.props.fullscreen === true

this.replaceProps({ ... });

States

this.setState({ editing: true });
this.state.editing === true
this.replaceState({ ... });

this.setState({ editing: true });

this.state.editing === true

this.replaceState({ ... });

Basic class

React.createClass({
  render: function () {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
});

React.createClass({

render: function () {

return (

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

);

}

});

Actions

<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
  }
})

Name: <input ref="name">

</form>

React.createClass({

handleSubmit: function (event) {

name = this.refs['name'].getDOMNode().value;

// see two-way binding below

}

})

Two-way binding

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

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

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

var TodoList = React.createClass({

render: function() {

var createItem = function(itemText) {

return <li>{itemText}</li>;

};

return <ul>{this.props.items.map(createItem)}</ul>;

}

});

Property validations

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,
  }
});

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

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>;
}

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

var VideoPlayer = React.createClass({
  render: function() {
    return <VideoEmbed {...this.props} controls='false' />;
  }
});

<VideoPlayer src="video.mp4" />

var VideoPlayer = React.createClass({

render: function() {

return <VideoEmbed {...this.props} controls='false' />;

}

});

Mixins

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

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

var TickTock = React.createClass({

mixins: [SetIntervalMixin]

}

SetIntervalMixin = {

componentWillMount: function() { .. }

}

Source

Thanks to http://ricostacruz.com/cheatsheets/react.html

Powerful React Cheat Sheet for Developers : Master Hooks, Components & State Management

Using components

Before Rendering

Default Properties

Initial States

Lifecycle

Methods

API

Properties

States

Basic class

Actions

Two-way binding

Lists

Property validations

Class set

Propagating properties to children

Mixins

Source

Reactjs Cheat Sheet

Leave a Comment X

Powerful React Cheat Sheet for Developers : Master Hooks, Components & State Management

Using components

Before Rendering

Default Properties

Initial States

Lifecycle

Methods

API

Properties

States

Basic class

Actions

Two-way binding

Lists

Property valida­tions

Class set

Propag­ating properties to children

Mixins

Source

Reactjs Cheat Sheet

You may also like

Leave a Comment X

Property validations

Propagating properties to children