2020年为React开发人员提供的22种神奇工具

开发 前端
众所周知,React是一个JavaScript库,用于构建出色的用户界面。但是,并不是每个人都在使用相同的工具,或者不是每个人都知道可以使用这些工具使React开发体验变得更加有趣。

众所周知,React是一个JavaScript库,用于构建出色的用户界面。但是,并不是每个人都在使用相同的工具,或者不是每个人都知道可以使用这些工具使React开发体验变得更加有趣。

[[325694]]

如果你没有使用过React,或者有朋友可能对使用React感兴趣,当他们问你为什么要使用React库时,你会说什么?

除了告诉他们React有多伟大(应该是第一件事)之外,我还想提及一下,由开源社区创建的工具有助于将体验带入一个全新的高度。

以下是22种可用于在2020年构建React应用的工具(此列表按重要性排列)。

1. Webpack Bundle Analyzer

有没有想过你的应用程序中的哪些软件包或部分占据了所有空间?好了,你可以使用Webpack Bundle Analyzer进行查找,该软件包将帮助你确定占用最大空间的输出文件。

它将创建一个实时服务器,并向你提供一个交互式的、显示包内容的树形图。有了这个工具,你就可以看到渲染的文件的位置、它们的gzip大小、解析后的大小以及它们的父/子文件。

你可以根据你所看到的优化你的React应用!这是它的屏幕截图:

2020年为React开发人员提供的22种神奇工具

从上图中我们可以清楚地看到pdf软件包在应用程序中占据了最大的空间,但这也占用了屏幕上的最大空间。这非常有用。

不过,截图是最小的,你还可以通过有用的选项来查看它的更多细节,比如 generateStatsFile: true,还可以选择生成一个静态的HTML文件,保存在开发环境以外的地方,供以后使用。

2. React-Proto

React-Proto是面向开发人员和设计人员的原型制作工具。它是桌面软件,因此你必须先下载并安装该软件然后再使用。

这是此软件正在使用的示例:

2020年为React开发人员提供的22种神奇工具

该应用程序可以让你声明props及其类型,在树状图中查看你的组件,导入背景图片,定义它们为有状态或无状态,定义它们的父组件是什么,放大/缩小,并将你的原型导出到一个新的或现有的项目中。

该App似乎更适合Mac用户,但对于Windows用户仍然可以正常使用。

完成用户界面的映射后,你可以选择导出到现有项目或新项目。如果选择导出到现有项目并选择根目录,它将把它们导出到 ./src/components,如下所示:

2020年为React开发人员提供的22种神奇工具

这是我们在例子中用到的一个组件的例子:

React-Proto在GitHub上获得了2,000颗星。

不过,就我个人而言,我认为这个应用需要更新,需要更多的工作,尤其是随着React Hooks的发布。

3. Why Did You Render

Why Did You Render 可以让 React 通知你可避免的重新渲染。

这非常有用,不仅可以指导你进行项目的性能修复,还可以帮助你了解React的工作方式。而且,当你对React的工作原理有了更好的了解时,它将使你成为一个更好的React开发人员。

