React Snippets.json

{
	"React Class Component": {
		"prefix": "rcc",
		"description": "Boilerplate for React Class-based component",
		"body": [
			"import React, { Component} from 'react';",
			"",
			"class ${1:ClassName} extends Component {",
			"\tconstructor(props) {",
			"\t\tsuper(props);",
			"\t}",
			"",
			"\trender() {",
			"\t\treturn(",
			"\t\t\t<div className=\"${1:ClassName}\">",
			"\t\t\t\t$2",
			"\t\t\t</div>",
			"\t\t);",
			"\t}",
			"}",
			"",
			"export default ${1:ClassName};",
		]
	},
	"React Native Class Component": {
		"prefix": "rncc",
		"description": "Boilerplate for React Native Class-based component",
		"body": [
			"import React from 'react';",
			"import { StyleSheet, Text, View, ScrollView } from 'react-native';",
			"class ${1:ClassName} extends Component {",
			"\tconstructor(props) {",
			"\t\tsuper(props);",
			"\t}",
			"",
			"\trender() {",
			"\t\treturn(",
			"\t\t\t<View\">",
			"\t\t\t\t$2",
			"\t\t\t</View>",
			"\t\t);",
			"\t}",
			"}",
			"",
			"export default ${1:ClassName};",
		]
	},
	"React Functional Component": {
		"prefix": "rfc",
		"description": "Boilerplate for React Class-based component",
		"body": [
			"import React from 'react';",
			"",
			"const ${1:FuncName} = props => {",
			"\treturn(",
			"\t\t<div className=\"${1:FuncName}\">",
			"\t\t\t$2",
			"\t\t</div>",
			"\t);",
			"}",
			"",
			"export default ${1:FuncName};",
		]
	},
	"React Native Functional Component": {
		"prefix": "rnfc",
		"description": "Boilerplate for React Native Func-based component",
		"body": [
			"import React from 'react';",
			"import { StyleSheet, Text, View, ScrollView } from 'react-native';",
			"",
			"const ${1:FuncName} = props => {",
			"\treturn(",
			"\t\t<View\">",
			"\t\t\t$2",
			"\t\t</View>",
			"\t);",
			"}",
			"",
			"export default ${1:FuncName};",
		]
	},
	"React Div": {
		"prefix": "rdiv",
		"description": "React <div>",
		"body": [
			"<div className=\"${1:className}\">",
			"\t$2",
			"</div>"
		]
	},
	"React Styles from Module": {
		"prefix": "rsm",
		"description": "React styles from module",
		"body": [
			"className={styles.${1:className}}"
		]
	}
}