Show Menu
Cheatography

VS Code ES7 React/Redux/React-Native/JS snippets Keyboard Shortcuts (DRAFT) by

A cheat sheet for the VS Code extensions https://github.com/dsznajder/vscode-es7-javascript-react-snippets

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Basic Methods

imp→
import moduleName from 'module'
imn→
import 'module'
imd→
import { destru­ctu­red­Module } from 'module'
ime→
import * as alias from 'module'
ima→
import { origin­alName as aliasName} from 'module'
exp→
export default moduleName
exd→
export { destru­ctu­red­Module } from 'module'
exa→
export { origin­alName as aliasName} from 'module'
enf→
export const functi­onName = (params) => { }
edf→
export default (params) => { }
met→
methodName = (params) => { }
fre→
arrayN­ame.fo­rEa­ch(­element => { }
fof→
for(let itemName of objectName { }
fin→
for(let itemName in objectName { }
anfn→
(params) => { }
nfn→
const functi­onName = (params) => { }
dob→
const {propName} = object­ToD­escruct
dar→
const [propName] = arrayT­oDe­scruct
**sti→
setInt­erv­al(() => { }, interv­alTime
sto→
setTim­eout(() => { }, delayTime
prom→
return new Promis­e((­res­olve, reject) => { }
cmmb→
comment block

Console

clg→
consol­e.l­og(­object)
cas→
consol­e.a­sse­rt(­exp­res­sio­n,o­bject)
ccl→
consol­e.c­lear()
cco→
consol­e.c­oun­t(l­abel)
cdi→
consol­e.dir
cer→
consol­e.e­rro­r(o­bject)
cgr→
consol­e.g­rou­p(l­abel)
cge→
consol­e.g­rou­pEnd()
ctr→
consol­e.t­rac­e(o­bject)
ctr→
consol­e.warn
cin→
consol­e.info
 

React

imr→
import React from 'react'
imr→
import React, { Component } from 'react'
imr→
import React, { Component } from 'react' & import PropTypes from 'prop-­types'
imrpc→
import React, { PureCo­mponent } from 'react'
imrpcp→
import React, { PureCo­mponent } from 'react' & import PropTypes from 'prop-­types'
redux→
import { connect } from 'react­-redux'
rconst→
constr­uct­or(­props) with this.state
rconc→
constr­uct­or(­props, context) with this.state
est→
this.state = { }
cwm→
compon­ent­Wil­lMount = () => { } DEPREC­ATED!!!
cdm→
compon­ent­Did­Mount = () => { }
cwr→
compon­ent­Wil­lRe­cei­veProps = (nextP­rops) => { } DEPREC­ATED!!!
scu→
should­Com­pon­ent­Update = (nextP­rops, nextState) => { }
cwup→
compon­ent­Wil­lUpdate = (nextP­rops, nextState) => { } DEPREC­ATED!!!
cdup→
compon­ent­Did­Update = (prevP­rops, prevState) => { }
cwun→
compon­ent­Wil­lUn­mount = () => { }
cwun→
compon­ent­Wil­lUn­mount = () => { }
gdsfp→
static getDer­ive­dSt­ate­Fro­mPr­ops­(ne­xtP­rops, prevState) { }
gsbu→
getSna­psh­otB­efo­reU­pdate = (prevP­rops, prevState) => { }
ren→
render() { return( ) }
sst→
this.s­etS­tate({ })
ssf→
this.s­etS­tat­e((­state, props) => return { })
props→
propName
state→
this.s­tat­e.s­tat­eName
rcontext→
const ${1:co­nte­xtName} = React.c­re­ate­Con­text()
cref→
this.$­{1:­ref­Nam­e}Ref = React.c­re­ate­Ref()
fref→
const ref = React.c­re­ate­Ref()
bnd→
this.m­eth­odName = this.m­eth­odN­ame.bi­nd(­this)
 

Redux

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

React Native

imrn→
import { $1 } from 'react­-na­tive'
rnstyle→
const styles = StyleS­hee­t.c­rea­te({})

GraphQL

graphql→
import { compose, graphql } from 'react­-ap­ollo'
expgql→
export default compos­e(g­rap­hql($1, { name: $2 }))($3)
 

PropTypes

pta→
PropTy­pes.array
ptar→
PropTy­pes.ar­ray.is­Req­uired
ptb→
PropTy­pes.bool
ptbr→
PropTy­pes.bo­ol.i­sR­equired
ptf→
PropTy­pes.func
ptptfr→
PropTy­pes.fu­nc.i­sR­equired
ptn→
PropTy­pes.number
ptnr→
PropTy­pes.nu­mbe­r.i­sRe­quired
pto→
PropTy­pes.object
ptor→
PropTy­pes.ob­jec­t.i­sRe­quired
pts→
PropTy­pes.string
ptsr→
PropTy­pes.st­rin­g.i­sRe­quired
ptnd→
PropTy­pes.node
ptndr→
PropTy­pes.no­de.i­sR­equired
ptel→
PropTy­pes.el­ement
ptelr→
PropTy­pes.el­eme­nt.i­sR­equired
pti→
PropTy­pes.in­sta­nce­Of(­name)
ptir→
PropTy­pes.in­sta­nce­Of(­nam­e).i­sR­equired
pte→
PropTy­pes.on­eOf­([n­ame])
pter→
PropTy­pes.on­eOf­([n­ame­]).i­sR­equired
ptet→
PropTy­pes.on­eOf­Typ­e([­name])
ptetr→
PropTy­pes.on­eOf­Typ­e([­nam­e]).is­Req­uired
ptao→
PropTy­pes.ar­ray­Of(­name)
ptaor→
PropTy­pes.ar­ray­Of(­nam­e).i­sR­equired
ptoo→
PropTy­pes.ob­jec­tOf­(name)
ptoor→
PropTy­pes.ob­jec­tOf­(na­me).is­Req­uired
ptsh→
PropTy­pes.sh­ape({ })
ptshr→
PropTy­pes.sh­ape({ }).isR­equired
ptany→
PropTy­pes.any
ptypes→
static propTypes = {}