zp-react-redux-es6-standard

zephyrplace

|
92 installs
|
99 downloads
| (0) | Free
This is a simple colection of snippet for usage with React and Redux using ES6 and standard being using at Zeplyrplace.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

JavaScript Style Guide

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
}

feature X

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

Zephyr Place