Awesome React Snippets

These snippets include all the different types of component structures you might want to use including the new React.memo or "Memoized" React function component.

Snippets

Full Expansions

rc - React Component

import React from 'react';

export default class $ extends React.Component {
  render() {
    return ( $ );
  }
}

rpc - React PureComponent

import React from 'react';

export default class $ extends React.PureComponent {
  render() {
    return ( $ );
  }
}

rfc - React Function Component

import React from 'react';

export default function $() {
  return ( $ );
}

rfcm - React Function Component Memoized

import React from 'react';

export default React.memo(function $() {
  return ( $ );
});

rp - React PropTypes

import PropTypes from 'prop-types';

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.