react.json

{
  "Import React": {
    "prefix": "imr",
    "body": ["import React from 'react'", ""]
  },
  "Import React, { Component }": {
    "prefix": "imrc",
    "body": ["import React, { Component } from 'react'", ""]
  },
  "Import React, { Component } & PropTypes": {
    "prefix": "imrcp",
    "body": [
      "import React, { Component } from 'react'",
      "import PropTypes from 'prop-types'",
      ""
    ]
  },
  "Import React, { PureComponent }": {
    "prefix": "imrpc",
    "body": ["import React, { PureComponent } from 'react'", ""]
  },
  "Import React, { PureComponent } & PropTypes": {
    "prefix": "imrpcp",
    "body": [
      "import React, { PureComponent } from 'react'",
      "import PropTypes from 'prop-types'",
      ""
    ]
  },
  "React Class Compoment": {
    "prefix": "rcc",
    "body": [
      "import React, { Component } from 'react'",
      "",
      "export default class ${1:componentName} extends Component {",
      "  render() {",
      "    return (",
      "      <div>",
      "        $0",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "Creates a React component class with ES7 module system"
  },
  "React Class Export Component": {
    "prefix": "rce",
    "body": [
      "import React, { Component } from 'react'",
      "",
      "class ${1:componentName} extends Component {",
      "  render() {",
      "    return (",
      "      <div>",
      "        $0",
      "      </div>",
      "    )",
      "  }",
      "}",
      "",
      "export default ${1:componentName}",
      ""
    ],
    "description": "Creates a React component class with ES7 module system"
  },
  "React Functional Export Component": {
    "prefix": "rfe",
    "body": [
      "import React from 'react'",
      "",
      "const ${1:componentName} = () => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:componentName}",
      ""
    ],
    "description": "Creates a React Functional Component with ES7 module system"
  },
  "React Functional Export Component With PropTypes": {
    "prefix": "rfep",
    "body": [
      "import React from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "const ${1:componentName} = () => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}",
      "",
      "${1:componentName}.propTypes = {",
      "",
      "}",
      "",
      "export default ${1:componentName}",
      ""
    ],
    "description": "Creates a React Functional Component with ES7 module system with PropTypes"
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "export default function ${1:componentName}() {",
      "  return (",
      "    <>",
      "      $0",
      "    </>",
      "  );",
      "}",
      ""
    ],
    "description": "Creates a React Functional Component with ES7 module system"
  },
  "React Functional Component With PropTypes": {
    "prefix": "rfcp",
    "body": [
      "import React from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "export default function ${1:componentName}() {",
      "  return (",
      "    <>",
      "      $0",
      "    </>",
      "  );",
      "}",
      "",
      "${1:componentName}.propTypes = {",
      "",
      "}",
      ""
    ],
    "description": "Creates a React Functional Component with ES7 module system with PropTypes"
  },
  "React Class Export Component With PropTypes": {
    "prefix": "rcep",
    "body": [
      "import React, { Component } from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "class ${1:componentName} extends Component {",
      "  static propTypes = {",
      "",
      "  }",
      "",
      "  render() {",
      "    return (",
      "      <div>",
      "        $0",
      "      </div>",
      "    )",
      "  }",
      "}",
      "",
      "export default ${1:componentName}",
      ""
    ],
    "description": "Creates a React component class with ES7 module system"
  },
  "React Class Pure Component": {
    "prefix": "rpc",
    "body": [
      "import React, { PureComponent } from 'react'",
      "",
      "export default class ${1:componentName} extends PureComponent {",
      "  render() {",
      "    return (",
      "      <div>",
      "        $0",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "Creates a React component class with ES7 module system"
  },
  "React Class Pure Component With PropTypes": {
    "prefix": "rpcp",
    "body": [
      "import React, { PureComponent } from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "export default class ${1:componentName} extends PureComponent {",
      "  static propTypes = {",
      "",
      "  }",
      "",
      "  render() {",
      "    return (",
      "      <div>",
      "        $0",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "Creates a React component class with ES7 module system"
  },
  "React Class Compoment PropTypes": {
    "prefix": "rccp",
    "body": [
      "import React, { Component } from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "export default class ${1:componentName} extends Component {",
      "  static propTypes = {",
      "    ${2:prop}: ${3:PropTypes}",
      "  }",
      "",
      "  render() {",
      "    return (",
      "      <div>",
      "        $0",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "Creates a React component class with PropTypes and ES7 module system"
  },
  "Class Constructor": {
    "prefix": "rconst",
    "body": [
      "constructor(props) {",
      "  super(props)",
      "",
      "  this.state = {",
      "     $0",
      "  }",
      "}",
      ""
    ],
    "description": "Adds a default constructor for it('', () => {}) the class that contains props as arguments"
  },
  "Empty State": {
    "prefix": "est",
    "body": ["this.state = {", "  $1", "}", ""],
    "description": "Creates empty state object. To be used in a constructor."
  },
  "Get Derived State From Props": {
    "prefix": "dsfp",
    "body": [
      "static getDerivedStateFromProps(props, state) {",
      "  $0",
      "}",
      ""
    ],
    "description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing."
  },
  "Get Snapshot Before Update": {
    "prefix": "sbu",
    "body": [
      "static getSnapshotBeforeUpdate(prevProps, prevState) {",
      "  $0",
      "}",
      ""
    ],
    "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed."
  },
  "Component Did Catch": {
    "prefix": "cdc",
    "body": ["componentDidCatch(error, info) {", "  $0", "}", ""],
    "description": "This lifecycle is invoked after an error has been thrown by a descendant component."
  },
  "Component Did Mount": {
    "prefix": "cdm",
    "body": ["componentDidMount() {", "  $0", "}", ""],
    "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
  },
  "Component Did Mount (Arrow func)": {
    "prefix": "cdma",
    "body": ["componentDidMount = () => {", "  $0", "}", ""],
    "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
  },
  "Should Component Update": {
    "prefix": "scu",
    "body": ["shouldComponentUpdate(nextProps, nextState) {", "  $0", "}", ""],
    "description": "Invoked before rendering when new props or state are being received. "
  },
  "Should Component Update (Arrow func)": {
    "prefix": "scua",
    "body": [
      "shouldComponentUpdate = (nextProps, nextState) => {",
      "  $0",
      "}",
      ""
    ],
    "description": "Invoked before rendering when new props or state are being received. "
  },
  "Component Did Update": {
    "prefix": "cdup",
    "body": ["componentDidUpdate(prevProps, prevState) {", "  $0", "}", ""],
    "description": "Invoked immediately after the component's updates are flushed to the DOM."
  },
  "Component Did Update (Arrow func)": {
    "prefix": "cdupa",
    "body": [
      "componentDidUpdate = (prevProps, prevState) => {",
      "  $0",
      "}",
      ""
    ],
    "description": "Invoked immediately after the component's updates are flushed to the DOM."
  },
  "Component Will Unmount": {
    "prefix": "cwun",
    "body": ["componentWillUnmount() {", "  $0", "}", ""],
    "description": "Invoked immediately before a component is unmounted from the DOM."
  },
  "Component Will Unmount (Arrow func)": {
    "prefix": "cwuna",
    "body": ["componentWillUnmount = () => {", "  $0", "}", ""],
    "description": "Invoked immediately before a component is unmounted from the DOM."
  },
  "Component Will Mount - [Deprecated]": {
    "prefix": "cwm",
    "body": ["componentWillMount() {", "  $0", "}", ""],
    "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
  },
  "Component Will Mount (Arrow func) - [Deprecated]": {
    "prefix": "cwma",
    "body": ["componentWillMount = () => {", "  $0", "}", ""],
    "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
  },
  "Component Will Receive Props - [Deprecated]": {
    "prefix": "cwr",
    "body": ["componentWillReceiveProps(nextProps) {", "  $0", "}", ""],
    "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
  },
  "Component Will Receive Props (Arrow func) - [Deprecated]": {
    "prefix": "cwra",
    "body": ["componentWillReceiveProps = (nextProps) => {", "  $0", "}", ""],
    "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
  },
  "Component Will Update - [Deprecated]": {
    "prefix": "cwup",
    "body": ["componentWillUpdate(nextProps, nextState) {", "  $0", "}", ""],
    "description": "Invoked immediately before rendering when new props or state are being received."
  },
  "Component Will Update (Arrow func) - [Deprecated]": {
    "prefix": "cwupa",
    "body": [
      "componentWillUpdate = (nextProps, nextState) => {",
      "  $0",
      "}",
      ""
    ],
    "description": "Invoked immediately before rendering when new props or state are being received."
  },
  "Component Render": {
    "prefix": "ren",
    "body": [
      "render() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "Basic render."
  },
  "Component Set State Object": {
    "prefix": "sst",
    "body": "this.setState({$0})",
    "description": "Performs a shallow merge of nextState into current state"
  },
  "Component Set State Func": {
    "prefix": "ssf",
    "body": ["this.setState((state, props) => { return { $0 }})", ""],
    "description": "Performs a shallow merge of nextState into current state"
  },
  "Component Props": {
    "prefix": "props",
    "body": "this.props.$0",
    "description": "Access component's props"
  },
  "Component State": {
    "prefix": "state",
    "body": "this.state.$0"
  }
}