熟练使用提升前端游戏的工具是一项有丰厚回报的投资。在去看一些最好的之前反应工具,让我们首先探讨为什么这些工具将使您的生活更轻松,您的应用更强。

什么是React开发工具?

反应是一个基于组件的库,用于创建带有各种开发工具的ui:库、框架和简化React开发的扩展。从帮助您避免编写样板代码的代码生成器,如Create React应用程序,到测试实用程序,如Jest和Enzyme,这些工具为您提供了加强代码的方法,同时节省安装时间。尽管它们都有相同的React,但这些工具在很多方面都不同。找到最适合您的工具取决于您的编程风格和偏好。

React开发工具列表

这个列表着重于改善开发人员体验的工具。在本文中,我们排除了许多组件库、编辑器和编辑器插件,而支持简化应用程序设置、样式、检查和测试的库。

创建React App.

毫无疑问,最着名的反应工具之一,创建React App.(CRA)是开始开发反应项目的最快方式。使用单个命令,您可以启动整个React项目,文件夹结构和所有。

首先,您需要在系统上安装Node.js。除此之外,如果你已经安装了npm,你就不需要再安装其他东西了——这个工具会带来它需要的所有支持模块。执行如下命令即可:

npx create-react-app <名称>

(如果你不喜欢npx,你也可以使用npm或yarn命令的相同选项。)

像CRA一样,本文所涵盖的许多其他工具希望您遵循标准项目结构,以便他们有效地工作。这是一个方法CRA闪耀:它为您提供的配置是一个干净的坚实结构,可以使用所有其他React开发人员工具。

对于那些更喜欢保持你的人的人JavaScript强类型,你可以很容易地使用CRA来创建TypeScript项目,而不必手动将语言添加到已经存在的项目中。在创建项目时,只需添加-template typescript选项:

NPX Create-React-App -template类型签名

您现在准备开始您的服务器并开发您的应用程序。只需在您的应用程序目录中运行npm。这将启动一个本地服务器,每当您编辑时重新加载代码。有很多很酷的事情要了解这个工具,所以退房完整的文件

用工具喜欢,即使是最自满的React开发人员也会发现遵循测试的最佳实践很容易。Enzyme是Airbnb创建的专门测试React应用程序的工具。它的优点在于它为呈现组件和查找元素以及与元素交互提供的方法。酶不包括在create-react-app生成的应用程序结构中,必须单独安装。

酶还需要一个测试运行器,因为它意味着提供额外的功能,以简化断言、操作和遍历组件的输出。我们建议将酶配对笑话,下面介绍的单元测试运行器。虽然一些开发人员认为这两种工具是竞争对手,但它们是相互补充的中等文章在这个话题。

我们还想提请大家注意,一个Node的断言库和一个浏览器,它可以与酶一起用来测试React应用程序。添加另一个文库有什么好处呢?答案很简单:使用chai-enzyme库使断言更具可读性。这是完整的文档为图书馆。

反应 - I13N.

由雅虎开发!反应 - I13N.简化和扩展插装代码或处理基于事件的功能(如跟踪)的代码。如果没有react-i13n,您就必须在整个应用程序中显式地添加检测代码。在使用该实用工具时,您可以定义想要跟踪的数据模型,该工具可以为您处理信标。

Reft-I13n的大值 - 添加 - Ide仪器树是一个仪器树,其架构镜像您的应用程序的React组件层次结构。此树允许您定义仪器数据,并获取您在内存中所需的所有信息而不是依赖于DOM操作。如果你定义你的插入对于您的首选仪器库,您所要做的就是杠杆反应 - I13N使用现有组件指定哪些组件触发哪些跟踪事件。

笑话

虽然酶非常适合补充测试,但如上所述,我们需要一个测试Runner,一个工具,一个用单元测试执行文件并将其结果写入控制台。笑话是一个由Facebook创建的单元测试框架,用于测试JavaScript服务和响应应用程序。除了它作为测试运行器的功能类似莫卡,它也是一个断言库和模拟库:它可以验证测试结果以及组件与其依赖项的关系。

