2019 年 React 开发者的 22 个神奇工具

在Medium上找到我

（编辑：阅读评论，找到我对一款优秀的现代程序员程序的评论，我每天都用它来做笔记，它支持 React/JSX 等语法，是用 react制作的。我希望我可以回来把它包括在这里，但为时已晚）

众所周知，React 是一个用于构建出色用户界面的 JavaScript 库。但并非每个人都在使用相同的工具，也并非每个人都了解所有能够让 React 开发体验更有趣、更积极主动的优秀工具。

如果你还没用过 React，或者有朋友可能对它感兴趣，当他们问你为什么应该用这个库时，你会怎么说呢？除了告诉他们这个库有多棒（这应该是第一反应）之外，我还想提一下，开源社区创建的工具有助于将体验提升到一个全新的高度。

以下是 2019 年可用于构建 React 应用程序的 22 种工具（此列表不按重要性排序）

1. webpack-bundle-analyzer

有没有想过你的应用中哪些包或哪些部分占用了所有空间？其实，使用webpack-bundle-analyzer就能找到答案。这个包能帮你识别出哪些输出文件占用了最多的空间。

它将创建一个实时服务器，并以交互式树状图的形式呈现您的 bundles 内容。借助此工具，您可以查看所呈现文件的位置、它们的 gzip 大小、解析后的大小以及它们所属的父/子文件。

有什么好处呢？嗯，你可以根据所看到的内容优化你的 React 应用！

以下是其屏幕截图：

您可以清楚地看到，pdf 包占用了应用程序中最多的空间。但它也占用了屏幕上最多的空间。这非常有用。

但是，屏幕截图非常小。您还可以传递一些有用的选项来查看更多详细信息，例如generateStatsFile: true，还可以选择生成静态 HTML 文件，并将其保存在开发环境之外的某个地方以供以后使用。

2. react-proto

react-proto是一款面向开发者和设计师的原型设计工具。它是一款桌面软件，因此在使用前需要下载并安装。

以下是该软件的使用示例：

该应用程序允许您声明道具及其类型，在树中查看您的组件，导入背景图像，将它们定义为有状态或无状态，它们的父组件是谁，放大/缩小，以及将您的原型导出到新的或现有的项目中。

该应用程序似乎更适合Mac用户，但对于 Windows 用户来说仍然可以正常工作。

完成用户界面的映射后，您可以选择导出到现有项目或新项目。如果您选择导出到现有项目并选择根目录，它将像下面这样导出到 ./src/components：

下面是示例中的一个组件的示例：

react-proto 在 GitHub 上获得了超过 2,000 颗星。但我个人认为这个应用需要更新和更多工作，特别是在 react hooks 发布之后。它也不会缩小，除非您有可见的背景图像。换句话说，如果您导入背景图像，缩小，然后继续删除背景图像，您将无法重新放大，因为按钮是灰色的。放大的唯一方法是重新导入背景图像，然后在放大后将其删除。这个缺陷改变了我对这个应用的看法，但它之所以出现在这个列表中，是因为我们在其他任何地方都看不到这个应用的开源。开源是这个应用的优点，这可能使它在未来成为流行的开源存储库列表（它们的功能很重要，但它们似乎缺乏人力）。

3. 你为什么要更新

为什么更新React 的 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. 创建 React 应用

大家都知道create-react-app是开发 React 项目最快捷的方式（而且它包含了开箱即用的现代功能）。还有什么比这更简单的呢npx create-react-app <name>？

我在 medium（以及 dev.to）上的所有教程都是使用create-react-app构建反应界面，只是因为它快速而简单。

我们中的一些人可能不知道如何使用 CRA 创建 TypeScript 项目。您只需--typescript在末尾添加以下内容：

npx create-react-app <name> --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>
)

这将呈现如下所示的可视化器：

然而，它的一个缺点是它目前只适用于类组件，所以钩子还不支持。（问题是，既然这涉及到生命周期，钩子能支持吗？）

