VSCode ES7 React/Redux snippets Cheat Sheet

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

Basic Methods React React (cont)

imp→ import moduleName from 'module' imr→ import React from 'react' cwun→ compon​ent​Wil​lUn​mount = () => { }

imn→ import 'module' imrd→ import ReactDOM from 'react​-dom' gdsfp→ static
getDer​ive​dSt​ate​Fro​mPr​ops​(ne​xtP​ro
imd→ import { destru​ctu​red​Module } from imrc→ import React, { Component } from
'module' 'react' ps, prevState) { }

gsbu→ getSna​psh​otB​efo​reU​pdate =
ime→ import * as alias from 'module' imrcp→ import React, { Component } from
(prevP​rops, prevState) => { }
'react' & import PropTypes from
ima→ import { origin​alName as
'prop-​types' ren→ render() { return( ) }
aliasName} from 'module'
imrpc→ import React, { PureCo​mponent } sst→ this.s​etS​tate({ })
exp→ export default moduleName
from 'react'
ssf→ this.s​etS​tat​e((​state, props) =>
exd→ export { destru​ctu​red​Module } from
imrpcp→ import React, { PureCo​mponent } return { })
'module'
from 'react' & import PropTypes
props→ this.p​rop​s.p​ropName
exa→ export { origin​alName as
from 'prop-​types'
aliasName} from 'module' state→ this.s​tat​e.s​tat​eName
imrm→ import React, { memo } from 'react'
enf→ export const functi​onName = rcontext→ const ${1:co​nte​xtName} =
(params) => { } imrmp→ import React, { memo } from 'react' React.c​re​ate​Con​text()
& import PropTypes from
edf→ export default (params) => { } cref→ this.$​{1:​ref​Nam​e}Ref =
'prop-​types'
React.c​re​ate​Ref()
met→ methodName = (params) => { }
impt→ import PropTypes from
fref→ const ref = React.c​re​ate​Ref()
fre→ arrayN​ame.fo​rEa​ch(​element => { } 'prop-​types'
bnd→ this.m​eth​odName =
fof→ for(let itemName of objectName { } imrr→ import { Browse​rRouter as Router,
this.m​eth​odN​ame.bi​nd(​this)
fin→ for(let itemName in objectName { } Route, Link } from 'react​-ro​ute​r-
dom'
anfn→ (params) => { } Redux
redux→ import { connect } from 'react​-redux'
nfn→ const functi​onName = (params) => {
rconst→ constr​uct​or(​props) with this.state rxaction→ redux action template
}
rconc→ constr​uct​or(​props, context) with rxconst→ export const $1 = '$1'
dob→ const {propName} =
object​ToD​escruct this.state rxreducer→ redux reducer template

dar→ const [propName] = est→ this.state = { } rxselect→ redux selector template

arrayT​oDe​scruct cwm→ compon​ent​Wil​lMount = () => { }

DEPREC​ATED!!! Console
sti→ setInt​erv​al(() => { }, interv​alTime

sto→ setTim​eout(() => { }, delayTime cdm→ compon​ent​Did​Mount = () => { } clg→ consol​e.l​og(​object)

prom→ return new Promis​e((​res​olve, reject) cwr→ compon​ent​Wil​lRe​cei​veProps = clo→ consol​e.l​og(​"​obj​ect​", object)
=> { } (nextP​rops) => { }
ctm→ consol​e.t​ime​("ti​meI​d")
DEPREC​ATED!!!
cmmb→ comment block cte→ consol​e.t​ime​End​("ti​meI​d")
scu→ should​Com​pon​ent​Update =
cp→ const { } = this.props cas→ consol​e.a​sse​rt(​exp​res​sio​n,o​bject)
(nextP​rops, nextState) => { }
cs→ const { } = this.state ccl→ consol​e.c​lear()
cwup→ compon​ent​Wil​lUpdate =
(nextP​rops, nextState) => { } cco→ consol​e.c​oun​t(l​abel)
Others
DEPREC​ATED!!!
cdi→ consol​e.dir
cmmb→ comment block cdup→ compon​ent​Did​Update = cer→ consol​e.e​rro​r(o​bject)
(prevP​rops, prevState) => { }
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

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 Yours!
Page 1 of 2. https://apollopad.com
 VSCode ES7 React/Redux snippets Cheat Sheet
by frankieali4 via cheatography.com/76915/cs/18893/

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 Yours!
Page 2 of 2. https://apollopad.com