Skip to content

Latest commit

 

History

History
211 lines (157 loc) · 3.69 KB

README.md

File metadata and controls

211 lines (157 loc) · 3.69 KB

Simple React Snippets

The essential collection of React Snippets and commands.

snippets in action

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.

React: class to className

Thank You

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