6. 古比

Guppy是一款友好且免费的 React 应用管理器和任务运行器，可在桌面上运行。他们似乎优先考虑 React 开发新手。然而，它对高级开发人员也可能有用。

它为 React 开发人员经常面临的许多典型任务（例如创建新项目、执行任务和管理依赖项）提供了友好的图形用户界面。

2018 年 8 月添加了 Windows 支持，因此您可以放心它是跨平台的。

古比 (Guppy)的样子如下：

7. 反应测试库

我一直很喜欢React-testing-library，因为它在编写单元测试时感觉很棒。这个包提供了 React DOM 测试工具，鼓励良好的测试实践。

该解决方案旨在解决测试实现细节的问题，而是像用户看到的那样测试反应组件的输入/输出。

测试实现细节并非确保应用按预期运行的有效方法。当然，您可以更加自信地了解组件所需的数据获取方式、排序方法等等。但如果您必须更改实现方式以指向其他数据库，那么您的单元测试就会失败，因为这些是耦合逻辑的实现细节。

这正是react-testing-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 开发者工具

React 开发者工具是一个扩展，允许在 Chrome 和 Firefox 开发者工具中检查 React 组件层次结构。

这是此列表中最常见的，并且仍然是 React 开发人员可以用来调试其应用程序的最有用的工具之一。

9.比特

Bit是使用 Material-ui 或 Semantic-ui-react 等组件库的一个很好的替代方案。它可以让您探索数千个开源组件，并使用它们来构建您的项目。

有许多不同的可用 React 组件可供任何人使用，包括选项卡、按钮、图表、表格、导航栏、下拉菜单、加载微调器、日期选择器、面包屑、图标、布局等。这些组件由其他 React 开发人员上传，就像你和我一样。

但也有一些有用的实用程序可用，例如格式化日期之间的距离。

10.故事书

如果您还不了解Storybook，我强烈建议您开始使用它们，以便更轻松地构建 UI 组件。该工具会启动一个实时开发服务器，并支持开箱即用的热加载，您可以在其中实时独立地开发 React 组件。

另一个好处是，你可以使用现有的开源插件，将你的开发体验提升到一个全新的水平。例如，使用storybook-readme包，你可以在开发用于生产的 React 组件的同时，在同一页面上创建readme文档。这足以充当普通的文档页面：

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 组件的开发工具。

它会扫描您的项目中的组件并使您能够：

1. 在任意 props、context 和 state 组合下渲染组件
2. 模拟每个外部依赖项（例如 API 响应、localStorage 等）
3. 与正在运行的实例交互时实时查看应用程序状态的变化

13. CodeSandbox

毫无疑问，这是目前最好的工具之一，它的反应速度比眨眼的速度还快（好吧，也许没有那么快）。

这个名为CodeSandbox的工具是一个在线编辑器，可让您从原型到部署创建 Web 应用程序——全部从网站完成！

Codesandbox 最初仅支持 React，但现在已扩展到 Vue 和 Angular 等库的更多入门模板。它们还支持使用 Gatsby 或 NextJS 等常用静态站点生成器创建项目，从而快速启动您的下一个 React Web 项目。

说到 codesandbox，有很多优点值得一提。首先，它非常活跃。

如果您需要探索人们正在构建的一些项目，您可以轻松单击“探索”并访问一堆代码示例来帮助改造您的下一个项目：

一旦您开始在项目内部进行编辑，您就会开始意识到您将要使用的实际上是功能强大的VSCode 编辑器。

我很想写一篇关于今天可以在 codesandbox 上使用的所有功能的完整文章，但看起来这项工作已经完成了。

14. React Bits

React bit是一系列反应模式、技术、技巧和窍门的集合，全部以类似在线文档的格式编写，您可以在同一个选项卡上快速访问不同的设计模式和技术、反模式、样式、UX 变体和其他有用的反应相关材料。

