Scribd
Upload
121 views12 pages

React Snippets and Methods Overview

The document provides prefixes for various basic methods and React components. Some of the prefixes include imp for import, imr for import React, rcc for creating a class component, rpc for creating a pure component, rfcp for creating a function component with prop types, rcredux for connecting a component to Redux, and rnc for React Native components.

Uploaded by

Célio Cumba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
121 views12 pages

React Snippets and Methods Overview

The document provides prefixes for various basic methods and React components. Some of the prefixes include imp for import, imr for import React, rcc for creating a class component, rpc for creating a pure component, rfcp for creating a function component with prop types, rcredux for connecting a component to Redux, and rnc for React Native components.

Uploaded by

Célio Cumba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
  • React
  • Basic Methods
  • PropTypes and GraphQL
  • React Hooks and Frameworks
  • Console
  • React Components
  • React Native Components
  • Others

Basic Methods

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→ [Link](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 { } = [Link]
cs→ const { } = [Link]

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 [Link]
rconc→ constructor(props, context) with [Link]
est→ [Link] = { }
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→ [Link]({ })
ssf→ [Link]((state, props) => return { })
props→ [Link]
state→ [Link]
rcontext→ const ${1:contextName} = [Link]()
cref→ this.${1:refName}Ref = [Link]()
fref→ const ref = [Link]()
bnd→ [Link] = [Link](this)
React Hooks
All hooks from official docs ([Link] are added with hook name prefix.

React Native
Prefix Method
imrn→ import { $1 } from 'react-native'
rnstyle→ const styles = [Link]({})

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

PropTypes
Prefix Method
pta→ [Link]
ptar→ [Link]
ptb→ [Link]
ptbr→ [Link]
ptf→ [Link]
ptfr→ [Link]
ptn→ [Link]
ptnr→ [Link]
pto→ [Link]
ptor→ [Link]
pts→ [Link]
ptsr→ [Link]
ptnd→ [Link]
ptndr→ [Link]
ptel→ [Link]
ptelr→ [Link]
pti→ [Link](name)
ptir→ [Link](name).isRequired
pte→ [Link]([name])
pter→ [Link]([name]).isRequired
ptet→ [Link]([name])
ptetr→ [Link]([name]).isRequired
ptao→ [Link](name)
ptaor→ [Link](name).isRequired
ptoo→ [Link](name)
ptoor→ [Link](name).isRequired
ptsh→ [Link]({ })
ptshr→ [Link]({ }).isRequired
ptany→ [Link]
ptypes→ static propTypes = {}

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

expgql

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


Console
Prefix Method
clg→ [Link](object)
clo→ [Link]("object", object)
ctm→ [Link]("timeId")
cte→ [Link]("timeId")
cas→ [Link](expression,object)
ccl→ [Link]()
cco→ [Link](label)
cdi→ [Link]
cer→ [Link](object)
cgr→ [Link](label)
cge→ [Link]()
ctr→ [Link](object)
cwa→ [Link]
cin→ [Link]

React Components
rcc

import React, { Component } from 'react'

export default class FileName extends Component {


render() {
return <div>$2</div>
}
}

rce

import React, { Component } from 'react'

export class FileName extends Component {


render() {
return <div>$2</div>
}
}

export default $1

rcep

import React, { Component } from 'react'


import PropTypes from 'prop-types'

export class FileName extends Component {


static propTypes = {}

render() {
return <div>$2</div>
}
}

export default $1
rpc

import React, { PureComponent } from 'react'

export default class FileName extends PureComponent {


render() {
return <div>$2</div>
}
}

rpcp

import React, { PureComponent } from 'react'


import PropTypes from 'prop-types'

export default class FileName extends PureComponent {


static propTypes = {}

render() {
return <div>$2</div>
}
}

rpce

import React, { PureComponent } from 'react'


import PropTypes from 'prop-types'

export class FileName extends PureComponent {


static propTypes = {}

render() {
return <div>$2</div>
}
}

export default FileName

rccp

import React, { Component } from 'react'


import PropTypes from 'prop-types'

export default class FileName extends Component {


static propTypes = {
$2: $3
}

render() {
return <div>$4</div>
}
}

rfcp
import React from 'react'
import PropTypes from 'prop-types'

function $1(props) {
return <div>$0</div>
}

$[Link] = {}

export default $1

rfc

import React from 'react'

export default function $1() {


return <div>$0</div>
}

rfce

import React from 'react'

function $1() {
return <div>$0</div>
}

export default $1

rafcp

import React from 'react'


import PropTypes from 'prop-types'

const $1 = props => {


return <div>$0</div>
}

$[Link] = {}

export default $1

rafc

import React from 'react'

const $1 = () => {
return <div>$0</div>
}

export default $1

rafce
import React from 'react'

const $1 = () => {
return <div>$0</div>
}

export default $1

rmc

import React, { memo } from 'react'

export default memo(function $1() {


return <div>$0</div>
})

rmcp

import React, { memo } from 'react'


import PropTypes from 'prop-types'

const $1 = memo(function $1(props) {


return <div>$0</div>
})

$[Link] = {}

export default $1

rcredux

import React, { Component } from 'react'


import { connect } from 'react-redux'

export class FileName extends Component {


render() {
return <div>$4</div>
}
}

const mapStateToProps = state => ({})

const mapDispatchToProps = {}

export default connect(


mapStateToProps,
mapDispatchToProps,
)(FileName)

rcreduxp
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export class FileName extends Component {


static propTypes = {
$2: $3
}

render() {
return <div>$4</div>
}
}

const mapStateToProps = state => ({})

const mapDispatchToProps = {}

export default connect(


mapStateToProps,
mapDispatchToProps
)(FileName)

reduxmap

const mapStateToProps = state => ({})

const mapDispatchToProps = {}

React Native Components


rnc

import React, { Component } from 'react'


import { Text, View } from 'react-native'

export default class FileName extends Component {


render() {
return (
<View>
<Text> $2 </Text>
</View>
)
}
}

rnf
import React from 'react'
import { View, Text } from 'react-native'

const $1 = () => {
return (
<View>
<Text> $2 </Text>
</View>
)
}

export default $1

rncs

import React, { Component } from 'react'


import { Text, StyleSheet, View } from 'react-native'

export default class FileName extends Component {


render() {
return (
<View>
<Text> $2 </Text>
</View>
)
}
}

const styles = [Link]({})

rnce

import React, { Component } from 'react'


import { Text, View } from 'react-native'

export class FileName extends Component {


render() {
return (
<View>
<Text> $2 </Text>
</View>
)
}
}

export default $1

rncredux
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export class FileName extends Component {


static propTypes = {
$2: $3
}

render() {
return (
<View>
<Text> $2 </Text>
</View>
)
}
}

const mapStateToProps = state => ({})

const mapDispatchToProps = {}

export default connect(


mapStateToProps,
mapDispatchToProps
)(FileName)

Others
cmmb

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

desc

describe('$1', () => {
$2
})

test

test('should $1', () => {


$2
})

tit
it('should $1', () => {
$2
})

stest

import React from 'react'


import renderer from 'react-test-renderer'

import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {


const defaultProps = {}
const wrapper = [Link](<${1:ComponentName} {...defaultProps} />)

test('render', () => {
expect(wrapper).toMatchSnapshot()
})
})

srtest

import React from 'react'


import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store'


import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {


const defaultProps = {}
const wrapper = [Link](
<Provider store={store}>
<${1:${TM_FILENAME_BASE}} {...defaultProps} />)
</Provider>,
)

test('render', () => {
expect(wrapper).toMatchSnapshot()
})
})

