React开发工具有哪些
本篇内容主要讲解“React开发工具有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React开发工具有哪些”吧!
永州网站建设公司成都创新互联公司,永州网站设计制作，有大型网站制作公司丰富经验。已为永州千余家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的永州做网站的公司定做！
1. Webpack Bundle Analyzer
有没有想过你的应用程序中的哪些软件包或部分占据了所有空间?好了，你可以使用Webpack Bundle Analyzer进行查找，该软件包将帮助你确定占用最大空间的输出文件。
它将创建一个实时服务器，并向你提供一个交互式的、显示包内容的树形图。有了这个工具，你就可以看到渲染的文件的位置、它们的gzip大小、解析后的大小以及它们的父/子文件。
你可以根据你所看到的优化你的React应用!这是它的屏幕截图：
从上图中我们可以清楚地看到pdf软件包在应用程序中占据了最大的空间，但这也占用了屏幕上的最大空间。这非常有用。
不过，截图是最小的，你还可以通过有用的选项来查看它的更多细节，比如 generateStatsFile: true，还可以选择生成一个静态的HTML文件，保存在开发环境以外的地方，供以后使用。
2. React-Proto
React-Proto是面向开发人员和设计人员的原型制作工具。它是桌面软件，因此你必须先下载并安装该软件然后再使用。
这是此软件正在使用的示例：
该应用程序可以让你声明props及其类型，在树状图中查看你的组件，导入背景图片，定义它们为有状态或无状态，定义它们的父组件是什么，放大/缩小，并将你的原型导出到一个新的或现有的项目中。
该App似乎更适合Mac用户，但对于Windows用户仍然可以正常使用。
完成用户界面的映射后，你可以选择导出到现有项目或新项目。如果选择导出到现有项目并选择根目录，它将把它们导出到 ./src/components，如下所示：
这是我们在例子中用到的一个组件的例子：
React-Proto在GitHub上获得了2,000颗星。
不过，就我个人而言，我认为这个应用需要更新，需要更多的工作，尤其是随着React Hooks的发布。
3. Why Did You Render
Why Did You Render 可以让 React 通知你可避免的重新渲染。
这非常有用，不仅可以指导你进行项目的性能修复，还可以帮助你了解React的工作方式。而且，当你对React的工作原理有了更好的了解时，它将使你成为一个更好的React开发人员。
你可以通过声明一个额外的静态属性 whyDidYouRender 并将其值为 true 来将侦听器附加到任何自定义组件：
import React from 'react' import Button from '@material-ui/core/Button' const Child = (props) => const Child2 = ({ children, ...props }) => ( {children}
) Child2.whyDidYouRender = true const App = () => { const [state, setState] = React.useState({}) return (
{JSON.stringify(state, null, 2)} setState({ hello: 'hi' })}> Submit
Child #2 ) } export default App
这样做之后，你的控制台才会发出令人难以置信的令人讨厌的警告：
不要误解，把它当作一件好事。充分利用那些烦人的消息，这样你就可以修复那些浪费的重新渲染，那些烦人的消息最终会离你而去!
4. Create React App
大家都知道，Create React App 是开始开发React项目的最快方法(开箱即用，具有现代功能)。
有什么比 npx create-react-app容易?
我们中有些人可能不知道的是如何使用CRA创建TypeScript项目，你要做的就是在末尾添加 --typescript：
npx create-react-app --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 Traced Component
} } const EnhancedTracedComponent = traceLifecycle(TracedComponent) const App = () => ( )这将显示可视化器，如下所示：
https://github.com/Oblosys/react-lifecycle-visualizer
但是，这样做的缺点是，它目前仅适用于类组件，因此尚不支持Hooks。
6. Guppy
Guppy是React的好朋友，免费的应用程序管理器和任务运行器，它在桌面上运行。
他们似乎会优先考虑那些在React中进行开发的新手。不过，这可能对高级开发人员也有帮助。
它为React开发人员经常面对的许多典型任务提供了友好的图形用户界面，例如创建新项目，执行任务和管理依赖项。
Windows支持已于2018年8月添加，因此你可以放心，它是跨平台的。
这是Guppy的样子：
https://github.com/joshwcomeau/guppy
7. react-testing-library
我一直都很喜欢react-testing-library，因为在编写单元测试时感觉不错。这个包提供了React DOM测试实用程序，可以鼓励良好的测试实践。
该解决方案旨在解决测试你的实现细节的问题，而不是像用户看到的那样测试React组件的输入/输出。
测试实现细节并不是确保应用程序按预期工作的有效方法。
当然，你会对你的组件所需要的数据的获取方式、使用哪种排序方式等等，都会更有信心。但是，如果必须更改实现的方式以指向另一个数据库，则单元测试将失败，因为它们是耦合逻辑的实现细节。
这是react-test -library解决的一个问题，因为在理想的情况下，你只希望你的用户界面能够正常工作，并且最终能够正确地呈现出来。
只要这些组件仍能提供预期的输出，如何将数据获取到这些组件并不重要。
以下是使用此库如何放置测试的示例代码：
// 提升辅助函数(但不是vars)以在测试用例之间重用 const renderComponent = ({ count }) => render( , ) it('renders initial count', async () => { // 在每次测试中渲染新的实例，以防止泄漏状态。 const { getByText } = renderComponent({ count: 5 }) await waitForElement(() => getByText(/clicked 5 times/i)) }) it('increments count', async () => { // 在每次测试中渲染新的实例，以防止泄漏状态。 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开发人员可以用来调试其应用程序的最有用的工具之一。
9. Bit
Bit是使用组件库(例如Material-UI或Semantic UI React)的一个很好的选择。
利用Bit，你可以探索数千个开源组件，并可以使用它们来构建项目。
https://bit.dev/
有许多不同的React组件供任何人使用，包括标签、按钮、图表、表格、导航栏、下拉菜单、加载旋转器、日期选择器、面包屑、图标、布局等。
这些都是由其他React开发人员上传的，就像你和我一样。
但是，还有一些有用的实用程序，例如格式化日期。
10. Storybook
如果你还不了解Storybook，我强烈建议你开始使用它，如果你想更轻松的体验构建UI组件，那么你可以开始使用它。
该工具启动了具有即时支持的热重载功能的实时开发服务器，你可以在其中独立地实时开发React组件。
这其中的另一个好处是，你可以使用目前已有的开源插件，将你的开发体验提升到一个全新的高度。
例如，使用Storybook README包，你可以在开发React组件的同时创建README文档，以便在同一页面上直接用于生产。
这足以用作常规文档页面：
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)，可以很容易地获得一堆代码示例，帮助你翻新下一个项目。
开始编辑项目后，你将开始意识到要使用的实际上是功能强大的VS Code编辑器。
14. React Bits
React Bits 是一个 React 模式、技术、技巧和窍门的集合，所有这些都是以类似于在线文档的形式写成的，在这里你可以快速访问不同的设计模式和技术、反模式、风格设计、用户体验变化，以及其他有用的 React 相关材料，所有这些都在同一个标签页上。
他们有一个GitHub仓库，目前有9923星。
一些示例包括诸如prop代理，在不同场景下处理各种UX的组合之类的概念，甚至还揭示了每个React开发人员都应注意的一些陷阱。
这就是他们页面上的样子。正如你在左侧的侧菜单中所看到的，有很多信息：
15. folderize
folderize是一个不到7天前发布的VS Code扩展。它使你可以将组件文件转换为组件文件夹结构，你的React组件仍然是一个组件，它现在只是转换成了一个目录。
例如，假设你正在创建一个React组件，该组件将文件作为显示有用信息(如其元数据)的props。
元数据组件的逻辑占用了很多行，所以你决定把这个拆成一个单独的文件。但是，当你决定这样做时，现在你有了两个相互关联的文件。
因此，如果你的目录如下所示：
你可能想要像 Apples一样将 FileView.js 和 FileMetadata.js 抽象到目录结构中，尤其是在考虑添加更多与 FileScanner.js 之类的文件相关的组件时。
这就是folderize为你所做的，以便它们可以具有类似于以下的结构：
16. React Starter Projects
这是一个很棒的React启动程序项目列表，你可以在一个页面上全部查看。所以，如果你是那种觉得同时面对一大堆选项很有用的人，那么这个就是适合你的。
一旦你看到一个你喜欢的入门项目，你就可以简单地克隆这个资源库，并为你即将到来的应用做你自己的修改。
但是，并不是所有的都要通过克隆资源库来使用，因为其中有些是要安装的，这就成了你的项目的依赖。
这样可以更轻松地获取更新并保持项目整洁。
页面样子如下：
17. Highlight Updates
这可以说是任何人在开发工具箱中最重要的工具。Highlight Updates是React DevTools扩展的一个功能，它可以让你看到你的页面中哪些组件在不必要地重新渲染。
它可以帮助你在开发页面时发现瓶颈，并使其更容易，因为它们会将严重的重新呈现问题着色为橙色或红色。
除非你的目标是构建一个平庸的应用程序，否则为什么不希望这个美丽的东西站在你的身边?
18. React Diff Viewer
React Diff Viewer是使用Diff和React制作的简单美观的文本diff查看器。这支持诸如拆分视图，内联视图，单词差异，行高亮显示等功能。
如果你试图将此功能嵌入到您的笔记(如Boostnote)中，并对其进行定制，使其更适合你的应用程序(主题颜色、文档与故事书演示的组合，等等)，那么这将非常有用。
19. JS.coach
我最常用于查找与React相关的资料的站点是JS.coach。它快速，简单，不断更新，并且始终为我提供所有项目所需的结果。
他们最近添加了React VR标签，这很棒!
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开发工具有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
当前题目：React开发工具有哪些
浏览路径：
http://chengdu.cdxwcx.cn/article/jscehj.html
