React Developers的10个超实用神奇工具

时间: 2019-08-12阅读: 202标签: 工具

React是一个用于构建用户界面的JavaScript库。但是,很多人都不知道,其实有非常多的有助于我们更好地使用React,提升用户开发体验的优秀工具。如果您还没有使用过React,或者有可能对使用它感兴趣,当他们问你为什么要使用这个库时,你会怎么说?

除了告诉他们React的库有多棒(这应该是第一件事)之外,我还想提到开源社区创建的工具这部分,它将极大地提升你的体验感,甚至让你觉得兴奋。



1. Webpack Bundle Analyzer

有没有想过你的应用程序的哪些部分占用了大部分空间?那么,你可以找到Webpack Bundle Analyzer。该软件包将帮助您识别占用空间最多的输出文件。

它将创建一个实时服务器,并为您提供捆绑包内容的交互式树形图可视化。通过这个工具包,您可以看到所呈现文件的位置,gzip大小,解析大小以及子/父文件。

你可以根据你看到的内容优化你的React应用程序!可以清楚地看到pdf包占用应用程序中的最大空间,同时,它也占据了屏幕上最显著的位置。这个非常有用。


2. React-Proto

React-Proto是开发人员和设计人员的原型工具。它是桌面软件,因此您必须在使用前下载并安装该软件。

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

该应用程序似乎更适合Mac用户,但Windows用户其实也是可以的。

就个人而言,React-Proto其实有一些没有那么方便的地方,比如,如果您导入背景图像,缩小,然后继续删除背景图像,您将无法放大。

放大的唯一方法是重新导入背景图像,然后在放大后将其删除。但即便有着这样小小的不便,我仍然觉得它是个值得推荐的工具,因为同类工具几乎很难再找到可以与它相提并论的了。

而且,开源是这个应用程序最大的好处之一,因为这些目前的小缺陷有可能在未来制作趋势开源的存储库列表中的得以改善。


3.Why Did You Render

Why Did You Render猴子补丁可通知您有关可避免的重新渲染。

这非常有用,不仅可以指导您完成项目的性能修复,还可以帮助您了解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
12 Child2.whyDidYouRender = true
13
14 const App = () => {
15  const [state, setState] = React.useState({})
16
17  return (
18    <div>
19      <Child>{JSON.stringify(state, null, 2)}</Child>
20      <div>
21        <Button type="button" onClick={() => setState({ hello: 'hi' })}>
22          Submit
23        </Button>
24      </div>
25      <Child2>Child #2</Child2>
26    </div>
27  )
28 }
29
30 export default App

把这些警告当作一件好事。有效利用这些消息,这样你就可以修复那些因不必要重新渲染而浪费的资源!


4.Creat React App

很多人都知道,Create React App是开始开发React项目最快捷的方式(开箱即用的现代功能)。

什么可能比这更容易npx create-react-app <name>?

所有关于Medium build React接口的教程几乎都create-react-app只是因为它快速而简单。

我们有些人可能不知道的是如何使用CRA 创建TypeScript项目。你所要做的就是在最后添加上:

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
22 const EnhancedTracedComponent = traceLifecycle(TracedComponent)
23
24 const App = () => (
25  <VisualizerProvider>
26    <EnhancedTracedComponent />
27    <Log />
28  </VisualizerProvider>
29 )

但是,这个工具有一个缺点是它目前仅适用于类组件,因此尚不支持Hook。


6.Guppy

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

他们似乎优先考虑才开始时候用React的人。但是,它对高级开发人员也可能有用。

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

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


7.react-testing-library

我一直很喜欢react-testing-library,因为在你编写单元测试时它会让你感觉到“一切都刚刚好”。该软件包提供了React DOM测试实用程序,可鼓励良好的测试实践。

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

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

当然,您将能够对如何获取组件所需的数据、使用哪种排序方法等更有信心。但是,如果必须更改实现方法以指向不同的数据库,则单元测试将失败,因为它们是耦合逻辑的实现细节。

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

以下是使用此库进行测试的示例代码:

 1 // Hoist helper functions (but not vars) to reuse between test cases
 2 const renderComponent = ({ count }) =>
 3  render(
 4    <StateMock state={{ count }}>
 5      <StatefulCounter />
 6    </StateMock>,
 7  )
 8
 9 it('renders initial count', async () => {
10  // Render new instance in every test to prevent leaking state
11  const { getByText } = renderComponent({ count: 5 })
12
13  await waitForElement(() => getByText(/clicked 5 times/i))
14 })
15
16 it('increments count', async () => {
17  // Render new instance in every test to prevent leaking state
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

使用组件库(如Material-UI或Semantic UI React)的一个很好的替代方法是Bit。

Bit允许您浏览数以千计的开源组件,并允许您使用它们来构建项目。

它有许多不同的React组件可供任何人使用,包括选项卡,按钮,图表,表格,导航栏,下拉列表,加载微调器,日期选择器,面包屑,图标,布局等。

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

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


10.Storybook

如果您想要更轻松地构建UI组件,但你还不了解Storybook,我强烈建议您使用看看。

该工具启动了一个实时开发服务器,支持开箱即用的热重新加载,您可以在其中单独实时开发React组件。

另一个很棒的事情是,您可以使用现有的开源附加组件将您的开发体验提升到一个全新的水平。

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

原文链接:https://medium.com/better-programming/22-miraculous-tools-for-react-developers-in-2019-7d72054e2306 

 

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/4646

7款最好的笔记工具

编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。

18 个提高生产力的开发者工具

本篇介绍一些提高生产力的工具,包括网站、浏览器插件、VSCode插件和命令行工具~如果你想要安装一个新的依赖,这个网站可以查看这个依赖的大小、是否支持 tree-shaking 等各项指标

Dojo Build 简介

Dojo 提供了一套强大的命令行工具,让构建现代应用程序更加简单。可以自动创建包(Bundle),可以使用 PWA 在本地缓存文件,可以在构建阶段渲染初始的 HTML 和 CSS

面向软件开发人员的7款产品路线图工具

产品路线图软件可以帮助软件产品经理完成核心的规划任务,并向项目团队成员和相关人员通报目标和状态。产品工具可以帮助团队制定战略、确定目标的优先级、安排要完成的工作,并使每个人在整个产品生命周期中步调一致

Web前端开发需要掌握了解的工具、技术

Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言。尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要

prettier代码格式化工具

两种linter都可以实现fix功能,所谓fix就是将原代码转化为符合一定规则的新代码。虽然linter工具fix之后的代码,解决了大部分问题,但可能有些地方并不符合我们的阅读代码的习惯,比如一行代码过长。

5款web前端开发利器

工欲善其事必先利其器,没有好的调试工具或方法,移动端真机下的 debug 简直是前端的噩梦。但是有了这些好用的方法,我想各位优秀的前端兄弟们,帮妹子修复个小 bug 还是 so easy 的!

Web 设计的CSS 工具有哪些?

当涉及到简化 CSS 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 CSS 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。

六款主流ETL工具介绍

ETL(Extract-Transform-Load的缩写,即数据抽取、转换、装载的过程),对于企业或行业应用来说,我们经常会遇到各种数据的处理,转换,迁移,所以了解并掌握一种etl工具的使用,必不可少

程序员必备的高效率工具

产品人员必备利器,但是程序员也需要画一下自己的图。Axure RP Pro 是一个产品经理必备的交互原型设计工具;GitMind是一款优秀的免费思维导图软件,能够帮助你将想法和灵感以清晰的思维导图的形式记录下来

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全