bpp-react-redux-es6-semistandard

zephyrplace

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

bpp-react-redux-es6-standard

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

Features

js-semistandard-style

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 semistandard --save-dev
npm install prop-types --save

Release Notes

0.0.2

Update requirements

0.0.1

Initial release of the main snippets usage at BPP

References

BPP