React/Redux/react-router Snippets

Useful React Ecosystem snippets for Visual Studio Code, including:

Quick import
React
Redux
react-redux
react-router

Screenshot

Usage

import

Trigger	Content
`imr`	`import React from 'react'`
`imrc`	`import React, { Component } from 'react'`
`imd`	`import { render } from 'react-dom'`
`impt`	`import PropTypes from 'prop-types'`
`imc`	`import ${1:componentName} from './Components/${1:componentName}'`
`imconnect`	`import { connect } from 'react-redux'`
`improvider`	`import { Provider } from 'react-redux'`
`imcreateSelector`	`import { createSelector } from 'reselect'`
`imrr`	`import { BrowserRouter, Route } from 'react-router-dom'`
`imnl`	`import { NavLink } from 'react-router-dom'`
`imwr`	`import { withRouter } from 'react-router-dom'`

React

Trigger	Content
`rcc`	class component skeleton
`rccp`	class component skeleton with prop types after the class
`rcjc`	class component skeleton without import and default export lines
`rcfc`	class component skeleton that contains all the lifecycle methods
`rsc`	stateless component skeleton
`rscp`	stateless component with prop types skeleton
`rpt`	empty propTypes declaration
`spt`	`static propTypes = {}`
`sdp`	`static defaultProps = {}`
`con`	class default constructor with props
`conc`	class default constructor with props and context
`est`	empty state object
`st`	Creates empty state object with ES7 synTax
`cwm`	`componentWillMount` method
`cdm`	`componentDidMount` method
`cwr`	`componentWillReceiveProps` method
`scu`	`shouldComponentUpdate` method
`cwup`	`componentWillUpdate` method
`cdup`	`componentDidUpdate` method
`cwun`	`componentWillUnmount` method
`cdc`	`componentDidCatch` method
`ren`	`render` method
`sst`	`this.setState` with object as parameter
`ssf`	`this.setState` with function as parameter
`props`	`this.props`
`state`	`this.state`
`bnd`	`binds the this of method inside the constructor`
`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(ClassName),`
`ptir`	`PropTypes.instanceOf(ClassName).isRequired,`
`pte`	`PropTypes.oneOf(['News', 'Photos']),`
`pter`	`PropTypes.oneOf(['News', 'Photos']).isRequired,`
`ptet`	`PropTypes.oneOfType([PropTypes.string, PropTypes.number]),`
`ptetr`	`PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,`
`ptao`	`PropTypes.arrayOf(PropTypes.number),`
`ptaor`	`PropTypes.arrayOf(PropTypes.number).isRequired,`
`ptoo`	`PropTypes.objectOf(PropTypes.number),`
`ptoor`	`PropTypes.objectOf(PropTypes.number).isRequired,`
`ptsh`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),`
`ptshr`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,`

Redux

Trigger	Content
`rat`	Redux constant(actionTypes)
`rac`	Redux actionCreator
`reducer`	Redux reducer
`store`	Redux store
`selector`	Redux selector

react-redux

Trigger	Content
`imconnect`	`import { connect } from 'react-redux'`
`improvider`	`import { Provider } from 'react-redux'`
`provider`	react-redux Provider Container
`mstp`	mapStateToProps
`mdtp`	mapDispatchToProps
`connect`	react-redux connect React Component
`container`	Redux container

react-router

Trigger	Content
`imrr`	`import { BrowserRouter as Router, Route } from 'react-router-dom'`
`imnl`	`import { NavLink } from 'react-router-dom'`
`imwr`	`import { withRouter } from 'react-router'`
`router`	react-router Router template
`route`	react-router Route component
`navlink`	react-router NavLink component