react用什么开发工具？下面本篇文章给大家介绍一下关于React的开发工具，以帮助你选择以及带你了解如何用它们来使你更充分的使用框架，希望对大家有所帮助。
1、Chrome React Dev Tools
Chrome React Dev Tools是一个Chrome 扩展程序。
安装完成后，打开Chrome的开发人员工具你就能看到多出了Components和Profiler选项卡，“Components”选项能帮助你查看屏幕上组件列表以及从其他组件派生出的子组件，你能够选择检查甚至编辑组件的状态和属性。使用“Profiler”选项卡，你也可以评估应用程序的性能。
2、React Sight
除了上面的扩展外，我们需要提到另一个Chrome 扩展程序React Sight，它可以帮助你在检查React应用程序时发挥作用。
在安装DevTools后，在你已经在React Dev Tools和React Sight的扩展设置中启用了“允许访问文件URL”选项，你就可以在DevTools种找到一个新的名为“React Sight”的标签，当你运行本地程序时，你将可以使用React Sight以可视化树状的形式查看和创建不同的组件，这将让你能够方便的理解它们的连接方式，在你把鼠标悬停在元素上时，就可以看到它们当前的状态和属性。
3、React Extension Pack (for VS Studio)
到目前为止，Visual Studio可能是JavaScript开发人员最喜爱的IDE之一。这里说的是之一而不是唯一，因为有很多不错的其他IDE也非常棒，例如Sublime，IntelliJ和Vim。
但在这里我们就不再展开了，这所以这里提到了VS，是因为VS背后有着强大的社区，所以让我们看看React Extension Pack。
本质上，它是一组为完成与React相关任务的扩展包，在一般情况下，VS在解析和在做一般JS需求时做的很出色，但这个小工具套包将它带入了一个新的高度。在这个包里，你将找到：
- ReactJS代码片段：它提供了40个React代码片段，它可以满足你所有通用需求以及34个propTypes特定的代码片段。它能避免你浪费大量时间重复劳作，从而提高日常的工作效率。
- ES Lint：添加了对命令行工具的支持。它集成到你的IDE中，并帮助你改进语法，设置自己的编码样式，甚至在某些情况下能为你自动修复错误。
- npm：当你需要安装新的插件、重新启动服务器或是运行某些npm特定命令时，你都必须从IDE跳到终端，这可能会令你有一些累，所以这个扩展增加了直接从IDE直接运行npm命令的功能。
- JS ES6片段：这个插件将包含40多个代码片段，这将是你提高开发效率的绝对必要条件。
- 搜索node_modules：使用这个扩展，你可以轻松找到模块并在编辑器中将其打开。
- rel="nofollow"
npm IntelliSense：使用此模块，你可以轻松列出所有已安装的模块，快速搜索它们，并插入正确的代码片段以将其导入代码中。 - Path intelliSense：最后，与上一个扩展名内联，在当你不是处理大型项目的唯一一人时，记住所有路径和文件名变得非常困难和麻烦。此扩展名将帮助您自动完成本地导入的路径。
一共是7个扩展，它们分别为项目提供了一些价值，安装这个扩展包，你可以从VS的命令面板使用以下命令（使用CTRL + P打开它）中轻松进行安装：
ext install jawand<mark style="color:transparent">来源gaodaimacom搞#代%码网</mark>arajbir.react-vscode-extension-pack
4、Storybook
React是为了帮助你以非常直观的方式编写UI而设计的。但必须通过写代码才能创建可视的组件并不是真正自然的事情，这就是为什么我们通常会从代码跳到浏览器，然后再回到代码。
Storybook是一个开源工具，它可以用来开发自己的UI组件。它不仅仅只是一个代码库，他们的在线UI编辑器允许你开发、检查并最终以交互的方式展示你的作品(这在开发可视化组件时是至关重要的)。
为了将Storybook安装到你现有的React项目中，你所要做的就是：
$ npx -p @storybook/cli sb init
该命令将检查你项目的结构，并尝试了解你正在使用的视图层（因为Storybook支持React以外的其他视图层，例如Vue，Angular等）。
命令完成后，您可以通过运行以下命令运行Storybook：
$ npm run storybook
5、React Styleguideist
这是另一个非常有趣的交互式工具，可让您创建和展示您的UI组件。
请仔细查看上图。在右侧，你可以看到实际的代码，它在左侧生成UI。你可以通过这种方式展示UI，甚至可以通过直接在显示的界面上更改代码来对其进行测试和编辑UI。
为了将其包含到你的React项目中，你所需要做的就是(假设您已经安装了webpack，并且您使用Create React App创建了项目)：
$ npm install --save-dev react-styleguidist
然后运行以下命令启动你的样式设置服务器：
$ npx styleguidist server
如果你想了解有关在项目上使用Styleguideist的更多react的相关知识，请查阅 搞代码网 ！！
以上就是react用什么开发工具？的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：react用什么开发工具？
