General documentation / cheat sheets for various languages and services

React

`React.PropTypes`

Unless modified by .isRequired, all types are optional.

When using class components, it looks like this:

class NameValuePair extends React.Component {
  render() { ... }
  static propTypes = {
    name: React.PropTypes.string.isRequired,
    value: React.PropTypes.any.isRequired,
  }
}

For complex hierarchical types, types can be nested:

import {PropTypes, Component} from 'react';
const AuthorPropTypes = {
  first: PropTypes.string,
  middle: PropTypes.string,
  last: PropTypes.string.isRequired,
};
const ReferencePropTypes = {
  authors: PropTypes.arrayOf(PropTypes.shape(AuthorPropTypes)).isRequired,
  year: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};
class Reference extends Component {
  render() { ... }
  static propTypes = ReferencePropTypes
}

Primitives

React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string

Complex types

React.PropTypes.any: often used in combination with .isRequired.
React.PropTypes.node: Anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types.
React.PropTypes.element: A React element.
React.PropTypes.instanceOf(Class: ClassConstructor): You can also declare that a prop is an instance of a class. This uses JS's instanceof operator.
- E.g., React.PropTypes.instanceOf(Message)
React.PropTypes.oneOf(values: string[]): You can ensure that your prop is limited to specific values by treating it as an enum.
- E.g., React.PropTypes.oneOf(['News', 'Photos'])
React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]): Union types.
React.PropTypes.arrayOf(React.PropTypes.number): An array of a certain type.
React.PropTypes.objectOf(React.PropTypes.number): An object with property values of a specific type.
React.PropTypes.shape(objectTypes: {[index: string]: PropType}): An object taking on a specific set of key-valued types.
- E.g., React.PropTypes.shape({color: React.PropTypes.string, fontSize: React.PropTypes.number})
You can also specify a custom validator. It should return an Error object if the validation fails.: function(props, propName, componentName): Error { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } }

Component Lifecycle

Sources: Component Specs and Lifecycle, ES6 Classes, and comment in source.

constructor(props): Invoked once, on both client and server. When defining your Components as plain JavaScript (ES6) classes, getInitialState() is not used. Instead, set this.state = {...} in the constructor. Likewise, instead of defining getDefaultProps(), use static defaultProps = {...} somewhere in the class body, or declared as a field on the class constructor.
render(): This method is required, and must return a React Element.
componentWillMount(): Invoked once, on both client and server. Calling setState() in this method will not trigger an additional render.
componentDidMount(): Invoked once, only on the client, immediately after the first render. You SHOULD NOT call setState() in this method.
componentWillReceiveProps(nextProps): Invoked whenever receiving new props. nextProps are not necessarily different from this.props (they may even be referentially equal). Calling setState() in this method will not trigger an additional render.
shouldComponentUpdate(nextProps, nextState): boolean: Invoked whenever receiving new props or state. If not defined, this default effectively returns true (i.e., always re-render). By defining this method and comparing props (and/or state) to nextProps (and/or nextState), you can avoid potentially costly rendering calculations.
componentWillUpdate(nextProps, nextState): Invoked immediately before rendering (but not for the initial render). You MUST NOT call setState() in this method.
componentDidUpdate(prevProps, prevState): Invoked immediately after rendering (but not for the initial render). You SHOULD NOT call setState() in this method.
componentWillUnmount(): Invoked immediately before the component is removed from the DOM.