Jest的易用性,速度和现代功能使其成为一种简单的选择,确保在添加新功能时功能不会破坏。让我们来检查这些外壳的一个功能:快照测试。Jest可以保存组件的呈现快照,并将其与保存在自动生成文件夹中保存的一个快照。为确保初始快照反映预期结果,如果两个不匹配,测试将失败。

虽然Jest和Enzyme都是专门设计来测试React应用程序的,但Jest也可以用于任何其他Javascript应用程序。Jest可以在没有Enzyme的React中使用来渲染组件和测试快照,但我们建议两者一起使用。这里有一些最佳实践测试React应用时。

如果您使用CRA,这是一些好消息:它与Jest捆绑在一起,因此您不需要单独安装它。

反应检查员

而Chrome的延期反应devtools.非常强大,它是专为浏览器设计的。大多数React应用将从相同的功能中受益,这就是原因所在反应检查员提供:Chrome Devtools的实心检查员的电源,无需浏览器。看看他们的故事书开始使用此工具。

React-Json-Inspector

顾名思义,React-Json-Inspector是基于反应的JSON检查器,具有树扩展和快速搜索。如果您不喜欢处理JSON对象或数组并希望简化检查其属性,这是一个很好的选择。这是A.生活示例测试它。它易于使用,但您需要在样式表中包含JSON-Inspector.css。

反应风格的愿意

曾经梦想着对Reach的快速UI开发的环境?反应风格的愿意是一个互动工具,它采用您的React代码并生成一个使可视化的UI进行微风。创建UI后,您不仅可以使用它来展示,而且还可以通过更改渲染版本上的代码来测试和编辑。

如果您使用CRA创建了项目,只需安装Styleguidist并启动服务器。可以在它们的命令中找到这样做的命令文件。看看React Styleguideist网站演示页面查看他们的工具是如何工作的。

JavaScript标准风格

那些害怕造型,缩进和格式化的人会找到一个朋友标准。它不仅仅是一个React开发人员工具:它是一个JavaScript样式指南,LINTER和一个使用简单命令,标准-fix自动格式化代码的格式化程序。它还提前捕获错误 - 没有更多的三重检查。我们建议它作为在项目中强制执行代码质量的最简单方法。

反应视线

对于Visual开发人员来说,生成UI非常适合查看特定组件的样子,但是如何跟踪应用程序的组件层次结构?反应视线允许您通过为整个应用程序呈现一个实时层次结构树来展示您的React应用程序。您可以将鼠标悬停在其节点上,链接到组件并让您查看与树的其余部分的关系。

为react库设计,react Sight也支持相关的库,如react-router和react-redux。与React DevTools一起,React Sight帮助视觉倾斜者检查他们的黑色和白色组件。

要使用React Sight,您需要在安装React DevTools后将其安装为Chrome扩展名。如果您使用本地文件URL,请确保在React Dev工具的扩展设置中启用“允许访问文件URL”,并反应视图。之后,您可以运行您的应用程序或打开任何网站运行反应。

除非发生反应

除了专门用于反应的开发人员工具外,还有许多图书馆和服务,用于连续集成和部署,例外跟踪,指标集,仪表板等。

我们已经提到了React DevTools,它只是众多扩展中的一个Chrome DevTools对于浏览器开发,这就是我们建议您的javascript开发人员想要在框架上应用工具。我们还建议您对像JEST这样的应用程序内的工具上的教育,这些工具可以在JavaScript生态系统中的其他地方应用。

总结

在本文中,我们提供了React开发工具的一般概述,并描述了各种各样的开发阶段的多个经验和真实的。

如果与对您的反应进行影响,并且您喜欢使用现代工具成为更精通和高效的开发人员的想法,我们建议采取专业课程来加深技能,同时坚持最佳实践。这反应Nano188金宝搏安不安全degree计划是一个伟大的选择,您应该想要制作职业变化甚至只是以侧面的爱好开始建设项目。快乐编码!

开始学习