他们的GitHub repo目前有 9,923 颗星。

一些示例包括诸如 props 代理、组合等概念，以处理不同场景中的各种 UX，甚至揭示了每个 React 开发人员都应该注意的一些陷阱。

这是他们页面上的样子，您可以在左侧菜单中看到大量信息:)

15. 文件夹化

Folderize是一个 VSCode 扩展，发布不到 7 天。它允许你将组件文件转换为组件文件夹结构。你的 React 组件仍然是组件，只是现在被转换为目录了。

例如，假设你正在创建一个 React 组件，该组件接收一些fileprops 来显示一些有用的信息，例如它们的元数据。元数据组件的逻辑占用了大量代码行，所以你决定将其拆分成一个单独的文件。但是，当你决定这样做时，你就有两个相互关联的文件了。

因此，如果您有一个如下所示的目录：

你可能想把FileView.js和抽象FileMetadata.js成一个目录结构，就像 how Applesis 一样——尤其是当你想添加更多与 这样的文件相关的组件时FileScanner.js。这就是folderize为你做的事情，这样它们就可以形成类似于这样的结构：

import React from 'react'
import FileView from './src/components/FileView'

const App = (props) => <FileView {...props} />

export default App

16. React 入门项目

这里有一个很棒的React 入门项目列表，您可以在一个页面上查看所有内容。如果您喜欢快速且实用地同时呈现大量选项，那么这个列表非常适合您。

找到喜欢的启动项目后，您可以直接克隆仓库，并根据即将开发的应用进行修改。不过，克隆仓库并非能完全使用所有内容，因为有些内容需要安装，并成为项目的依赖项。这样可以更轻松地获取更新，并使项目更简洁。

该页面如下所示：

17.突出显示更新

这可以说是任何人开发工具包中最重要的工具。它是 React DevTools 扩展的一个功能，可以查看页面中哪些组件进行了不必要的重新渲染：

它可以帮助您在开发页面时发现瓶颈，并且在使用橙色/红色来处理严重的重新渲染问题时变得更加容易。

除非您打算构建一个平庸的应用程序，否则为什么您不想要这个美丽的东西在您身边呢？

18. React Diff 查看器

react-diff-viewer是一款简洁美观的文本差异查看器，使用 Diff 和 React 开发。它支持分屏视图、内联视图、单词差异、行高亮等功能。

如果您尝试将此功能嵌入到您的笔记（Ahem Boostnote）中并对其进行自定义以使其更适合您的应用程序（主题颜色、文档与故事书演示的组合等），这将非常有用

19. js.教练

我最常用来寻找 React 相关资料的网站是js.coach。我不知道为什么很少看到有人提到这个宝藏，但我几乎在这个页面上就找到了我需要的一切。它快速、简单、持续更新，并且总能为我的所有项目提供所需的结果。

他们最近添加了React VR标签，非常棒！

20. awesome-react

GitHub awesome-react开源存储库列出了与 react 相关的精彩事物。

我可能不知道还有其他网站，只能通过这个链接学习 React。你会发现很多有用的资源，一定能帮助你构建出色的 React 应用！

21. 质子原生

proton-native为您提供了一个反应环境来构建跨平台原生桌面应用程序。

它是 Electron 的替代品，具有一些简洁的功能，包括：

• 与 React Native 相同的语法
• 与现有的 React 库（例如 Redux）兼容
• 跨平台
• 原生组件，告别 Electron
• 与所有常规 Node.js 包兼容

有兴趣了解更多吗？阅读他们的文档。

22. Devhints React.js 备忘单

这是一个相当不错的 React 速查表，虽然缺少 React Hooks。不用担心，我会为 React v16.8+ 创建一个速查表，敬请期待。

结论

这篇文章到此结束！希望您在这里找到了有价值的信息，并期待我未来提供更多内容！

在Medium上找到我