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’;
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’
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 ( | ); }
There are a few more snippets that you can use that you can find on the official page.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
