VS Code Reactjs snippets

This extension contains code snippets for Reactjs used by Andrew Smith.

Installation

In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.

Supported languages (file extensions)

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

Snippets

import React (imr)

import React from 'react';$0

import React, {Component} (imrc)

import React, { Component } from 'react';$0

import PropTypes (impt)

import PropTypes from 'prop-types';$0

all inclusive functional component (nrc)

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

const ${1:componentName} = ({}) => (
	${0:<div></div>}
);

${1:componentName}.propTypes = {};

export default ${1:componentName};

all inclusive class component (nrcc)

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

class ${1:componentName} extends Component {
	constructor(props, ...rest) {
		super(props, ...rest);
		this.state = {};
	}

	render() {
		return (
			${0:<div></div>}
		);
	}
}

${1:componentName}.propTypes = {};

export default ${1:componentName};

just functional component (rc)

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

${1:componentName}.propTypes = {};
$0

just class Component (rcc)

class ${1:componentName} extends Component {
	constructor(props, ...rest) {
		super(props, ...rest);
		this.state = {};
	}

	render() {
		return (
			${2:<div></div>}
		);
	}
}

${1:componentName}.propTypes = {};
$0

default component constructor (ccon)

constructor(props, ...rest) {
	super(props, ...rest);
	$1
}$0

constructor; props and context (cconc)

constructor(props, context, ...rest) {
	super(props, context, ...rest);
	$1
}$0

componentWillMount (cwm)

componentWillMount() {$1}$0

componentDidMount (cdm)

componentDidMount() {$1}$0

componentWillReceiveProps (cwr)

componentWillReceiveProps(nextProps) {$1}$0

shouldComponentUpdate (scu)

shouldComponentUpdate(nextProps, nextState) {$1}$0

componentWillUpdate (cwup)

componentWillUpdate(nextProps, nextState) {$1}$0

componentDidUpdate (cdup)

componentDidUpdate(prevProps, prevState) {$1}$0

componentWillUnmount (cwum)

componentWillUnmount() {$1}$0

bound component class method (ccm)

${1:methodName} = () => ${1:{}};$0

set state (sst)

this.setState({$1});
$0

set state w/ function (ssf)

this.setState((state, props) => ({$1}));
$0

destructure class props (cdp)

const {$1} = this.props;
$0

destructure class state (cds)

const {$1} = this.state;
$0

bind method to class (cbnd)

this.$1 = this.$1.bind(this);
$0

default props (rdp)

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

propType array (pta)

PropTypes.array,$0

propType array required (ptar)

PropTypes.array.isRequired,$0

propType bool (ptb)

PropTypes.bool,$0

propType bool required (ptbr)

PropTypes.bool.isRequired,$0

propType func (ptf)

PropTypes.func,$0

propType func required (ptfr)

PropTypes.func.isRequired,$0

propType number (ptn)

PropTypes.number,$0

propType number required (ptnr)

PropTypes.number.isRequired,$0

propType object (pto)

PropTypes.object,$0

propType object required (ptor)

PropTypes.object.isRequired,$0

propType string (pts)

PropTypes.string,$0

propTypes string required (ptsr)

PropTypes.string.isRequired,$0

propType node (ptnd)

PropTypes.node,$0

propType node required (ptndr)

PropTypes.node.isRequired,$0

propType element (ptel)

PropTypes.element,$0

propType element required (ptelr)

PropTypes.element.isRequired,$0

propType instanceOf (pti)

PropTypes.instanceOf($1),$0

propType instanceOf required (ptir)

PropTypes.instanceOf($1).isRequired,$0

propType enum (pte)

PropTypes.oneOf([$1]),$0

propType enum required (pter)

PropTypes.oneOf([$1]).isRequired,$0

propType one of type (ptot)

PropTypes.oneOfType([$1]),$0

propType one of type required (ptotr)

PropTypes.oneOfType([$1]).isRequired,$0

propType array of (ptao)

PropTypes.arrayOf($1),$0

propType array of required (ptaor)

PropTypes.arrayOf($1).isRequired,$0

propType object of (ptoo)

PropTypes.objectOf($1),$0

propType object of required (ptoor)

PropTypes.objectOf($1).isRequired,$0

propType shape (ptsh)

PropTypes.shape({$0}),

propType shape required (ptshr)

PropTypes.shape({$1}).isRequired,$0

higher order component (hoc)

C => {
	return class extends Component {
		constructor(...rest) {
			super(rest);
		}

		getChildContext() {
			return {
				};
		}

		render() {
			$0return <C {...this.props} />;
		}
	};
}

ref (cref)

ref={(el) => {
	this.$1 = el;
}}
$0