sntest
import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {


const defaultProps = {

const wrapper = [Link](<${1:ComponentName} {...defaultProps} />)

test('render', () => {
expect(wrapper).toMatchSnapshot()
})
})

snrtest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store/configureStore'


import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {


const defaultProps = {}
const wrapper = [Link](
<Provider store={store}>
<${1:ComponentName} {...defaultProps} />
</Provider>,
)

test('render', () => {
expect(wrapper).toMatchSnapshot()
})
})

hocredux
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = state => ({

})

export const mapDispatchToProps = {

export const ${1:hocComponentName} = (WrappedComponent) => {


const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

[Link] = {
}

return hocComponent
}

export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

hoc

import React from 'react'


import PropTypes from 'prop-types'

export default WrappedComponent => {


const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

[Link] = {}

return hocComponent
}

Basic Methods Prefix Method imp→import moduleName from 'module' imn→import 'module' imd→import { destructuredModule } from 'm
React Hooks All hooks from official docs (https://reactjs.org/docs/hooks-reference.html) (https://reactjs.org/docs/hooks-ref
Console Prefix Method clg→console.log(object) clo→console.log("object", object) ctm→console.time("timeId") cte→console.timeEn
rpc import React, { PureComponent } from 'react' export default class FileName extends PureComponent { render() { re
import React from 'react' import PropTypes from 'prop-types' function $1(props) { return <div>$0</div> } $1.propTypes
import React from 'react' const $1 = () => { return <div>$0</div> } export default $1 rmc import React, { memo } from
import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' export c
import React from 'react' import { View, Text } from 'react-native' const $1 = () => { return ( <View> <Text>
import React, { Component } from 'react' import { View, Text } from 'react-native' import PropTypes from 'prop-types' impo
it('should $1', () => { $2 }) stest import React from 'react' import renderer from 'react-test-renderer' import { ${1:

You might also like