Write React Faster with Simple React Snippets

Introduction

I’m a big fan of speeding up every part of your development. If you shave off seconds here and there multiple times a day, you’ll save a ton of time over the course of a year.

This involves using the keyboard as often as possible and reaching for the mouse as little as possible. It’s a goal of mine to do an entire day without touching the mouse. Still haven’t gotten there.

Learning vim is a big part of being productive in your editor. Even putting vim in your browser with Vimium helps a ton.

Snippets are another way to save time on development. Simple React Snippets for Visual Studio Code by Burke Holland is a great way to speed up development.

Here’s imrc expanded to import React, { Component } from 'react';

The Extension

Simple React Snippets can be found in the VS Code Extension Marketplace.

A Quick Example

Whenever starting a new React file, I’ll use the imr snippet:

imr

Expands to:

import React from 'react'

And the imrc snippet:

imrc

Expands to:

import React, { Component } from 'react'

The Snippets

After installing the VS Code Extension, you can use the snippets by typing the shortcut and hitting Tab or Enter.

Here are the ones I think are most helpful when starting new files:

imr - Import React

import React from 'react';

imrc - Import React and Component

import React, { Component } from 'react';

cc - Make a Class Component and export

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

export default |;

sfc - Make a stateless function component

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

export default |;

cdm - componentDidMount

componentDidMount() {
  |
}

cdu - componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  |
}

ss - setState

this.setState({ | : | });

ren - render

render() {
  return (
    |
  );
}

Conclusion

There are a few more snippets that you can use that you can find on the official page.