你可以通过声明一个额外的静态属性 whyDidYouRender 并将其值为 true 来将侦听器附加到任何自定义组件:

  1. import React from 'react' 
  2. import Button from '@material-ui/core/Button' 
  3.  
  4. const Child = (props) => <div {...props} /> 
  5.  
  6. const Child2 = ({ children, ...props }) => ( 
  7.   <div {...props}> 
  8.     {children} <Child /> 
  9.   </div> 
  10.  
  11. Child2.whyDidYouRender = true 
  12.  
  13. const App = () => { 
  14.   const [state, setState] = React.useState({}) 
  15.  
  16.   return ( 
  17.     <div> 
  18.       <Child>{JSON.stringify(state, null, 2)}</Child> 
  19.       <div> 
  20.         <Button type="button" onClick={() => setState({ hello: 'hi' })}> 
  21.           Submit 
  22.         </Button> 
  23.       </div> 
  24.       <Child2>Child #2</Child2> 
  25.     </div> 
  26.   ) 
  27.  
  28. export default App 

这样做之后,你的控制台才会发出令人难以置信的令人讨厌的警告:

2020年为React开发人员提供的22种神奇工具

不要误解,把它当作一件好事。充分利用那些烦人的消息,这样你就可以修复那些浪费的重新渲染,那些烦人的消息最终会离你而去!

4. Create React App

大家都知道,Create React App 是开始开发React项目的最快方法(开箱即用,具有现代功能)。

有什么比 npx create-react-app 容易?

我们中有些人可能不知道的是如何使用CRA创建TypeScript项目,你要做的就是在末尾添加 --typescript:

  1. npx create-react-app <name> --typescript 

这样可以省去手动将TypeScript添加到CRA项目中的麻烦。

5. React Lifecycle Visualizer

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

与 Why Did You Render 一样,你可以启用你选择的任何组件以带出生命周期可视化器:

  1. import React from 'react' 
  2. import { 
  3.   Log, 
  4.   VisualizerProvider, 
  5.   traceLifecycle, 
  6. } from 'react-lifecycle-visualizer' 
  7.  
  8. class TracedComponent extends React.Component { 
  9.   state = { 
  10.     loaded: false, 
  11.   } 
  12.  
  13.   componentDidMount() { 
  14.     this.props.onMount() 
  15.   } 
  16.  
  17.   render() { 
  18.     return <h2>Traced Component</h2> 
  19.   } 
  20.  
  21. const EnhancedTracedComponent = traceLifecycle(TracedComponent) 
  22.  
  23. const App = () => ( 
  24.   <VisualizerProvider> 
  25.     <EnhancedTracedComponent /> 
  26.     <Log /> 
  27.   </VisualizerProvider> 

这将显示可视化器,如下所示:

2020年为React开发人员提供的22种神奇工具

https://github.com/Oblosys/react-lifecycle-visualizer

但是,这样做的缺点是,它目前仅适用于类组件,因此尚不支持Hooks。

6. Guppy

Guppy是React的好朋友,免费的应用程序管理器和任务运行器,它在桌面上运行。

他们似乎会优先考虑那些在React中进行开发的新手。不过,这可能对高级开发人员也有帮助。

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

Windows支持已于2018年8月添加,因此你可以放心,它是跨平台的。

这是Guppy的样子:

2020年为React开发人员提供的22种神奇工具

https://github.com/joshwcomeau/guppy

7. react-testing-library

我一直都很喜欢react-testing-library,因为在编写单元测试时感觉不错。这个包提供了React DOM测试实用程序,可以鼓励良好的测试实践。

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

测试实现细节并不是确保应用程序按预期工作的有效方法。

当然,你会对你的组件所需要的数据的获取方式、使用哪种排序方式等等,都会更有信心。但是,如果必须更改实现的方式以指向另一个数据库,则单元测试将失败,因为它们是耦合逻辑的实现细节。

这是react-test -library解决的一个问题,因为在理想的情况下,你只希望你的用户界面能够正常工作,并且最终能够正确地呈现出来。

只要这些组件仍能提供预期的输出,如何将数据获取到这些组件并不重要。

以下是使用此库如何放置测试的示例代码:

  1. // 提升辅助函数(但不是vars)以在测试用例之间重用 
  2. const renderComponent = ({ count }) => 
  3.   render( 
  4.     <StateMock state={{ count }}> 
  5.       <StatefulCounter /> 
  6.     </StateMock>
  7.   ) 
  8.  
  9. it('renders initial count', async () => { 
  10.   // 在每次测试中渲染新的实例,以防止泄漏状态。 
  11.   const { getByText } = renderComponent({ count: 5 }) 
  12.  
  13.   await waitForElement(() => getByText(/clicked 5 times/i)) 
  14. }) 
  15.  
  16. it('increments count', async () => { 
  17.   // 在每次测试中渲染新的实例,以防止泄漏状态。 
  18.   const { getByText } = renderComponent({ count: 5 }) 
  19.  
  20.   fireEvent.click(getByText('+1')) 
  21.   await waitForElement(() => getByText(/clicked 6 times/i)) 
  22. }) 

8. React Developer Tools

React Developer Tools是一个扩展,可以检查Chrome和Firefox Developer Tools中React的组件层次结构。

这是该列表中最广为人知的扩展,并且仍然是React开发人员可以用来调试其应用程序的最有用的工具之一。

9. Bit

Bit是使用组件库(例如Material-UI或Semantic UI React)的一个很好的选择。

利用Bit,你可以探索数千个开源组件,并可以使用它们来构建项目。

2020年为React开发人员提供的22种神奇工具

https://bit.dev/

有许多不同的React组件供任何人使用,包括标签、按钮、图表、表格、导航栏、下拉菜单、加载旋转器、日期选择器、面包屑、图标、布局等。

这些都是由其他React开发人员上传的,就像你和我一样。

但是,还有一些有用的实用程序,例如格式化日期。

10. Storybook

如果你还不了解Storybook,我强烈建议你开始使用它,如果你想更轻松的体验构建UI组件,那么你可以开始使用它。

该工具启动了具有即时支持的热重载功能的实时开发服务器,你可以在其中独立地实时开发React组件。

这其中的另一个好处是,你可以使用目前已有的开源插件,将你的开发体验提升到一个全新的高度。

例如,使用Storybook README包,你可以在开发React组件的同时创建README文档,以便在同一页面上直接用于生产。

这足以用作常规文档页面:

2020年为React开发人员提供的22种神奇工具

11. React Sight

React Sight通过向你展示整个应用程序的实时组件层次结构树,使你可视化React应用程序。

它还支持react-router,Redux和React Fiber。

使用此工具,你可以将鼠标悬停在节点上,这些节点是指向树中与它们直接相关的组件的链接。

如果你无法查看结果,则可能需要在地址栏中输入chrome:extensions,找到“ React Sight”框,然后单击“允许访问文件URL”开关。

12. React Cosmos

React Cosmos是用于创建可重复使用的React组件的开发工具。

它会扫描项目中的组件,并使你能够:

  • 使用props,context和state的任意组合渲染组件。
  • 模拟每个外部依赖项(例如API响应,localStorage等)。
  • 与正在运行的实例进行交互时,查看应用程序状态的实时变化。

13. CodeSandbox

这无疑是最好的工具之一,让你的手比眨眼的速度更快(好吧,也许不是那么快)。

这个称为CodeSandbox的工具是一个在线编辑器,可以让你创建从原型到部署的Web应用程序——全部从网站上完成!

CodeSandbox最初仅在较早的阶段支持React,但现在已扩展到适用于Vue和Angular等库的其他入门模板。

他们还支持通过使用常见的静态站点生成器(例如Gatsby或Next.js)创建项目来启动下一个React Web项目。

关于CodeSandbox,有很多很棒的事情要谈论。首先,它非常活跃。

如果你需要探索一些别人正在建设的项目,为了方便你,点击探索(explore),可以很容易地获得一堆代码示例,帮助你翻新下一个项目。

2020年为React开发人员提供的22种神奇工具

开始编辑项目后,你将开始意识到要使用的实际上是功能强大的VS Code编辑器。

14. React Bits

React Bits 是一个 React 模式、技术、技巧和窍门的集合,所有这些都是以类似于在线文档的形式写成的,在这里你可以快速访问不同的设计模式和技术、反模式、风格设计、用户体验变化,以及其他有用的 React 相关材料,所有这些都在同一个标签页上。

他们有一个GitHub仓库,目前有9923星。

一些示例包括诸如prop代理,在不同场景下处理各种UX的组合之类的概念,甚至还揭示了每个React开发人员都应注意的一些陷阱。

这就是他们页面上的样子。正如你在左侧的侧菜单中所看到的,有很多信息:

2020年为React开发人员提供的22种神奇工具

15. folderize

folderize是一个不到7天前发布的VS Code扩展。它使你可以将组件文件转换为组件文件夹结构,你的React组件仍然是一个组件,它现在只是转换成了一个目录。

例如,假设你正在创建一个React组件,该组件将文件作为显示有用信息(如其元数据)的props。

元数据组件的逻辑占用了很多行,所以你决定把这个拆成一个单独的文件。但是,当你决定这样做时,现在你有了两个相互关联的文件。

因此,如果你的目录如下所示:

2020年为React开发人员提供的22种神奇工具

你可能想要像 Apples一样将 FileView.js 和 FileMetadata.js 抽象到目录结构中,尤其是在考虑添加更多与 FileScanner.js 之类的文件相关的组件时。

这就是folderize为你所做的,以便它们可以具有类似于以下的结构:

2020年为React开发人员提供的22种神奇工具

16. React Starter Projects

这是一个很棒的React启动程序项目列表,你可以在一个页面上全部查看。所以,如果你是那种觉得同时面对一大堆选项很有用的人,那么这个就是适合你的。

一旦你看到一个你喜欢的入门项目,你就可以简单地克隆这个资源库,并为你即将到来的应用做你自己的修改。

但是,并不是所有的都要通过克隆资源库来使用,因为其中有些是要安装的,这就成了你的项目的依赖。

这样可以更轻松地获取更新并保持项目整洁。

页面样子如下:

2020年为React开发人员提供的22种神奇工具

17. Highlight Updates

这可以说是任何人在开发工具箱中最重要的工具。Highlight Updates是React DevTools扩展的一个功能,它可以让你看到你的页面中哪些组件在不必要地重新渲染。

2020年为React开发人员提供的22种神奇工具

它可以帮助你在开发页面时发现瓶颈,并使其更容易,因为它们会将严重的重新呈现问题着色为橙色或红色。

除非你的目标是构建一个平庸的应用程序,否则为什么不希望这个美丽的东西站在你的身边?

18. React Diff Viewer

React Diff Viewer是使用Diff和React制作的简单美观的文本diff查看器。这支持诸如拆分视图,内联视图,单词差异,行高亮显示等功能。

如果你试图将此功能嵌入到您的笔记(如Boostnote)中,并对其进行定制,使其更适合你的应用程序(主题颜色、文档与故事书演示的组合,等等),那么这将非常有用。

2020年为React开发人员提供的22种神奇工具

19. JS.coach

我最常用于查找与React相关的资料的站点是JS.coach。它快速,简单,不断更新,并且始终为我提供所有项目所需的结果。

他们最近添加了React VR标签,这很棒!

2020年为React开发人员提供的22种神奇工具

20. Awesome React

GitHub Awesome React开源库列出了一系列与React相关的精彩内容。

我可能会忘记其他网站,而仅从此链接学习React。你会发现大量有用的资源,这些资源肯定会帮助你构建出色的React应用!

21. Proton Native

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

它是Electron的替代产品,并具有一些简洁的功能,包括:

  • 与React Native的语法相同。
  • 与现有的React库一起使用,例如Redux。
  • 跨平台。
  • 原生组件。Electron没有。
  • 兼容所有正常的Node.js包。

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

22. Devhints React.js Cheatsheet

一个很好的React备忘单,尽管它缺少React Hooks。不用担心,我将为React v16.8 +创建备忘单,请继续关注。

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2019-11-01 10:30:37

Reac测试工具开源

2019-10-25 10:21:10

React 工具JavaScript

2024-02-14 08:00:00

ChatGPTReact人工智能

2018-02-01 11:12:12

Web开发Python

2020-09-25 17:31:43

JavaScript开发技术

2020-06-05 14:38:25

开发人员职位开发

2021-11-30 17:37:14

ReactRedux

2020-06-09 07:57:47

前端开发代码

2012-07-20 10:46:44

Web

2019-09-24 09:37:38

软件JavaScriptWindows

2020-01-09 11:46:02

DevOps安全开发 Akamai

2020-01-06 17:45:13

GitJavaScriptCSS

2018-06-26 09:00:00

前端WebAngular

2009-04-03 10:00:56

2018-07-27 15:30:32

编程语言PHP工具

2021-10-27 10:43:24

开发技能代码

2019-06-03 14:20:30

Java数据库大数据工具

2013-06-05 10:16:53

2021-08-07 15:38:07

开发Java工具

2020-06-28 09:56:48

.NET开发工具
点赞
收藏

51CTO技术栈公众号