Atom React ES.next Snippets

React ES.next snippets for Atom

General snippets

resc - React component

import React, { Component, PropTypes } from 'react';

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

${1}.propTypes = {
};

export default ${1};

resfunc - React functional component

import React, { PropTypes } from 'react';

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

${1}.propTypes = {
};

export default ${1};

resfuncm - React functional component (Minimal)

import React from 'react';

const ${1} = () => (
  ${2:<div>MyComponent</div>}
);

export default ${1};

resstate - React initial state definition

  state = { ${1}: ${2} };

resmethod - React method definition

${1} = () => {

}

respt - React prop types definition

${1}.propTypes = {
  ${2}
};

resdp - React default props definition

${1}.defaultProps = {
  ${2}
};

PropType snippets

respstring or respstringr - String

${1}: PropTypes.string,

respnumber or respnumberr - Number

${1}: PropTypes.number,

respobject or respobjectr - Object

${1}: PropTypes.object,

resparray or resparrayr - Array

${1}: PropTypes.array,

respbool or respboolr - Boolean

${1}: PropTypes.bool,

respel or respelr - Element

${1}: PropTypes.element,

respfunc or respfuncr - Function

${1}: PropTypes.func,

respnode or respnoder - Node

${1}: PropTypes.node,