zp-react-redux-es6-standard

This is a simple colection of snippet for usage with React and Redux using ES6 and standard being using at Zephyr Place.

Features

React

Command	Description
rcc→	Create a React Component Class

import React, { Component } from 'react'

export default class $1 extends Component {
  render () {
    return (
      <div>$2</div>
    )
  }
}

Command	Description
rcs→	Create a React Component Stateless

import React from 'react'

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

export default $1

Command	Description
rccp→	Create a React Component Class with PropTypes

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

class $1 extends Component {
  render () {
    return (
      <div>$3</div>
    )
  }
}

$1.propTypes = {
  $2
}

export default $1

Command	Description
rcsp→	Create a React Component Class with PropTypes

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

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

$1.propTypes = {
  $2
}

export default $1

Redux

Command	Description
rrcc→	Create a Redux Container with connect and bindActionCreators

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

const mapStateToProps = (state) => ({ $1: state.$2 })
const mapDispatchToProps = (dispatch) => bindActionCreators($3, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)($4)

Command	Description
rrdc→	Create a Redux Reducer

export default (state = $1, action) => {
  switch (action.type) {
    case $2:
      $3
    default:
      return state
  }
}

Command	Description
raf→	Create a Redux action function

export const $1 = '$1'

export const $2 = $3 => ({
  type: $1,
  $3
})

Command	Description
rafr→	Create a Redux action function with return

export const $1 = $2 => {
  return $3
}

Why?: Many popular extensions utilize superfluous snippets. This is tiny with minimium requirements and the only one with correct Standard JS.

Utilities

Command	Description
tp→	this.props
ts→	this.state

Prop-types

Command	Description
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,

Requirements

npm install standard --save-dev
npm install prop-types --save

Release Notes

0.0.5

Fix misstype Zephyr Place in README.md

0.0.4

Better categories in README.md

0.0.3

New utilities snippets and update Redux action function with return

0.0.2

Update logo

0.0.1

Initial release of the main snippets usage at Zephyr Place

References

• vscode-react-standard

---