react 代码片段_使用简单的React代码片段更快地编写React

react 代码片段

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: https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

可以在VS Code扩展市场中找到简单的React代码段： https ://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

一个简单的例子 (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 the ones I think that are most helpful 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://scotch.io/tutorials/write-react-faster-w-simple-react-snippets

react 代码片段