Skip to content

Instantly share code, notes, and snippets.

@Nifled
Last active October 19, 2018 08:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nifled/beac99849ebd4a6599b8f89a2d6500d8 to your computer and use it in GitHub Desktop.
Save Nifled/beac99849ebd4a6599b8f89a2d6500d8 to your computer and use it in GitHub Desktop.
React ES6 custom snippets for vscode
{
"Import React": {
"prefix": "imr",
"body": ["import React from 'react'"],
"description": "Import React"
},
"Import PropTypes": {
"prefix": "impt",
"body": ["import PropTypes from 'prop-types'"],
"description": "Import PropTypes"
},
"Class Component": {
"prefix": "cc",
"body": [
"class $1 extends React.Component {",
"\tstate = {$2}",
"",
"\trender() { ",
"\t\treturn ($0)",
"\t}",
"}",
"",
"export default $1",
""
],
"description": "Class Component"
},
"Class Component With Constructor": {
"prefix": "ccc",
"body": [
"class $1 extends React.Component {",
"\tconstructor(props) {",
"\t\tsuper(props);",
"\t\tthis.state = { $2 }",
"\t}",
"",
"\trender() { ",
"\t\treturn ($0);",
"\t}",
"}",
"",
"export default $1",
""
],
"description": "Class Component With Constructor"
},
"Stateless Function Component": {
"prefix": "sfc",
"body": [
"const $1 = ($2) => (",
"\t$0",
")",
"",
"export default $1",
""
],
"description": "Stateless Function Component"
},
"componentDidMount": {
"prefix": "cdm",
"body": ["componentDidMount() {", "\t$0", "}"],
"description": "componentDidMount"
},
"componentDidUpdate": {
"prefix": "cdu",
"body": ["componentDidUpdate(prevProps, prevState) {", "\t$0", "}"],
"description": "componentDidUpdate"
},
"componentWillUnmount": {
"prefix": "cwun",
"body": ["componentWillUnmount() {", "\t$0", "}"],
"description": "componentWillUnmount"
},
"componentDidCatch": {
"prefix": "cdc",
"body": ["componentDidCatch(error, info) {", "\t$0", "}"],
"description": "componentDidCatch"
},
"setState": {
"prefix": "ss",
"body": ["this.setState({ $1: $2 })"],
"description": "setState"
},
"Functional setState": {
"prefix": "ssf",
"body": ["this.setState(prevState => {", "\treturn { $1: prevState.$1 }", "})"],
"description": "Functional setState"
},
"render": {
"prefix": "ren",
"body": ["render() {", "\treturn (", "\t\t $0", "\t)", "}"],
"description": "render"
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment