关于javascript:21-个对-React-开发有所帮助的工具库

作者：piyush-kochhar
译者：前端小智
起源：hackernoon

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

为了保障的可读性，本文采纳意译而非直译。

下列工具中的重要性与排序无关。

1.Webpack Bundle Analyzer

有没有想过你的应用程序的哪些包或哪局部代码所占总大小的多少? Webpack Bundle Analyzer 能够帮忙咱们剖析。

Webpack Bundle Analyzer 创立一个实时服务器，并提供依赖包交互式树形图可视化。通过这个工具包，能够看到所渲染文件的地位，gzip 大小，解析大小以及所父子级之间详情。

这个工具的益处是，能够依据你所看到来优化你的 React 利用。

收下是它生成的一个剖析图：

能够分明地看到 pdf 包大小占用应用程序是最多的，同时也是占用剖析图片最大比例，这对于咱们来说是所看即所得成果。

然而，生成剖析图空间无限，你还能够传递一些有用的选项来更具体地查看它，比方 generateStatsFile: true，还能够抉择生成一个动态HTML 文件，能够将其保留在开发环境之外的某个中央，以供当前应用。

2. React-Proto

React-Proto 是一个面向开发人员和设计人员的原型工具。这是一个桌面软件，所以在应用之前你必须下载并装置这个软件。

以下是应用形式一个简略演示：

该应用程序容许你申明 props 及其types，在树中查看组件，导入背景图像，将它们定义为有状态或无状态，定义其父组件将是什么，放大 / 放大，以及将原型导出到新的或现有我的项目。

该应用程序仿佛更适宜 Mac 用户，但它仍实用于 Windows 用户。

实现用户界面后，能够抉择导出到现有我的项目或新我的项目。如果你抉择导出到现有我的项目并抉择根目录，它会将它们导出到./src/components，如下所示：

随着 React hook 的公布，这个应用程序须要更新做更多的工作。当然，开源是这个应用程序的益处，因为它使它有可能成为将来风行的开源存储库列表。

3. Why Did You Render

Why Did You Render 猴子补丁 React 告诉你无关可防止的从新渲染的信息。

猴子补丁: 这个叫法起源于 Zope 框架，大家在修改 Zope 的 Bug 的时候常常在程序前面追加更新局部，这些被称作是“杂牌军补丁(guerilla patch)”，起初 guerilla 就慢慢的写成了 gorllia((猩猩)，再起初就写了 monkey(猴子)，所以猴子补丁的叫法是这么莫名其妙的得来的。

猴子补丁次要有以下几个用途：

• 在运行时替换办法、属性等
• 在不批改第三方代码的状况下减少原来不反对的性能
• 在运行时为内存中的对象减少 patch 而不是在磁盘的源代码中减少

这十分有用，不仅能够领导咱们修复我的项目的性能，还能够帮忙你了解 React 是如何工作的。而且，当你更好地了解 React 的工作原理时，你就会成为更好的 React 开发人员。

通过申明一个额定的动态属性 whyDidYouRender 并将其值设置为true，能够将侦听器附加到任何自定义组件

import React from 'react'
import Button from '@material-ui/core/Button'

const Child = (props) => <div {...props} />

const Child2 = ({children, ...props}) => (<div {...props}>
    {children} <Child />
  </div>
)

Child2.whyDidYouRender = true

const App = () => {const [state, setState] = React.useState({})

  return (
    <div>
      <Child>{JSON.stringify(state, null, 2)}</Child>
      <div>
        <Button type="button" onClick={() => setState({ hello: 'hi'})}>
          Submit
        </Button>
      </div>
      <Child2>Child #2</Child2>
    </div>
  )
}

export default App

这样做之后，在控制台才会打印令人宜人简短正告：

不要认为这是谬误的提醒，把它当成一件坏事。利用那些烦人的音讯，这样你就能够修复那些节约的从新渲染。

4. Create React App

大家都晓得，Create React App 是创立 React 我的项目的最快形式（开箱即用）。

还有什么比 npx create-react-app <name>更简略的呢

咱们还有些人可能不晓得的是如何应用 CRA 创立 TypeScript 我的项目，这个也很简略，只须要在开端增加--typescript 即可：

npx create-react-app <name> — typescript

这样能够省去手动将 TypeScript 增加到 CRA 创立我的项目中的麻烦。

5. React Lifecycle Visualizer

React Lifecycle Visualizer 是一个 npm 包，用于跟踪和可视化任意 React 组件的生命周期办法。

与 Why Did You Render 工具相似，你能够抉择任何组件来启动生命周期可视化工具：

import React from 'react'
import {
  Log,
  VisualizerProvider,
  traceLifecycle,
} from 'react-lifecycle-visualizer'

class TracedComponent extends React.Component {
  state = {loaded: false,}

  componentDidMount() {this.props.onMount()
  }

  render() {return <h2>Traced Component</h2>}
}

const EnhancedTracedComponent = traceLifecycle(TracedComponent)

const App = () => (
  <VisualizerProvider>
    <EnhancedTracedComponent />
    <Log />
  </VisualizerProvider>
)

运行后果，如下所示：

然而，其中一个毛病是它目前仅实用于 类组件，因而尚不反对 Hook。

6. Guppy

Guppy 是 React 的一个敌对且收费的应用程序管理器和工作运行器，它在桌面上运行且跨平台的，你能够释怀用。

它为开发人员常常面临的许多典型工作 (如创立新我的项目、执行工作和治理依赖项) 提供了敌对的图形用户界面。

Guppy 启动后的的样子

7. react-testing-library

react-testing-library 是一个很棒的测试库，编写单元测试时，它会让你感觉很好。这个包提供了 React DOM 测试实用程序，激励良好的测试实际。

此解决方案旨在解决测试实现细节的问题，而不是测试 React 组件的输出 / 输入，就像用户会看到它们一样。

这是 react-test -library 解决的一个问题，因为现实状况下，你只心愿您的用户界面可能失常工作，并最终正确地渲染进去。

如何将数据获取到这些组件并不重要，只有它们依然提供预期的输入即可。

以下是应用此库进行测试的示例代码：

// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({count}) =>
  render(<StateMock state={{ count}}>
      <StatefulCounter />
    </StateMock>,
  )

it('renders initial count', async () => {
  // Render new instance in every test to prevent leaking state
  const {getByText} = renderComponent({count: 5})

  await waitForElement(() => getByText(/clicked 5 times/i))
})

it('increments

 count', async () => {
  // Render new instance in every test to prevent leaking state
  const {getByText} = renderComponent({count: 5})

  fireEvent.click(getByText('+1'))
  await waitForElement(() => getByText(/clicked 6 times/i))
})

8. React Developer Tools

React Developer Tools 是一个扩大插件，容许在 Chrome 和Firefox Developer Tools中查看 React 的组件层次结构。

这是 React 开发中最常见的扩大插件，并且是 React 开发人员能够用来调试其应用程序的最有用的工具之一。

9. Bit

通过 Bit 能够看到数以千计的开源组件，并容许还能够应用它们来构建我的项目。

列表中有很多很多 React 组件可供咱们应用，包含选项卡，按钮，图表，表格，导航栏，下拉列表，加载微调器，日期选择器，面包屑，图标，布局等。

10. Storybook

Storybook 是一个轻松地构建 UI 组件的库。该工具启动一个实时开发服务器，反对开箱即用的热重载，你能够在其中独立地实时开发 React 组件。

这足以作为一般文档页面：

11. React Sight

你有没有想过你的应用程序在流程图中的样子？React Sight 容许你通过展现整个应用程序的实时组件层次结构树来可视化 React 应用程序。

它还反对 react-router，Redux 以及React Fiber。

