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

Contributors

• YutHelloWorld

Acknowledgments

• Reactjs code snippets
• React-Native/React/Redux snippets for es6/es7
• React Redux ES6 Snippets
• redux-snippets

License

MIT