React Snippets

React Imports

React: import React package — ir

import React from 'react';

React: import react-dom render method — irndr

import { render } from 'react-dom';

React Core

React: New dumb component (Presentational) — rnc

import React, { Component, PropTypes } from 'react';

export default class ${1:NewComponent} extends Component {
  static propTypes = {
    $2
  };

  render() {
    return (
      ${3:<div>${1:NewComponent} Content</div>}
    );
  }
}

React: Stateless functional component — rnsc

import React, { PropTypes } from 'react';

const ${1:NewComponent} = (props) => {
  return (
    <div>${3:${1:NewComponent} Content}</div>
  );
};

${1:NewComponent}.propTypes = {
  propName: PropTypes.$2
};

export default ${1:NewComponent};

React: constructor() method — rconst

constructor(props) {
  super(props);
  ${1}
}

React: render() method — rren

render() {
  return (
    ${1:<div></div>}
  );
}

React: Bind method to this (ES6) — rbm

this.${1} = this.${1}.bind(this);

React: Bind method to this (ES7) — rbm7

this.${1} = ::this.${1};

Lifecycle Methods

React: componentWillMount() lifecycle method — rlcwm

componentWillMount() {
  $1
}

React: componentDidMount() lifecycle method — rlcdm

componentDidMount() {
  $1
}

React: componentWillReceiveProps() lifecycle method — rlcwrp

componentWillReceiveProps(nextProps) {
  $1
}

React: componentWillUnmount() lifecycle method — rlcwun

componentWillUnmount() {
  $1
}

React: shouldComponentUpdate() lifecycle method — rlscup

shouldComponentUpdate(nextProps, nextState) {
  $1
}

Props Validation

React: PropTypes.any — rpany

${1:myProp}: PropTypes.any${2:,}

React: PropTypes.any.isRequired — rpanyr

${1:myProp}: PropTypes.any.isRequired${2:,}

React: PropTypes.string — rps

${1:myProp}: PropTypes.string${2:,}

React: PropTypes.string.isRequired — rpsr

${1:myProp}: PropTypes.string.isRequired${2:,}

React: PropTypes.number — rpn

${1:myProp}: PropTypes.number${2:,}

React: PropTypes.number.isRequired — rpnr

${1:myProp}: PropTypes.number.isRequired${2:,}

React: PropTypes.object — rpo

${1:myProp}: PropTypes.object${2:,}

React: PropTypes.object.isRequired — rpor

${1:myProp}: PropTypes.object.isRequired${2:,}

React: PropTypes.array — rpa

${1:myProp}: PropTypes.array${2:,}

React: PropTypes.array.isRequired — rpar

${1:myProp}: PropTypes.array.isRequired${2:,}

React: PropTypes.bool — rpb

${1:myProp}: PropTypes.bool${2:,}

React: PropTypes.bool.isRequired — rpbr

${1:myProp}: PropTypes.bool.isRequired${2:,}

React: PropTypes.element — rpe

${1:myProp}: PropTypes.element${2:,}

React: PropTypes.element.isRequired — rper

${1:myProp}: PropTypes.element.isRequired${2:,}

React: PropTypes.func — rpf

${1:myProp}: PropTypes.func${2:,}

React: PropTypes.func.isRequired — rpfr

${1:myProp}: PropTypes.func.isRequired${2:,}

React: PropTypes.oneOf — rpoo

${1:myProp}: PropTypes.oneOf([$2])${3:,}

React: PropTypes.oneOf.isRequired — rpoor

${1:myProp}: PropTypes.oneOf([$2]).isRequired${3:,}

React: PropTypes.oneOfType — rpoot

${1:myProp}: PropTypes.oneOfType([$2])${3:,}

React: PropTypes.oneOfType.isRequired — rpootr

${1:myProp}: PropTypes.oneOfType([$2]).isRequired${3:,}

React: PropTypes.shape — rpsh

PropTypes.shape({
  $1
})${2:,}

React: PropTypes.shape.isRequired — rpshr

PropTypes.shape({
  $1
}).isRequired${2:,}

State Manipulation

React State: Get initial state — rgis

this.state = {
  $1
};

React State: Get state property — rgsp

this.state.$1

React State: Set state — rss

this.setState({
  $1: $2
});

Props Manipulation

React Props: Get default props — rgdp

static defaultProps = {
  ${1:propName}: ${2:0}${3:,}
};

React Props: Get prop by name — rgp

this.props.$1

React Props: Set prop types — rspt

static propTypes = {
  ${1:propName}: PropTypes.${2}${3:,}
};