VS Code React Snippets

javascript.json

{
	"react import": {
		"prefix": "rim",
		"body": "import ${1} from '${2}'${0}",
		"description": "just a simple import"
	},
	"react class name": {
		"prefix": "cname",
		"body": "className={classes.${1}}",
		"description": "jsx className shortcut"
	},
	"The dumbest of the components": {
		"prefix": "dumb",
		"body": [
			"import React from 'react'",
			"",
			"const ${1:label} = ({$2}) =>",
			"\t<div>",
			"\t\t$0",
			"\t</div>",
			"",
			"export default ${1:label}"
		],
		"description": "simple react component"
	},
	"Dumb comp with prop types": {
		"prefix": "dumb2",
		"body": [
			"import React from 'react'",
			"import PropTypes from 'prop-types'",
			"",
			"const ${1:label} = ({$2}) =>",
			"\t<div>",
			"\t\t$0",
			"\t</div>",
			"",
			"${1:label}.propTypes = {",
			"\t$2 = PropTypes.isRequired",
			"}",
			"",
			"export default ${1:label}"
		],
		"description": "simple react component with prop types"
	},
	"Dumb comp with JSS and proptypes": {
		"prefix": "dumbAndJSS",
		"body": [
			"import React from 'react'",
			"import PropTypes from 'prop-types'",
			"import injectSheet from 'react-jss'"
			"",
			"const styles = {",
			"\t",
			"}",
			"",
			"const enhancer = injectSheet(styles)",
			"",
			"const ${1:label} = ({classes, $2}) =>",
			"\t<div>",
			"\t\t$0",
			"\t</div>",
			"",
			"${1:label}.propTypes = {",
			"\tclasses: PropTypes.object.isRequired",
			"}",
			"",
			"export default enhancer(${1:label})"
		],
		"description": "simple react component with prop types"
	},
	"Basic Smart Component": {
		"prefix": "smart1",
		"body": [
			"import React, {Component} from 'react'",
			"",
			"class ${1:label} extends Component {",
			"\trender () {",
			"\t\treturn (",
			"\t\t\t<div>",
			"\t\t\t\t${0}",
			"\t\t\t</div>"
			"\t\t)",
			"\t}",
			"}",
			"",
			"export default ${1:label}",
			""
		],
		"description": "Smart Comp without prop validation"
	},
	"react import": {
		"prefix": "rimr",
		"body": "import React from 'react'",
		"description": "basic react import"
	},
	"one line arrow funciton": {
		"prefix": "arrow",
		"body": "$1 = ($2) => $3",
		"description": "description"
	},
	"basic arrow funciton": {
		"prefix": "arrow1",
		"body": [
			"$1 = ($2) => {",
			"\t$3",
			"}"
		],
		"description": "description"
	},
	"ES6 Promise": {
		"prefix": "prom",
		"body": [
			"return new Promise((resolve, reject) => {",
			"\t$1",
			"})",
		],
		"description": "description"
	},
	"snippetName": {
		"prefix": "setState",
		"body": [
			"this.setState({",
			"\t$1: $2",
			"})"
		],
		"description": "description"
	},

	"basic prop types": {
		"prefix": "propTypes",
		"body": [
			"$1.propTypes = {",
			"\t$2",
			"}"
		],
		"description": "description"
	}
}