[React] vscode snippet - classmate, container

• Classnames shortcut,
• Redux container shortcut

아래 사이트를 활용하면 편하게 제작할 수 있다.

https://snippet-generator.app/

snippet generator

 

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Classnames shortcut": {
    "prefix": "cx",
    "body": [
			"<div className={cx('$1')}>",
			"</div>"
		],
    "description": "Create className with cx"
  },

	"Redux container shortcut": {
		"prefix": "rcont",
		"body": [
			"import React, { Component } from 'react';",
			"import MyComponent from 'components/MyComponent';",
			"import { bindActionCreators } from 'redux';",
			"import { connect } from 'react-redux'",
			"import * as mymoduleActions from 'store/modules/mymodule';",
			"",
			"",
			"class $TM_FILENAME_BASE extends Component {",
			"",
			"\trender() {",
			"\t\tconst { myprops1, myprops2 } = this.props;",
			"",
			"\t\treturn (",
			"\t\t\t<MyComponent",
			"\t\t\t\tmyprops1={myprops1}",
			"\t\t\t\tmyprops2={myprops2}",
			"\t\t\t/>",
			"\t\t);",
			"\t}",
			"}",
			"",
			"export default connect(",
			"\t(state) => ({",
			"\t\tmyprops1: state.mymodule.get('myprops1'),",
			"\t\tmyprops2: state.mymodule.get('myprops2')",
			"\t}),",
			"\t(dispatch) => ({",
			"\t\tMymoduleActions : bindActionCreators(mymoduleActions , dispatch)",
			"\t})",
			")($TM_FILENAME_BASE);"
		],
		"description": ""
	}
}