React cheatsheat (vscode)

Plugin : React-Native/React/Redux snippets for es6/es7

Prefix	Method
imp→	import moduleName from 'module'
imn→	import 'module'
imd→	import { destructuredModule } from 'module'
ime→	import * as alias from 'module'
ima→	import { originalName as aliasName} from 'module'
exp→	export default moduleName
exd→	export { destructuredModule } from 'module'
exa→	export { originalName as aliasName} from 'module'
enf→	export const functionName = (params) => { }
edf→	export default (params) => { }
met→	methodName = (params) => { }
fre→	arrayName.forEach(element => { }
fof→	for(let itemName of objectName { }
fin→	for(let itemName in objectName { }
anfn→	(params) => { }
nfn→	const functionName = (params) => { }
dob→	const {propName} = objectToDescruct
dar→	const [propName] = arrayToDescruct
sti→	setInterval(() => { }, intervalTime
sto→	setTimeout(() => { }, delayTime
prom→	return new Promise((resolve, reject) => { }
cmmb→	comment block
cp→	const { } = this.props
cs→	const { } = this.state

React

Prefix	Method
imr→	import React from 'react'
imrd→	import ReactDOM from 'react-dom'
imrc→	import React, { Component } from 'react'
imrcp→	import React, { Component } from 'react' & import PropTypes from 'prop-types'
imrpc→	import React, { PureComponent } from 'react'
imrpcp→	import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'
imrm→	import React, { memo } from 'react'
imrmp→	import React, { memo } from 'react' & import PropTypes from 'prop-types'
impt→	import PropTypes from 'prop-types'
imrr→	import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
redux→	import { connect } from 'react-redux'
rconst→	constructor(props) with this.state
rconc→	constructor(props, context) with this.state
est→	this.state = { }
cwm→	componentWillMount = () => { } DEPRECATED!!!
cdm→	componentDidMount = () => { }
cwr→	componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!
scu→	shouldComponentUpdate = (nextProps, nextState) => { }
cwup→	componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!
cdup→	componentDidUpdate = (prevProps, prevState) => { }
cwun→	componentWillUnmount = () => { }
gdsfp→	static getDerivedStateFromProps(nextProps, prevState) { }
gsbu→	getSnapshotBeforeUpdate = (prevProps, prevState) => { }
ren→	render() { return( ) }
sst→	this.setState({ })
ssf→	this.setState((state, props) => return { })
props→	this.props.propName
state→	this.state.stateName
rcontext→	const ${1:contextName} = React.createContext()
cref→	this.${1:refName}Ref = React.createRef()
fref→	const ref = React.createRef()
bnd→	this.methodName = this.methodName.bind(this)

React Native

Prefix	Method
imrn→	import { $1 } from 'react-native'
rnstyle→	const styles = StyleSheet.create({})

Redux

Prefix	Method
rxaction→	redux action template
rxconst→	export const $1 = '$1'
rxreducer→	redux reducer template
rxselect→	redux selector template

PropTypes

Prefix	Method
pta→	PropTypes.array
ptar→	PropTypes.array.isRequired
ptb→	PropTypes.bool
ptbr→	PropTypes.bool.isRequired
ptf→	PropTypes.func
ptfr→	PropTypes.func.isRequired
ptn→	PropTypes.number
ptnr→	PropTypes.number.isRequired
pto→	PropTypes.object
ptor→	PropTypes.object.isRequired
pts→	PropTypes.string
ptsr→	PropTypes.string.isRequired
ptnd→	PropTypes.node
ptndr→	PropTypes.node.isRequired
ptel→	PropTypes.element
ptelr→	PropTypes.element.isRequired
pti→	PropTypes.instanceOf(name)
ptir→	PropTypes.instanceOf(name).isRequired
pte→	PropTypes.oneOf([name])
pter→	PropTypes.oneOf([name]).isRequired
ptet→	PropTypes.oneOfType([name])
ptetr→	PropTypes.oneOfType([name]).isRequired
ptao→	PropTypes.arrayOf(name)
ptaor→	PropTypes.arrayOf(name).isRequired
ptoo→	PropTypes.objectOf(name)
ptoor→	PropTypes.objectOf(name).isRequired
ptsh→	PropTypes.shape({ })
ptshr→	PropTypes.shape({ }).isRequired
ptany→	PropTypes.any
ptypes→	static propTypes = {}

GraphQL

|graphql→|import { compose, graphql } from 'react-apollo'|

expgql

export default compose(graphql($1, { name: $2 }))($3)

Console

Prefix	Method
clg→	console.log(object)
clo→	console.log("object", object)
ctm→	console.time("timeId")
cte→	console.timeEnd("timeId")
cas→	console.assert(expression,object)
ccl→	console.clear()
cco→	console.count(label)
cdi→	console.dir
cer→	console.error(object)
cgr→	console.group(label)
cge→	console.groupEnd()
ctr→	console.trace(object)
cwa→	console.warn
cin→	console.info

Plugin : React Native Snippet

React Native JavaScript

Prefix	Method
imr→	import React from 'react';
imrc→	import React, { Component } from 'react';
imrn→	import { $1 } from 'react-native';
imrpc→	import React, { PureComponent } from 'react';

StyleSheet

Prefix	Method
just→	justifyContent: '';
align→	alignItems: '${1}';
as→	aspectRatio: '';
bor→	borderWidth: ;
flex→	flexDirection: '';
h→	height: ;
w→	width: ;
l→	left: '';
mar→	marginHorizontal: '';
max→	maxWidth: ;
min→	minWidth: ;
over→	overflow: ;
padding→	paddingHorizontal: ;
pos→	position: ;
ri→	right: ;
z→	zIndex: ;
di→	direction: ;
back→	backgroundColor: ;
sha→	shadowColor: ;
op→	opacity: ;
e→	elevation: ;

React

Prefix	Method
imr→	import React from 'react';
imrc→	import React, { Component } from 'react';
imrcp→	import React, { Component } from 'react' & import PropTypes from 'prop-types';
imrpc→	import React, { PureComponent } from 'react';
imrpcp→	import React, { PureComponent } from 'react' & import PropTypes from 'prop-types';
redux→	import { connect } from 'react-redux';
rconst→	constructor(props) with this.state
rconc→	constructor(props, context) with this.state
est→	this.state = { };
cwm→	componentWillMount = () => { };
cdm→	componentDidMount = () => { };
cwr→	componentWillReceiveProps = (nextProps) => { };
scu→	shouldComponentUpdate = (nextProps, nextState) => { };
cwup→	componentWillUpdate = (nextProps, nextState) => { };
cdup→	componentDidUpdate = (prevProps, prevState) => { };
cwun→	componentWillUnmount = () => { };
ren→	render() { return( ) };
sst→	this.setState({ })
ssf→	this.setState((state, props) => return { })
props→	this.props.propName
state→	this.state.stateName

Redux

Prefix	Method
rxaction→	redux action template
rxconst→	export const $1 = '$1';
rxreducer→	redux reducer template
rxselect→	redux selector template

PropTypes

Prefix	Method
ipt→	import PropTypes from 'prop-types';
pt→	Component.PropTypes = {};
dfp→	Component.defaultProps = {};
pta→	PropTypes.array
ptar→	PropTypes.array.isRequired
ptb→	PropTypes.bool
ptbr→	PropTypes.bool.isRequired
ptf→	PropTypes.func
ptfr→	PropTypes.func.isRequired
ptn→	PropTypes.number
ptnr→	PropTypes.number.isRequired
pto→	PropTypes.object
ptor→	PropTypes.object.isRequired
pts→	PropTypes.string
ptsr→	PropTypes.string.isRequired
ptnd→	PropTypes.node
ptndr→	PropTypes.node.isRequired
ptel→	PropTypes.element
ptelr→	PropTypes.element.isRequired
pti→	PropTypes.instanceOf(name)
ptir→	PropTypes.instanceOf(name).isRequired
pte→	PropTypes.oneOf([name])
pter→	PropTypes.oneOf([name]).isRequired
ptet→	PropTypes.oneOfType([name])
ptetr→	PropTypes.oneOfType([name]).isRequired
ptao→	PropTypes.arrayOf(name)
ptaor→	PropTypes.arrayOf(name).isRequired
ptoo→	PropTypes.objectOf(name)
ptoor→	PropTypes.objectOf(name).isRequired
ptsh→	PropTypes.shape({ })
ptshr→	PropTypes.shape({ }).isRequired

GraphQL

|graphql→|import { compose, graphql } from 'react-apollo';|