应用此工具，您能够将鼠标悬停在节点上，这些节点是指向与树中组件间接相干的组件的链接。

如果在查看后果时遇到问题，能够在地址栏中输出 chrome:extensions，查找“React Sight”框，而后单击“Allow access to file URLs” 开关，如下所示：

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

12. React Cosmos

React Cosmos 是一个用于创立可重用 React 组件的开发工具。

它扫描我的项目中的组件，并使你可能:

• 通过 props，context 和 state 任意组合来渲染组件。
• 模仿每个内部依赖项 (API 响应、localStorage 等)。
• 查看应用程序状态在与运行实例交互时的实时演变。

13. CodeSandbox

CodeSandbox 一个在线编辑器，能够在下面创立 Web 应用程序并履行运行。

CodeSandbox 最后只在晚期阶段反对 React，但它们当初曾经扩大到Vue 和Angular等库的其余入门模板。

他们还反对应用常见的动态站点生成器（如 Gatsby 或 Next.js）创立我的项目来启动 React Web 我的项目。

14. React Bits

React Bits 是一个 React 模式、技术、技巧和技巧的汇合，所有这些都以相似于在线文档的格局编写，你能够在同一个选项卡上快速访问不同的设计模式和技术、反模式、款式、UX 变体以及其余与 React 相干的有用资料。

GitHub repo，目前有 10083 颗星星。

15. folderize

folderize 是一个 VS Code 扩大。它容许您将组件文件转换为组件文件夹构造。React 组件依然是一个组件，只是转换为一个目录。

例如，假如正在创立一个 React 组件，该组件将文件作为 props 来显示有用的信息，如元数据

元数据组件的逻辑占用了大量的行，因而咱们决定将其拆分为独自的文件。然而，当这样做时，咱们就有两个互相关联的文件。

所以，就有有一个大略如下所示的目录：

咱们可能想要将 FileView.js 和filemetada.js形象到目录构造中，就像 Apple 一样，尤其是思考增加更多与 FileScanner.js 等文件相干的组件时。

这就是 folderize 为咱们所做的，这样组件们就能够失去一个相似的构造

16. React Starter Projects

React starter projects 是一个依赖库列表，能够在下面疾速你须要要的依赖库的名称并能够跳转对应的 github 上。

一旦看到一个你喜爱的入门我的项目，你就能够简略地克隆这个库，并依据你的须要进行批改。

然而，并不是所有的依赖库都是通过克隆应用，因为其中一些库须要通过装置模式，能力成为我的项目的依赖项。

17. Highlight Updates

这可能是开发工具包中最重要的工具。Highlight Updates 是 React DevTools 扩大的一个个性，能够查看页面中的哪些组件正在不必要地从新渲染。

它能够帮忙你在开发页面时是更容易发现一些性能问题，因为它们会应用橙色或红色对重大的从新渲染问题进行着色。

18. React Diff Viewer

React Diff Viewer 是一个简略而好看的文本差别比照工具 这反对宰割视图，内嵌视图，字符差别，线条突出显示等性能。

19. JS.coach

JS.coach 是我最罕用来与 React 有须要的库的网站。从这个页面能够找到须要的任何货色。

它疾速、简略、不断更新，并且总是能给我所有我的项目所需的后果。最近还增加了 React VR，十分棒。

20. Awesome React

Awesome React 开源库是一个与 React 相干的很棒的列表。

我可能会遗记其余网站并独自从这个链接学习 React。因为能够在此找到批量有用的资源，这些资源必定会帮忙咱们构建杰出的 React 应用程序！

21. Proton Native

Proton Native 为咱们提供了一个 React 环境来构建跨平台的本机桌面应用程序。

它是 Electron 的代替产品，具备一些简洁的性能，包含：

• 与 React Native 语法雷同。
• 实用于现有的 React 库，例如 Redux。
• 兼容所有失常的 Node.js 包。

原文：https://medium.com/better-pro…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。