react扩展程序_VS代码的最佳React扩展

react扩展程序

When working with React, there's lots of code that gets repeated over and over....and over and over again. Eventually, you start to think, "there's got to be a better way". Don't worry, there is!

在使用React时，有很多代码会一遍又一遍地重复。 最终，您开始思考，“ 必须有更好的方法 ”。 别担心，有！

In this article we will look at the ES7 React/Redux/GraphQL/React-Native snippets** **extension. Yes, it's a mouthful to spell it all out, but it provides an amazing set of snippets that are invaluable when writing React code.

在本文中，我们将研究ES7 React / Redux / GraphQL / React-本 机代码片段扩展。 是的，将其全部拼出是一个大口，但是它提供了一组惊人的片段，这些片段在编写React代码时非常宝贵。

ES7 React / Redux / GraphQL / React-Native代码片段扩展 ( The ES7 React/Redux/GraphQL/React-Native Snippets Extension )

This snippets extension (I won't type the entire name out again) is incredibly popular with over 2 million downloads. To back this up, every big time developer I've heard talk about React on a podcast, YouTube video, etc. uses this extension and loves it.

这个摘要扩展名（我不会再输入整个名称）非常受欢迎，下载量超过200万。 为了支持这一点，我曾经在播客，YouTube视频等上听到过每一次关于React的大讨论，都喜欢使用此扩展。

I've always said that developers are "intentionally lazy". In other words, we find ways to constantly improve the speed at which we right code by writing less of it ourselves. These snippets making writing React much much faster!

我一直说开发人员“故意懒惰”。 换句话说，我们找到了减少自己编写代码的方法，从而不断提高了修改代码的速度。 这些片段使编写React的速度大大加快了！

JavaScript导入 ( JavaScript Imports )

Although this article is focused on snippets for React, React code is primarily made up of modern JavaScript. For this reason, this extension includes several useful JavaScript snippets.

尽管本文主要关注React的代码片段，但是React代码主要由现代JavaScript组成。 因此，此扩展包含几个有用JavaScript代码段。

In modern JavaScript, code is broken up to different modules and then reused in other areas using the import syntax. Here's a couple of import snippets to consider.

在现代JavaScript中，代码被分解为不同的模块，然后使用导入语法在其他区域重用。 这里有几个导入片段要考虑。

导入默认导出。 (Import a default export.)

//imp
import moduleName from 'module'

导入命名的导出。 (Import a named export.)

//imd
import { destructuredModule } from 'module'

To get a little more specific to React, here's a couple of React imports.

为了更具体地了解React，这里有几个React导入。

导入React (Import React)

//imr
import React from 'react'

导入React和Component。 (Import React and Component.)

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

JavaScript迭代 ( JavaScript Iteration )

Iterating through a list of items is not difficult but it does get repetetive (no pun intended).

遍历项目列表并不困难，但确实可以重复（没有双关语）。

对于每次迭代 (For each iteration)

//fre
arrayName.forEach(element => { }

对于迭代 (For of iteration)

//fof
for(let itemName of objectName { }

对于迭代 (For in Iteration)

//fin
for(let itemName in objectName { }

JavaScript函数 ( JavaScript Functions )

Functions are obviously something that we write every day. Here's a few different ways to generate them.

函数显然是我们每天编写的东西。 这是生成它们的几种不同方法。

匿名函数 (Anonymous Function)

//anfn
(params) => { }

命名功能 (Named Function)

//nfn
const functionName = (params) => { }

React生命周期方法 ( React Lifecycle Methods )

Now, we can dive into more React specific stuff. Let's start with Lifecycle Methods.

现在，我们可以深入研究React的特定内容。 让我们从生命周期方法开始。

ComponentDidMount (ComponentDidMount)

//cdm
componentDidMount = () => { }

ComponentDidUpdate (ComponentDidUpdate)

//cdup
componentDidUpdate = (prevProps, prevState) => { }

ComponentWillUnmount (ComponentWillUnmount)

//cwun
componentWillUnmount = () => { }

React组件 ( React Components )

With the snippets we've mentioned so far, you have the ability to stub out most of a React component by combining them, but it gets better! Here's some snippets that will generate an entire component for you!

到目前为止，我们已经提到了这些片段，您可以通过组合将大多数React组件存根，但效果会更好！ 这是一些片段，它们将为您生成一个完整的组件！

React类组件 (React Class Component)

//rcc
import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

使用Prop类型的React类组件 (React Class Component With Prop Types)

//rcep
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class FileName extends Component {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

export default $1

React功能组件 (React Functional Component)

//rfc
import React from 'react'

export default function $1() {
  return <div>$0</div>
}

其他片段 ( Other Snippets )

We've covered a bunch of snippets in this article, but there are several more. Here's a couple of categories that might be worth a deeper look!

在本文中，我们涵盖了许多片段，但还有更多片段。 这里有一些类别可能值得深入了解！

• React Native
  React本机
• Prop Types
  道具类型
• Redux
  Redux
• Tests
  测验
• Writing to the Console
  写入控制台

结论 ( Conclusion )

Never write code that you don't have to. My only caveat to that statement comes if you are learning. If you're new to a language or framework, avoid snippets while you're learning. Write it all out for the experience! After that, SNIPPETS AWAY!

永远不要编写不必要的代码。 如果您正在学习，我对该声明的唯一警告是。 如果您不熟悉某种语言或框架，请在学习时避免使用摘要。 写下所有经验！ 之后，SNIPPETS AWAY！

翻译自: https://scotch.io/tutorials/the-best-react-extension-for-vs-code

react扩展程序