7个针对React开发人员的一流工具

由Facebook开发的React JavaScript库是一种基于声明式的，基于组件的，用于构建Web UI的技术，近年来已受到开发人员的青睐。

为了提供开发人员的效率和灵活性 ，React（又名React.js）于2013年5月首次公开亮相。自那时以来，该开源库在GitHub上的排名已超过135,000次，而分支则超过25,000次。

[ 同样在InfoWorld上：React，Angular和Vue的15种绝佳替代方案 ]

毫不奇怪，伴随着React的工具生态系统如雨后春笋般涌现，包括一个IDE和许多框架。 对于希望在构建Web应用程序时利用React的开发人员，这里提供了7种关键工具。

反应视线

React Sight是一个Chrome浏览器扩展程序，提供实时查看React应用程序的组件层次结构树的视图。 它支持React Router和Redux。 React Sight搜索React渲染器并修补渲染器以收集有关状态更改的数据。 React Sight的创建者之所以创建该工具是因为他们看到了需要一种工具来提供应用程序结构的可视化表示。 目的是易于使用，React Sight包含允许您仅查看要查看的组件的过滤器。

您可以从Chrome网上应用店安装React Sight 。

React开发人员工具

通过Facebook的React团队， React Developer Tools可以检查React树，包括组件层次结构和状态。 React Developer Tools 4于2019年8月发布，可用于Chrome，Firefox和（Chromium）Edge。 Facebook承诺将在新版本中显着提高性能并改善导航。 功能包括：

• 完全支持React Hooks，使您无需编写类即可使用状态和其他React功能。 提供了检查嵌套对象的支持。
• 一种从树中筛选组件的机制，以便更轻松地浏览深度嵌套的层次结构。 默认情况下，HTML <div>类的主机节点是隐藏的，但是可以禁用该过滤器。

在Chrome和Firefox中， React Developer Tools可作为浏览器扩展使用。 也可以使用独立外壳通过NPM安装：

npm install -g react-devtools@^4

反应物

Reactide是用于React Web开发的专用IDE 。 运行集成的Node.js服务器和自定义浏览器模拟器，Reactide用户无需大惊小怪地配置服务器或构建工具。 他们也不必在浏览器，IDE和服务器之间来回切换。 实时重新加载功能使开发人员可以直接在开发环境中跟踪更改。 其他功能包括：

• 可视组件树，用于管理整个应用程序的状态。
• 一个集成的终端，用于在Unix的bash和Windows的cmd运行命令。
• 开箱即用的热模块重新加载。

您可以从项目网站下载Reactide 。 Reactide可用于MacOS，Windows和Debian或Ubuntu Linux。

[ 同样在InfoWorld上：3个JavaScript库代替jQuery ]

Redux

Redux是JavaScript应用程序的可预测状态容器，可帮助开发人员编写可在不同环境中一致运行的应用程序，包括Web客户端，Web服务器和本机应用程序。 Redux与React或任何其他视图库一起使用。 Redux的大小为2 KB（包括依赖项），并利用附加组件生态系统。 Redux的功能包括：

• 集中化应用程序状态和逻辑，启用诸如执行/重做和状态持久化之类的功能。
• 跟踪应用程序状态的更改时间，原因，位置以及更改方式。
• 可以将错误报告发送到服务器的“时间旅行调试”。

您可以通过NPM安装Redux：
npm install —save redux

Next.js

被称为“企业的反应框架”的Next.js提供了诸如服务器端渲染，基于文件系统的路由以及导出静态站点之类的功能。 该框架针对较小的构建尺寸和更快的编译进行了优化。 开发人员可以使用Webpack模块捆绑器和Babel JavaScript编译器。 Next.js 9于2019年7月发布，具有以下功能：

• 基于文件系统的应用程序动态路由。
• 零配置TypeScript支持。
• API路由，用于构建后端应用程序端点，同时利用热重载和统一的构建管道。

可以在GitHub上找到Next.js的设置说明 。

常绿

Evergreen是用于构建“企业级” Web应用程序的React UI框架。 Evergreen将在React UI原语之上构建的一组可组合的React组件与它自己的UI设计语言结合在一起。 该框架基于以下原则：将来的需求永远无法预测，只能为之准备。 大多数组件都在允许自定义的盒式原语上实现。 Evergreen促进了预期新需求的系统的开发。

您可以从GitHub 下载Evergreen 。

[ 通过InfoWorld的App Dev Report新闻通讯了解软件开发中的热门话题 ]

Craft.js

Craft.js是一个React框架，用于构建可扩展的拖放式页面编辑器。 页面编辑器提供了一种提供出色用户体验的方法，但是用Craft.js背后的开发人员的话来说，构建一个页面可能是一种“可怕的”体验。 Craft.js旨在简化流程。

Craft.js模块化了页面编辑器的构建块，添加了拖放系统，并处理了如何呈现，移动和更新用户组件。 开发人员以与在React中设计任何其他前端应用程序相同的方式来设计编辑器，并且可以精确控制页面编辑器的行为和外观。 提供了一个API，用于维护和操纵编辑器状态。

您可以从GitHub 下载Craft.js 。

From: https://www.infoworld.com/article/3434567/6-top-notch-tools-for-react-developers.html