Show Menu
Cheatography

VSCode ES7 React/Redux snippets Cheat Sheet by

VSCode extension

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
cp→
const { } = this.props
cs→
const { } = this.state

Others

cmmb→
comment block
 

React

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, { PureCo­mponent } from 'react'
imrpcp→
import React, { PureCo­mponent } 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 { Browse­rRouter as Router, Route, Link } from 'react­-ro­ute­r-dom'
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 = () => { }
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→
this.p­rop­s.p­ropName
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

Console

clg→
consol­e.l­og(­object)
clo→
consol­e.l­og(­"­obj­ect­", object)
ctm→
consol­e.t­ime­("ti­meI­d")
cte→
consol­e.t­ime­End­("ti­meI­d")
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)
cwa→
consol­e.warn
cin→
consol­e.info

Component Templates

rfc
react functional component
rfce
react functional component with last line export
rfcp
react functional component with PropTypes and last line export
rcc
react class component
rce
react class component with last line export
rccp
react class component with PropTypes and ES7 module system
rcep
react class component with PropTypes and last line export
rcredux
redux connected class component with PropTypes
reduxmap
mapping to props constants
rpc
react pure component
rpcp
react pure component with PropTypes
rpce
react pure component with PropTypes and last line export
hoc
react higher order component with PropTypes
hocredux
redux connected higher order component with PropTypes
rafc
react arrow function component
       
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          VSCode ReactJS Code Snippets Cheat Sheet
          React & Material UI Project startup Cheat Sheet