From e7dec1733dc350a670ab97c1219171b6ffa164db Mon Sep 17 00:00:00 2001 From: Rusinov Anton Date: Wed, 11 Apr 2018 15:19:08 +0300 Subject: [PATCH 1/5] Update lifecycle hooks snippets 2 new lifecycle hooks were added, componentWill- hooks been deprecated in React 16.3 refs: https://github.com/facebook/react/releases/tag/v16.3.0 --- snippets/snippets.json | 103 +++++++++++++++++++++++++++++------------ 1 file changed, 73 insertions(+), 30 deletions(-) diff --git a/snippets/snippets.json b/snippets/snippets.json index a6d6c7b..3edee12 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -1,66 +1,84 @@ { "reactClassComponent": { "prefix": "rcc", - "body": "import React, { Component } from 'react';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default ${1:${TM_FILENAME_BASE}};", + "body": + "import React, { Component } from 'react';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default ${1:${TM_FILENAME_BASE}};", "description": "Creates a React component class with ES6 module system" }, "reactReduxComponent": { "prefix": "rrc", - "body": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nfunction mapStateToProps(state) {\n\treturn {\n\n\t};\n}\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default connect(\n\tmapStateToProps,\n)(${1:${TM_FILENAME_BASE}});", + "body": + "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nfunction mapStateToProps(state) {\n\treturn {\n\n\t};\n}\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default connect(\n\tmapStateToProps,\n)(${1:${TM_FILENAME_BASE}});", "description": "Creates a React component class connected to redux" }, "reactJustClassComponent": { "prefix": "rcjc", - "body": "class ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n", + "body": + "class ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n", "description": "Creates a React component class with ES6 module system" }, "reactClassComponentPropTypes": { "prefix": "rccp", - "body": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": "Creates a React component class with PropTypes and ES6 module system" + "body": + "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": + "Creates a React component class with PropTypes and ES6 module system" }, "reactClassComponentWithMethods": { "prefix": "rcfc", - "body": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t}\n\n\tcomponentWillMount() {\n\n\t}\n\n\tcomponentDidMount() {\n\n\t}\n\n\tcomponentWillReceiveProps(nextProps) {\n\n\t}\n\n\tshouldComponentUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate(prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount() {\n\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t
\n\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": "Creates a React component class with PropTypes and all lifecycle methods and ES6 module system" + "body": + "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t}\n\n\tcomponentWillMount() {\n\n\t}\n\n\tcomponentDidMount() {\n\n\t}\n\n\tcomponentWillReceiveProps(nextProps) {\n\n\t}\n\n\tshouldComponentUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate(prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount() {\n\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t
\n\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": + "Creates a React component class with PropTypes and all lifecycle methods and ES6 module system" }, "reactWithWebpackDefaults": { "prefix": "rwwd", - "body": "class ${1:${TM_FILENAME_BASE}} extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {};\n\n\t}\n\n\trender() {\n\t\treturn(\n\t\t\t
\n\n\t\t\t$0
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": "Creates a React component class with constructor, empty state, proptypes and export in ES6 module system without imports. (Mostly used when React, Proptypes are provided by webpack provide plugin)" + "body": + "class ${1:${TM_FILENAME_BASE}} extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {};\n\n\t}\n\n\trender() {\n\t\treturn(\n\t\t\t
\n\n\t\t\t$0
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": + "Creates a React component class with constructor, empty state, proptypes and export in ES6 module system without imports. (Mostly used when React, Proptypes are provided by webpack provide plugin)" }, "reactPureComponent": { "prefix": "rpc", - "body": "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends PureComponent {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": "Creates a React pure component class with PropTypes and ES6 module system" + "body": + "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends PureComponent {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": + "Creates a React pure component class with PropTypes and ES6 module system" }, "reactStateless": { "prefix": "rsc", - "body": "import React from 'react';\n\nconst ${1:${TM_FILENAME_BASE}} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": "Creates a stateless React component without PropTypes and ES6 module system" + "body": + "import React from 'react';\n\nconst ${1:${TM_FILENAME_BASE}} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": + "Creates a stateless React component without PropTypes and ES6 module system" }, "reactStatelessProps": { "prefix": "rscp", - "body": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ${1:${TM_FILENAME_BASE}} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": "Creates a stateless React component with PropTypes and ES6 module system" + "body": + "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ${1:${TM_FILENAME_BASE}} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": + "Creates a stateless React component with PropTypes and ES6 module system" }, "classConstructor": { "prefix": "con", "body": "constructor(props) {\n\tsuper(props);\n\t$0\n}\n", - "description": "Adds a default constructor for the class that contains props as arguments" + "description": + "Adds a default constructor for the class that contains props as arguments" }, "classConstructorContext": { "prefix": "conc", - "body": "constructor(props, context) {\n\tsuper(props, context);\n\t$0\n}\n", - "description": "Adds a default constructor for the class that contains props and context as arguments" + "body": + "constructor(props, context) {\n\tsuper(props, context);\n\t$0\n}\n", + "description": + "Adds a default constructor for the class that contains props and context as arguments" }, "emptyState": { @@ -72,49 +90,57 @@ "componentWillMount": { "prefix": "cwm", "body": "\ncomponentWillMount() {\n\t$0\n}\n", - "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" + "description": + "Invoked once, both on the client and server, immediately before the initial rendering occurs" }, "componentDidMount": { "prefix": "cdm", "body": "componentDidMount() {\n\t$0\n}\n", - "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." + "description": + "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." }, "componentWillReceiveProps": { "prefix": "cwr", "body": "componentWillReceiveProps(nextProps) {\n\t$0\n}\n", - "description": "Invoked when a component is receiving new props. This method is not called for the initial render." + "description": + "Invoked when a component is receiving new props. This method is not called for the initial render. [DEPRECATION NOTE]: This method is deprecated in React 16.3" }, "shouldComponentUpdate": { "prefix": "scu", "body": "shouldComponentUpdate(nextProps, nextState) {\n\t$0\n}\n", - "description": "Invoked before rendering when new props or state are being received. " + "description": + "Invoked before rendering when new props or state are being received. " }, "componentWillUpdate": { "prefix": "cwup", "body": "componentWillUpdate(nextProps, nextState) {\n\t$0\n}\n", - "description": "Invoked immediately before rendering when new props or state are being received." + "description": + "Invoked immediately before rendering when new props or state are being received. [DEPRECATION NOTE]: This method is deprecated in React 16.3" }, "componentDidUpdate": { "prefix": "cdup", "body": "componentDidUpdate(prevProps, prevState) {\n\t$0\n}\n", - "description": "Invoked immediately after the component's updates are flushed to the DOM." + "description": + "Invoked immediately after the component's updates are flushed to the DOM." }, "componentWillUnmount": { "prefix": "cwun", "body": "componentWillUnmount() {\n\t$0\n}\n", - "description": "Invoked immediately before a component is unmounted from the DOM." + "description": + "Invoked immediately before a component is unmounted from the DOM. [DEPRECATION NOTE]: This method is deprecated in React 16.3" }, "componentRender": { "prefix": "ren", "body": "render() {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n}", - "description": "When called, it should examine this.props and this.state and return a single child element." + "description": + "When called, it should examine this.props and this.state and return a single child element." }, "componentSetStateObject": { @@ -222,12 +248,14 @@ "propTypeNode": { "prefix": "ptnd", "body": "PropTypes.node,", - "description": "Anything that can be rendered: numbers, strings, elements or an array" + "description": + "Anything that can be rendered: numbers, strings, elements or an array" }, "propTypeNodeRequired": { "prefix": "ptndr", "body": "PropTypes.node.isRequired,", - "description": "Anything that can be rendered: numbers, strings, elements or an array required" + "description": + "Anything that can be rendered: numbers, strings, elements or an array required" }, "propTypeElement": { "prefix": "ptel", @@ -252,12 +280,14 @@ "propTypeEnum": { "prefix": "pte", "body": "PropTypes.oneOf(['$0']),", - "description": "Prop type limited to specific values by treating it as an enum" + "description": + "Prop type limited to specific values by treating it as an enum" }, "propTypeEnumRequired": { "prefix": "pter", "body": "PropTypes.oneOf(['$0']).isRequired,", - "description": "Prop type limited to specific values by treating it as an enum required" + "description": + "Prop type limited to specific values by treating it as an enum required" }, "propTypeOneOfType": { "prefix": "ptet", @@ -298,5 +328,18 @@ "prefix": "ptshr", "body": "PropTypes.shape({\n\t$0\n}).isRequired,", "description": "An object taking on a particular shape required" + }, + "getSnapshotBeforeUpdate": { + "prefix": "gsbu", + "body": "getSnapshotBeforeUpdate(prevProps, prevState) {\n\t$0\n}\n", + "description": + "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" + }, + "getDerivedStateFromProps": { + "prefix": "gdsfp", + "body": + "static getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", + "description": + "Invoked after a component is instantiated as well as when it receives new props." } } From 1b5c324d893eb25b21e78f7ce34d13820a2203db Mon Sep 17 00:00:00 2001 From: Rusinov Anton Date: Tue, 17 Apr 2018 09:39:20 +0300 Subject: [PATCH 2/5] Remove errorneous deprecation note for componentWillUnmount method --- snippets/snippets.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/snippets.json b/snippets/snippets.json index 3edee12..4626ff6 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -133,7 +133,7 @@ "prefix": "cwun", "body": "componentWillUnmount() {\n\t$0\n}\n", "description": - "Invoked immediately before a component is unmounted from the DOM. [DEPRECATION NOTE]: This method is deprecated in React 16.3" + "Invoked immediately before a component is unmounted from the DOM." }, "componentRender": { From 77c8c5c450a3c581146f0e77efb3348cfec5e68d Mon Sep 17 00:00:00 2001 From: Rusinov Anton Date: Tue, 17 Apr 2018 09:42:11 +0300 Subject: [PATCH 3/5] Remove unnecessary whitespaces --- snippets/snippets.json | 99 ++++++++++++++---------------------------- 1 file changed, 33 insertions(+), 66 deletions(-) diff --git a/snippets/snippets.json b/snippets/snippets.json index 4626ff6..3bea87f 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -1,84 +1,66 @@ { "reactClassComponent": { "prefix": "rcc", - "body": - "import React, { Component } from 'react';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default ${1:${TM_FILENAME_BASE}};", + "body": "import React, { Component } from 'react';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default ${1:${TM_FILENAME_BASE}};", "description": "Creates a React component class with ES6 module system" }, "reactReduxComponent": { "prefix": "rrc", - "body": - "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nfunction mapStateToProps(state) {\n\treturn {\n\n\t};\n}\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default connect(\n\tmapStateToProps,\n)(${1:${TM_FILENAME_BASE}});", + "body": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nfunction mapStateToProps(state) {\n\treturn {\n\n\t};\n}\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default connect(\n\tmapStateToProps,\n)(${1:${TM_FILENAME_BASE}});", "description": "Creates a React component class connected to redux" }, "reactJustClassComponent": { "prefix": "rcjc", - "body": - "class ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n", + "body": "class ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n", "description": "Creates a React component class with ES6 module system" }, "reactClassComponentPropTypes": { "prefix": "rccp", - "body": - "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": - "Creates a React component class with PropTypes and ES6 module system" + "body": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": "Creates a React component class with PropTypes and ES6 module system" }, "reactClassComponentWithMethods": { "prefix": "rcfc", - "body": - "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t}\n\n\tcomponentWillMount() {\n\n\t}\n\n\tcomponentDidMount() {\n\n\t}\n\n\tcomponentWillReceiveProps(nextProps) {\n\n\t}\n\n\tshouldComponentUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate(prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount() {\n\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t
\n\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": - "Creates a React component class with PropTypes and all lifecycle methods and ES6 module system" + "body": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t}\n\n\tcomponentWillMount() {\n\n\t}\n\n\tcomponentDidMount() {\n\n\t}\n\n\tcomponentWillReceiveProps(nextProps) {\n\n\t}\n\n\tshouldComponentUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate(nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate(prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount() {\n\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t
\n\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": "Creates a React component class with PropTypes and all lifecycle methods and ES6 module system" }, "reactWithWebpackDefaults": { "prefix": "rwwd", - "body": - "class ${1:${TM_FILENAME_BASE}} extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {};\n\n\t}\n\n\trender() {\n\t\treturn(\n\t\t\t
\n\n\t\t\t$0
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": - "Creates a React component class with constructor, empty state, proptypes and export in ES6 module system without imports. (Mostly used when React, Proptypes are provided by webpack provide plugin)" + "body": "class ${1:${TM_FILENAME_BASE}} extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {};\n\n\t}\n\n\trender() {\n\t\treturn(\n\t\t\t
\n\n\t\t\t$0
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": "Creates a React component class with constructor, empty state, proptypes and export in ES6 module system without imports. (Mostly used when React, Proptypes are provided by webpack provide plugin)" }, "reactPureComponent": { "prefix": "rpc", - "body": - "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends PureComponent {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": - "Creates a React pure component class with PropTypes and ES6 module system" + "body": "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends PureComponent {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": "Creates a React pure component class with PropTypes and ES6 module system" }, "reactStateless": { "prefix": "rsc", - "body": - "import React from 'react';\n\nconst ${1:${TM_FILENAME_BASE}} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": - "Creates a stateless React component without PropTypes and ES6 module system" + "body": "import React from 'react';\n\nconst ${1:${TM_FILENAME_BASE}} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": "Creates a stateless React component without PropTypes and ES6 module system" }, "reactStatelessProps": { "prefix": "rscp", - "body": - "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ${1:${TM_FILENAME_BASE}} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", - "description": - "Creates a stateless React component with PropTypes and ES6 module system" + "body": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ${1:${TM_FILENAME_BASE}} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", + "description": "Creates a stateless React component with PropTypes and ES6 module system" }, "classConstructor": { "prefix": "con", "body": "constructor(props) {\n\tsuper(props);\n\t$0\n}\n", - "description": - "Adds a default constructor for the class that contains props as arguments" + "description": "Adds a default constructor for the class that contains props as arguments" }, "classConstructorContext": { "prefix": "conc", - "body": - "constructor(props, context) {\n\tsuper(props, context);\n\t$0\n}\n", - "description": - "Adds a default constructor for the class that contains props and context as arguments" + "body": "constructor(props, context) {\n\tsuper(props, context);\n\t$0\n}\n", + "description": "Adds a default constructor for the class that contains props and context as arguments" }, "emptyState": { @@ -90,57 +72,49 @@ "componentWillMount": { "prefix": "cwm", "body": "\ncomponentWillMount() {\n\t$0\n}\n", - "description": - "Invoked once, both on the client and server, immediately before the initial rendering occurs" + "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" }, "componentDidMount": { "prefix": "cdm", "body": "componentDidMount() {\n\t$0\n}\n", - "description": - "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." + "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." }, "componentWillReceiveProps": { "prefix": "cwr", "body": "componentWillReceiveProps(nextProps) {\n\t$0\n}\n", - "description": - "Invoked when a component is receiving new props. This method is not called for the initial render. [DEPRECATION NOTE]: This method is deprecated in React 16.3" + "description": "Invoked when a component is receiving new props. This method is not called for the initial render. [DEPRECATION NOTE]: This method is deprecated in React 16.3" }, "shouldComponentUpdate": { "prefix": "scu", "body": "shouldComponentUpdate(nextProps, nextState) {\n\t$0\n}\n", - "description": - "Invoked before rendering when new props or state are being received. " + "description": "Invoked before rendering when new props or state are being received. " }, "componentWillUpdate": { "prefix": "cwup", "body": "componentWillUpdate(nextProps, nextState) {\n\t$0\n}\n", - "description": - "Invoked immediately before rendering when new props or state are being received. [DEPRECATION NOTE]: This method is deprecated in React 16.3" + "description": "Invoked immediately before rendering when new props or state are being received. [DEPRECATION NOTE]: This method is deprecated in React 16.3" }, "componentDidUpdate": { "prefix": "cdup", "body": "componentDidUpdate(prevProps, prevState) {\n\t$0\n}\n", - "description": - "Invoked immediately after the component's updates are flushed to the DOM." + "description": "Invoked immediately after the component's updates are flushed to the DOM." }, "componentWillUnmount": { "prefix": "cwun", "body": "componentWillUnmount() {\n\t$0\n}\n", - "description": - "Invoked immediately before a component is unmounted from the DOM." + "description": "Invoked immediately before a component is unmounted from the DOM." }, "componentRender": { "prefix": "ren", "body": "render() {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n}", - "description": - "When called, it should examine this.props and this.state and return a single child element." + "description": "When called, it should examine this.props and this.state and return a single child element." }, "componentSetStateObject": { @@ -248,14 +222,12 @@ "propTypeNode": { "prefix": "ptnd", "body": "PropTypes.node,", - "description": - "Anything that can be rendered: numbers, strings, elements or an array" + "description": "Anything that can be rendered: numbers, strings, elements or an array" }, "propTypeNodeRequired": { "prefix": "ptndr", "body": "PropTypes.node.isRequired,", - "description": - "Anything that can be rendered: numbers, strings, elements or an array required" + "description": "Anything that can be rendered: numbers, strings, elements or an array required" }, "propTypeElement": { "prefix": "ptel", @@ -280,14 +252,12 @@ "propTypeEnum": { "prefix": "pte", "body": "PropTypes.oneOf(['$0']),", - "description": - "Prop type limited to specific values by treating it as an enum" + "description": "Prop type limited to specific values by treating it as an enum" }, "propTypeEnumRequired": { "prefix": "pter", "body": "PropTypes.oneOf(['$0']).isRequired,", - "description": - "Prop type limited to specific values by treating it as an enum required" + "description": "Prop type limited to specific values by treating it as an enum required" }, "propTypeOneOfType": { "prefix": "ptet", @@ -332,14 +302,11 @@ "getSnapshotBeforeUpdate": { "prefix": "gsbu", "body": "getSnapshotBeforeUpdate(prevProps, prevState) {\n\t$0\n}\n", - "description": - "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" + "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" }, "getDerivedStateFromProps": { "prefix": "gdsfp", - "body": - "static getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", - "description": - "Invoked after a component is instantiated as well as when it receives new props." + "body": "static getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", + "description": "Invoked after a component is instantiated as well as when it receives new props." } } From 787bb3a2e43d6826415bdd97f19a14567c334d7b Mon Sep 17 00:00:00 2001 From: Rusinov Anton Date: Tue, 17 Apr 2018 09:47:29 +0300 Subject: [PATCH 4/5] Add snippet for componentDidCatch method --- snippets/snippets.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/snippets/snippets.json b/snippets/snippets.json index 3bea87f..4c06f96 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -308,5 +308,10 @@ "prefix": "gdsfp", "body": "static getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", "description": "Invoked after a component is instantiated as well as when it receives new props." + }, + "componentDidCatch": { + "prefix": "cdc", + "body": "componentDidCatch(error, info) {\n\t$0\n}\n", + "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." } } From 33b59c0dc8cd36ce10f527d4f17efeef1a65ddba Mon Sep 17 00:00:00 2001 From: Rusinov Anton Date: Tue, 17 Apr 2018 09:50:22 +0300 Subject: [PATCH 5/5] Update readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index c2fe8ec..56c7042 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,9 @@ Below is a list of all available snippets and the triggers of each one. The ** | `cwup→` | `componentWillUpdate method` | | `cdup→` | `componentDidUpdate method` | | `cwun→` | `componentWillUnmount method` | +| `gsbu→` | `getSnapshotBeforeUpdate method` | +| `gdsfp→` | `static getDerivedStateFromProps method` | +| `cdc→` | `componentDidCatch method` | | `ren→` | `render method` | | `sst→` | `this.setState with object as parameter` | | `ssf→` | `this.setState with function as parameter` |