[译] 5 款工具助力 React 快速开发

[译] 5 款工具助力 React 快速开发

本文将会介绍 5 款工具,可加速 React UI 组件和应用程序的开发工作。

React 非常适合快速开发具有出色的交互式 UI 的应用程序。React 组件是创建用于开发不同应用的隔离的、可复用的模块的很棒的方法。。

虽然一些最佳实践有助于开发更好的应用程序,但正确的工具可以使开发过程更快。以下是 5(+)个实用的工具,可以帮助我们加速组件和应用程序的开发。

欢迎你发表评论并提出建议。

1. Bit

Bit 是一个开源平台,用于使用组件构建应用程序。

使用 Bit,你可以组织来自不同应用程序和项目的组件(无需任何重构),并使其可以在构建新功能和应用程序时被发现、使用、开发和协作。

Bit 上共享的组件可自动地通过 NPM/Yarn 安装,或与 Bit 本身一起使用。后者使你能够同时开发来自不同项目的组件,并轻松更新(并合并)它们之间的更改。

为了使组件更容易被发现,Bit 为组件提供了可视化渲染,测试结果(Bit 独立运行组件的单元测试)和从源代码本身解析的文档。

使用 Bit,你可以更快地开发多个应用程序和进行团队协作,并将你的组件用作新功能和项目的构建块。

2. StoryBook / Styleguidist

Storybook 和 Styleguidist 是在 React 中快速开发 UI 的环境。两者都是加速 React 应用程序开发的绝佳工具。

两者之间存在一些重要的差异,这些差异也可以组合在一起以完成你的组件开发系统。

使用 Storybook,你可以在 JavaScript 文件中编写 stories。使用 Styleguidist,你可以在 Markdown 文件中编写示例。Storybook 一次显示一个组件的变化,而 Styleguidist 可以显示不同组件的多种变化。Storybook 非常适合显示组件的状态,而 Styleguidist 对于不同组件的文档和演示非常有用。

下面是一个简短的纲要。

StoryBook

Storybook 是 UI 组件的快速开发环境。

它允许你浏览组件库,查看每个组件的不同状态,以及交互式开发和测试组件。

StoryBook 可帮助你独立于应用程序开发组件,这也有助于提高组件的可重用性和可测试性。

你可以浏览库中的组件,修改其属性,并通过热加载在网页上获得组件的即时效果。可以在这里找到一些流行的例子

不同的插件可以帮助你更快地开发,从而缩短代码调整到视觉输出之间的周期。StoryBook 还支持 React NativeVue.js

Styleguidist

React Styleguidist 是一个组件开发环境,它具有热重载的开发服务器和在线样式指南,列出组件的 propTypes 并显示基于 .md 文件的可编辑的用法示例。

它支持ES6,Flow 和 TypeScript,并且可以使用开箱即用的 Create React App。自动生成的使用文档可以让 Styleguidist 充当团队不同组件的文档门户。

3. React devTools

这个官方的 React Chrome devTools 扩展程序可以让你在 Chrome 开发者工具里查看 React 组件的层次结构。它也可以作为 FireFox 附加组件使用。

使用 React devTools,你可以在操作组件树时查看并编辑组件的 props 和 state。此功能可以让你了解组件更改如何影响其他组件,以帮助你使用正确的组件结构和分离方式来设计 UI。

这个扩展程序的搜索栏可让你快速查找和检查所需的组件,从而节省宝贵的开发时间。

查看适用于 Safari,IE 和 React Native 的独立应用程序

4. Redux devTools

Chrome 扩展程序(和 FireFox 附加组件)是一个开发时间程序包,是 Redux 开发工作流程的利器。它允许你检查每个 state 和 action payload,重新计算“分阶段”的 actions。

你可以将 Redux DevTools 扩展程序 与任何处理状态的体系结构集成。每个 React 组件的本地状态可以有多个存储或不同的实例。你甚至可以通过“时间旅行”来取消 actions(可以观看 Dan Abramov 的 视频)。日志记录 UI 本身甚至可以自定义为 React 组件。

5. Boilerplates & Kick-Starters

虽然这些并不完全是开发者工具,但它们有助于快速创建 React 应用程序,同时节省构建和其他配置的时间。虽然 React 有许多入门套件,但这里有一些最好的。

当与预制组件(在 Bit 或其他来源上)结合使用时,你可以快速创建应用程序结构并将组件组合到其中。

Create React App (50k stars)

这个广泛使用且受欢迎的项目可能是快速创建新 React 应用程序并从头开始运行的最有效方法。

此软件包封装了新 React 应用程序所需的复杂配置(Babel,Webpack等),因此你可以节省新建应用程序所需的这段时间。

要创建新应用程序,只需运行一个命令即可。

1
npx create-react-app my-app

此命令在当前文件夹中创建名为 my-app 的目录。
在目录中,它将生成初始项目结构并安装传递依赖项,然后你就可以简单地开始编码了。

React Boilerplate (18k stars)

Max Stoiber 的这个 React 样板文件模板为你的 React 应用程序提供了一个启动模板,该模板专注于离线开发,并在考虑到了可扩展性和性能。

它的快速脚手架有助于直接从 CLI 创建组件、容器、路由、选择器和 sagas —— 以及它们的测试,而 CSS 和 JS 的更改可以立即反映出来。

与 create-react-app 不同,这个样板文件不是为初学者设计的,而是为经验丰富的开发人员提供的。使用它可以管理性能、异步、样式等等,从而构建产品级的应用程序。

React Slingshot (8.5k stars)

Cory House 的这个极好的项目是 React + Redux 入门套件/样板,带有Babel、热重载、测试和 linting 等等。

与 React Boilerplate 非常相似,这个入门套件专注于快速开发的开发人员体验。每次点击“保存”时,更改都会热重载,并且会运行自动化测试。

该项目甚至包括一个示例应用,因此你无需阅读太多文档即可开始工作。

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

作者

清秋

发布于

2018-12-27

更新于

2021-03-13

许可协议

评论