ES7 React/Redux/GraphQL/React-Native snippets installs statistics

VS Code ES7 React/Redux/React-Native/JS snippets

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code

Here is direct link to marketplace ES7 React/Redux/React-Native/JS Snippets

Supported languages (file extensions)

• JavaScript (.js) • JavaScript React (.jsx) • TypeScript (.ts) • TypeScript React (.tsx)

Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

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→ | 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 |

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' | | redux→ | import { connect } from 'react-redux' | | rconst→ | constructor(props) with this.state | | rconc→ | constructor(props, context) with this.state | | est→ | this.state = { } | | 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) |

React Native

| Prefix | Method |

| imrn→ | import { $1 } from 'react-native' | | rnstyle→ | const styles = StyleSheet.create({}) |

Redux

| Prefix | Method |

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

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

Console

| Prefix | Method |

| clg→ | console.log(object) | | 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

rcc

rce

rcep

rpc

rpcp

rpce

rccp

rfcp

rfc

rfce

rafcp

rafc

rafce

rmc

rmcp

rcredux

reduxmap

React Native Components

rnc

rncs

rnce

rncredux

Others

cmmb

desc

test

tit

stest

srtest

sntest

snrtest

hocredux

hoc

Description from the VS Code Marketplace listing.