VSCode ES7 React/Redux snippets Cheat Sheet

by frankieali4 via cheatography.com/76915/cs/18893/

Basic Methods Others React (cont)

imp→ import moduleName from cmmb→ comment block cwup→ compon​ent​Wil​lUpdate =

'module' (nextP​rops, nextState) => { }
imn→ import 'module' React DEPREC​ATED!!!

imd→ import { destru​ctu​red​Module } imr→ import React from 'react' cdup→ compon​ent​Did​Update = (prevP​‐
from 'module' rops, prevState) => { }
imrd→ import ReactDOM from 'react​-
ime→ import * as alias from 'module' dom' cwun→ compon​ent​Wil​lUn​mount = () =>
{}
ima→ import { origin​alName as imrc→ import React, { Component }
aliasName} from 'module' from 'react' gdsfp→ static getDer​ive​dSt​ate​Fro​mPr​‐
ops​(ne​xtP​rops, prevState) { }
exp→ export default moduleName imrcp→ import React, { Component }
from 'react' & import PropTypes gsbu→ getSna​psh​otB​efo​reU​pdate =
exd→ export { destru​ctu​red​Module }
from 'prop-​types' (prevP​rops, prevState) => { }
from 'module'
imrpc→ import React, { PureCo​mponent ren→ render() { return( ) }
exa→ export { origin​alName as
} from 'react' sst→ this.s​etS​tate({ })
aliasName} from 'module'
imrpcp→ import React, { PureCo​mponent ssf→ this.s​etS​tat​e((​state, props) =>
enf→ export const functi​onName =
} from 'react' & import return { })
(params) => { }
PropTypes from 'prop-​types'
edf→ export default (params) => { } props→ this.p​rop​s.p​ropName
imrm→ import React, { memo } from
met→ methodName = (params) => { } state→ this.s​tat​e.s​tat​eName
'react'
fre→ arrayN​ame.fo​rEa​ch(​element => { rcontext→ const ${1:co​nte​xtName} =
imrmp→ import React, { memo } from
} React.c​re​ate​Con​text()
'react' & import PropTypes from
fof→ for(let itemName of objectName { cref→ this.$​{1:​ref​Nam​e}Ref =
'prop-​types'
} React.c​re​ate​Ref()
impt→ import PropTypes from 'prop-​‐
fin→ for(let itemName in objectName { fref→ const ref = React.c​re​ate​Ref()
types'
} bnd→ this.m​eth​odName = this.m​eth​‐
imrr→ import { Browse​rRouter as
anfn→ (params) => { } odN​ame.bi​nd(​this)
Router, Route, Link } from
nfn→ const functi​onName = (params) 'react​-ro​ute​r-dom'
Redux
=> { } redux→ import { connect } from 'react​-
rxaction→ redux action template
dob→ const {propName} = object​ToD​‐ redux'
escruct rxconst→ export const $1 = '$1'
rconst→ constr​uct​or(​props) with this.state
dar→ const [propName] = arrayT​oDe​‐ rxreducer→ redux reducer template
rconc→ constr​uct​or(​props, context) with
scruct this.state rxselect→ redux selector template
sti→ setInt​erv​al(() => { }, interv​alTime est→ this.state = { }
Console
sto→ setTim​eout(() => { }, delayTime cwm→ compon​ent​Wil​lMount = () => { }
prom→ return new Promis​e((​res​olve, DEPREC​ATED!!! clg→ consol​e.l​og(​object)
reject) => { } cdm→ compon​ent​Did​Mount = () => { } clo→ consol​e.l​og(​"​obj​ect​", object)
cmmb→ comment block cwr→ compon​ent​Wil​lRe​cei​veProps = ctm→ consol​e.t​ime​("ti​meI​d")
cp→ const { } = this.props (nextP​rops) => { } DEPREC​‐ cte→ consol​e.t​ime​End​("ti​meI​d")
cs→ const { } = this.state ATED!!! cas→ consol​e.a​sse​rt(​exp​res​sio​n,o​bject)
scu→ should​Com​pon​ent​Update = ccl→ consol​e.c​lear()
(nextP​rops, nextState) => { }
cco→ consol​e.c​oun​t(l​abel)
cdi→ consol​e.dir
cer→ consol​e.e​rro​r(o​bject)
By frankieali4 Published 19th February, 2019. Sponsored by ApolloPad.com
cheatography.com/frankieali4/ Last updated 19th February, 2019. Everyone has a novel in them. Finish
Page 1 of 2. Yours!
https://apollopad.com
 VSCode ES7 React/Redux snippets Cheat Sheet
by frankieali4 via cheatography.com/76915/cs/18893/

Console (cont)

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

By frankieali4 Published 19th February, 2019. Sponsored by ApolloPad.com

cheatography.com/frankieali4/ Last updated 19th February, 2019. Everyone has a novel in them. Finish
Page 2 of 2. Yours!
https://apollopad.com