Simple React Snippets

The essential collection of React Snippets and commands.

Features

Only what you need and nothing more. No Redux. No React Native.

Simply, simple React snippets.

These snippets were selected carefully from my own day-to-day React use. Not everything in React is included here. This is a hand selected set of snippets that work the way that you would expect, not just a copy of the documentation.

Snippets

Snippet	Renders
imr	Import React
imrc	Import React / Component
impt	Import PropTypes
cc	Class Component
ccc	Class Component With Constructor
sfc	Stateless Function Component
cdm	componentDidMount
cwm	componentWillMount
cwrp	componentWillReceiveProps
scu	shouldComponentUpdate
cwu	componentWillUpdate
cdu	componentDidUpdate
cwu	componentWillUpdate
cdc	componentDidCatch
ss	setState
ren	render
hoc	Higher Order Component

Full Expansions

imr - Import React

import React from 'react';

imrc - Import React, Component

import React, { Component } from 'react';

impt - Import PropTypes

import PropTypes from 'prop-types';

cc - Class Component

class | extends Component {
  state = { | },
  render() {
    return ( | );
  }
}

export default |;

ccc - Class Component With Constructor

class | extends Component {
  constructor(props) {
    super(props);
    this.state = { | };
  }
  render() {
    return ( | );
  }
}

export default |;

sfc - Stateless Function Component

const | = props => {
  return ( | );
};

export default |;

cdm - componentDidMount

componentDidMount() {
  |
}

cwm - componentWillMount

componentWillMount() {
  |
}

cwrp - componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  |
}

scu - shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  |
}

cwu - componentWillUpdate

componentWillUpdate(nextProps, nextState) {
  |
}

cdu - componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  |
}

cwun - componentWillUnmount

componentWillUnmount() {
  |
}

cdc - componentDidCatch

componentDidCatch(error, info) {
  |
}

ss - setState

this.setState({ | : | });

ren - render

render() {
  return (
    |
  )
}

hoc - Higher Order Component

function | (|) {
  return class extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      return < | {...this.props} />;
    }
  };
}

Commands

React: class to className

Changes all occurences of class in JSX to className. This transform is safe to run multiple times on any document. No text needs to be selected as the command is executed on the entire document.

Thank You

Special thanks to the following individuals who have helped with this project in some way.

• @dan_abramov
• @adiun
• @will-stone