关于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 = trueconst 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 casesconst 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。