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 to being productive in your editor. Even putting vim in your browser with Vimium helps a ton.

学习vim是提高编辑效率的重要部分。 即使使用Vimium将vim放入浏览器也可以帮助很多。

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

片段是节省开发时间的另一种方法。 Burke Holland的 VS Code的简单React代码段是加速开发的好方法。

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

这是将imrc扩展为import React, { Component } from 'react';

扩展名 (The Extension)

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

可以在VS Code Extension Marketplace中找到简单的React代码段

一个简单的例子 (A Quick Example)

Whenever starting a new React file, I’ll use the imr or imrc snippets.

每当启动新的React文件时，我都会使用imr或imrc段。

• imr -> import React from 'react'

  imr > import React from 'react'

• imrc -> import React, { Component } from 'react'

  imrc > import React, { Component } from 'react' imrc import React, { Component } from 'react'

片段 (The Snippets)

After installing the VS Code Extension (may have to restart VS Code?), you can use the snippets by typing the shortcut and hitting Tab or Enter.

安装VS Code Extension(可能需要重新启动VS Code？)之后，可以通过键入快捷方式并单击Tab或Enter来使用代码段。

Here are some helpful snippets when starting new files:

在启动新文件时，以下是一些有用的代码片段：

imr-导入React (imr - Import React)

import React from 'react';

imrc-导入React和组件 (imrc - Import React and Component)

import React, { Component } from 'react';

cc-制作类组件并导出 (cc - Make a Class Component and export)

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

export default |;

sfc-制作无状态功能组件 (sfc - Make a stateless function component)

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

export default |;

CDM-componentDidMount (cdm - componentDidMount)

componentDidMount() {
  |
}

cdu-componentDidUpdate (cdu - componentDidUpdate)

componentDidUpdate(prevProps, prevState) {
  |
}

ss-setState (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.

您还可以在官方页面上找到更多的摘要。

翻译自: https://www.digitalocean.com/community/posts/write-react-faster-with-simple-react-snippets