REACT COMMANDS SNIPPET

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→ arrayName.forEach(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 { } = this.props

cs→ const { } = this.state

Redux

Prefix Method

rxaction→redux action template

rxconst→export const $1 = '$1';

rxreducer→redux reducer template

rxselect→redux selector template

React

IMPORT Prefix Method

imr→ import React from 'react'

imrd→ import ReactDOM from 'react-dom'

imrn - import{$1} from ‘react-native’

imsn [Import Styled-Components Native] - import styled from 'styled-components/native';

imrn→ import { $1 } from 'react-native'

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 this.state

crr - import { connect } from 'react-redux';

rconc→ constructor(props, context) with this.state

est→ this.state = { }

cdc - componentDidCatch(error,info){$1}

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→ this.setState({ })

ssf→ this.setState((state, props) => return { })

props→ this.props.propName

state→ this.state.stateName

rcontext→const ${1:contextName} = React.createContext()

cref→ this.${1:refName}Ref = React.createRef()

fref→ const ref = React.createRef()

bnd→ this.methodName = this.methodName.bind(this)

rnstyle→ const styles = StyleSheet.create({})

PropTypes

Prefix Method

 pta→ PropTypes.array

 ptar→ PropTypes.array.isRequired

 ptb→ PropTypes.bool

 ptbr→ PropTypes.bool.isRequired

 ptf→ PropTypes.func

 ptfr→ PropTypes.func.isRequired

 ptn→ PropTypes.number
  ptnr→ PropTypes.number.isRequired

 pto→ PropTypes.object

 ptor→ PropTypes.object.isRequired

 pts→ PropTypes.string

 ptsr→ PropTypes.string.isRequired

 ptnd→ PropTypes.node

 ptndr→ PropTypes.node.isRequired

 ptel→ PropTypes.element

 ptelr→ PropTypes.element.isRequired

 pti→ PropTypes.instanceOf(name)

 ptir→ PropTypes.instanceOf(name).isRequired

 pte→ PropTypes.oneOf([name])

 pter→ PropTypes.oneOf([name]).isRequired

 ptet→ PropTypes.oneOfType([name])

 ptetr→ PropTypes.oneOfType([name]).isRequired

 ptao→ PropTypes.arrayOf(name)

 ptaor→ PropTypes.arrayOf(name).isRequired

 ptoo→ PropTypes.objectOf(name)

 ptoor→ PropTypes.objectOf(name).isRequired

 ptsh→ PropTypes.shape({ })

 ptshr→ PropTypes.shape({ }).isRequired

 ptany→ PropTypes.any

 ptypes→ static propTypes = {}

GraphQL

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

expgql

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

Console

Prefix Method

clg→ console.log(object)

clo→ console.log("object", object)

ctm→ console.time("timeId")

cte→ console.timeEnd("timeId")

cas→ console.assert(expression,object)
ccl→ console.clear()

cco→ console.count(label)

cdi→ console.dir

cer→ console.error(object)

cgr→ console.group(label)

cge→ console.groupEnd()

ctr→ console.trace(object)

cwa→ console.warn

cin→ console.info

React Components

sl [Stateless Component]

const $1 = () => (
$2
);

export default $1;

slr [Stateless Component Return]

const $1 = () => {

return (

$2

);

export default $1;

ccs [Component Class]

class $1 extends Component {

state = { $2 }
render() {
return (
$3
);
}
}

export default $1;

cccs [Component Class With Constructor]

class $1 extends Component {

constructor(props) {
super(props);
this.state = { $2 };
}
render() {
return (
$3
);
}
}

export default $1;

ccsf [Component Class FlowType]

type P = {
$1
};

type S = {
$2
};

class $3 extends Component<P, S> {

constructor(props) {
super(props);
this.state = { $4 };
}
render() {
return (
$5
);
}
}

export default $3;

pcs [PureComponent Class]

class $1 extends PureComponent {

state = { $2 }
render() {
return (
$3
);
}
}

export default $1;

pccs [PureComponent Class With Constructor]

class $1 extends PureComponent {

constructor(props) {
super(props);
this.state = { $2 };
}
render() {
return (
$3
);
}
}

export default $1;

pcsf [PureComponent Class FlowType]

type P = {
$1
};

type S = {
$2
};

class $3 extends PureComponent<P, S> {

constructor(props) {

super(props);
this.state = { $4 };
}
render() {
return (
$5
);
}
ccsr [Component Class With Redux]

class $1 extends Component {

state = { $2 }
render() {
return (
$3
);
}
}

export default connect($4, $5)($1);

edccs [Export default Component Class]

export default class $1 extends Component {

state = { $2 }

render() {

return (

$3

);

cct [Create Context]

const $1Context = createContext($2);

class $1Provider extends Component {

state = {
$3
}

render() {
return (
<$1Context.Provider value={{ state: { $3 }, actions: {} }}>
{this.props.children}
</$1Context.Provider>
);
}
}

export default $1Provider;

rrd [Redux Reducer]

export default (state = $1, action) => {

switch (action.type) {
case $2:
$3
default:
return state;
}
};

rpf [Redux pure function]

export const $1 = '$1';

export function $2($3) {

return {
type: $1,
$3
}
}

rpc [Redux pure function const]

export const $1 = '$1';

export const $2 = $3 => ({

type: $1,
$3
});

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>

$1.propTypes = {}

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>

$1.propTypes = {}

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>

})

$1.propTypes = {}

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 = {}

estyc [Export Styled Component]

export const $1 = styled.$2`

`edstyc [Export default Styled Component]

export default styled.$1`

$2

ffm [FlowFixMe]

// $FlowFixMe

React Native JavaScript

Prefix Method

imr→import React from 'react';

imrc→import React, { Component } from 'react';

imrn→import { $1 } from 'react-native';

imrpc→import React, { PureComponent } from 'react';

StyleSheet

Prefix Method

just→justifyContent: '',

align→alignItems: '${1}',

as→aspectRatio: '',

bor→borderWidth: ,

flex→flexDirection: '',

h→height: ,

w→width: ,

l→left: '',

mar→marginHorizontal: '',

max→maxWidth: ,

min→minWidth: ,

over→overflow: ,

padding→paddingHorizontal: ,

pos→position: ,

ri→right: ,

z→zIndex: ,

di→direction: ,

back→backgroundColor: ,

sha→shadowColor: ,

op→opacity: ,

e→elevation: ,
)

React Native Components

rnss [StyleSheet Style]

const styles = StyleSheet.create({

$1

});

ess [EStyleSheet]

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
$1
});
export default styles;

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 = StyleSheet.c

➢ rnc

import React, { Component } from 'react';

import { Text, View } from 'react-native';
export default class $1 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<Text> $2 </Text>
</View>
)
}
}

rnce

import React, { Component } from 'react';

import { Text, View } from 'react-native';
export class $1 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<Text> $2 </Text>

</View>

}
}

export default $1

rnpc

import React, { PureComponent } from 'react';

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

export default class $1 extends PureComponent {

constructor(props) {
super(props);
this.state = {
};
}

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

rnpce

import React, { PureComponent } from 'react';

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

class $1 extends PureComponent {

constructor(props) {
super(props);
this.state = {
};
}

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

export default $1

rncsl

import React from 'react';

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

const $1 = ({
params1,
}) => (
<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)

Typescript React Native

tsrnc

import * as React from 'react';

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

export interface $1Props {

}

export default class $1 extends React.Component<$1Props, any> {

constructor(props: $1Props) {
super(props);
}

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

tsrnc

import * as React from 'react';

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

export interface $1Props {

}

export interface $1State {

}

export default class $1 extends React.Component<$1Props, $1State> {

constructor(props: $1Props) {
super(props);
this.state = {
};
}

render() {
return (
<View>
<Text>$1</Text>
 </View>
);
}
}t

srnpc

import * as React from 'react';

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

export interface AppProps {

export default class App extends React.PureComponent<AppProps, any> {

constructor(props: AppProps) {

super(props);

public render() {

return (

<View>

<Text>

App

</Text>

</View>

);

desc

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

$2

})

test

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

$2

})

tt [Test]

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

$2

});

tdesc [Test Describe]

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

$2

});
tit [Test It]

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

$4

});

stest

import React from 'react'

import renderer from 'react-test-renderer'

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

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

const defaultProps = {}

const wrapper = renderer.create(<${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 = renderer.create(

<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 = renderer.create(<${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 = renderer.create(

<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} />

hocComponent.propTypes = {

return hocComponent

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

impt [Import PropTypes]

import PropTypes from 'prop-types';

rct [Redux Constant]

export const $1 = '$1';

crr [Connect Redux]

import { connect } from 'react-redux';

tsrncsl

import * as React from 'react';

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

export interface AppProps {

}

export function App (props: AppProps) {

return (
<View>
<Text>App</Text>
</View>
);
}

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

$2

})

stest

import { ${1: ComponentName }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'

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

const defaultProps = {

const setup = buildSetup(${1: ComponentName }, defaultProps)

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

import toJson from 'enzyme-to-json'

import { ${1:ComponentName} }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'

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

const defaultProps = {

const setup = buildSetup(${1: ComponentName }, defaultProps)

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

sntest

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

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

it('renders correctly', () => {

const tree = renderer.create(<${1:ComponentName} />).toJSON()

expect(tree).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} />

hocComponent.propTypes = {
}

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} />

hocComponent.propTypes = {
}

return hocComponent
}

REDUX TUTORIAL

import React from 'react';

ReactDOM from 'reactdom';

{ createStore } from 'redux';

{ Provider } from 'reactredux';

import tasks from './reducers';

import App from './App';

import './index.css';

const store = createStore(tasks);

ReactDOM.render(

<Provider store={store}>

<App />

</Provider>,

document.getElementById('root')

);

onTitleChange = (e) => {

this.setState({ title: e.target.value });