【译】5个工具 帮助你在React中提高开发效率

栏目: IOS · Android · 发布时间: 6年前

内容简介:React非常适合快速开发具有漂亮交互式UI的应用程序。React组件是创建隔离和可重用构建块的好方法,可以用于开发不同应用程序。一些最佳实践有助于开发更好的应用程序,但正确的工具可以使开发过程更快。以下是5(+)个有用的工具,可以加快组件和应用程序的开发效率。5个工具,可以提高 React UI组件和应用程序的开发效率

文章翻译自: blog.bitsrc.io/5-tools-for…

译者注:

  • 文中有一些链接可能需要翻墙食用:blush:

  • 这篇文章中,除了 React devTools 和 Redux devTools,其余的 工具 我之前都没接触过,看过原文后觉得收获很大,所以将它翻译出来,希望可以传播给更多的人。

    • 如果你正在开发业务组件,你会发现:StoryBook 可以帮助你提高不少效率;Bit 可以作为团队中业务组件共享的另一种方案
    • 看完文章的第五点,你会发现原来 开发react应用的脚手架不只有 create-react-app,还有几个可能更适合你目前的开发需求

React非常适合快速开发具有漂亮交互式UI的应用程序。React组件是创建隔离和可重用构建块的好方法,可以用于开发不同应用程序。

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

5个工具,可以提高 React UI组件和应用程序的开发效率

1.Bit

【译】5个工具 帮助你在React中提高开发效率

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

这里有一段介绍 Bit 的视频

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

【译】5个工具 帮助你在React中提高开发效率

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

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

译者注:

我在看完这篇文章之后也去了解了下 Bit(因为我本来觉得 npm 包已经够用了:joy:)。 Bit 的最大优势我觉得由以下几点(有什么错误欢迎大家指正):

  • 使用 npm 包来共享组件的方案需要您新开一个仓库来写组件并发布 npm 包,而 Bit 可以让您不新开一个仓库就可以从任何现有存储库中无缝隔离组件(文件集)并共享它们,在其他项目中您可以使用Bit来导入您所需的组件并进行开发和同步。
  • Bit 的官网提供了可以做交互式预览的playground,您可以在线实时修改代码看到组件的变化,进而判断这个组件是不是符合您的使用预期。

然而,目前 Bit 在 GitHub 上的star数量才3k+,大家可以作为一个辅助工具稍作了解

2. StoryBook / Styleguidist

Storybook 和 Styleguidist 是 React 中快速 UI 开发的环境。两者都是提高 React 应用程序开发效率的绝佳工具。两者之间存在一些重要的差异,您可以把两者组合在一起以完成组件开发系统。

  • 使用Storybook,您可以在JavaScript文件中编写故事。
  • 使用Styleguidist,您可以在Markdown文件中编写示例。

Storybook一次显示一个组件的变体,但Styleguidist可以显示不同组件的多种变体。 Storybook非常适合显示组件的状态,而Styleguidist对于不同组件的文档和演示非常有用。

StoryBook

下面有一个简短的 介绍

【译】5个工具 帮助你在React中提高开发效率

Storybook是UI组件的快速开发环境。 它允许您浏览组件库,查看每个组件的不同状态,以及交互式开发和测试组件。

【译】5个工具 帮助你在React中提高开发效率

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

您可以浏览库中的组件,使用其属性进行播放,并通过网络上的热重新加载获得即时印象。

你可以在这里看一些例子。

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

译者注: 这个真的强推!!!强推!!!

Styleguidist

官网地址

【译】5个工具 帮助你在React中提高开发效率

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

【译】5个工具 帮助你在React中提高开发效率

它支持ES6,Flow和TypeScript,并且可以直接使用Create React App。

自动生成的使用文档意味着你可以使用Styleguidist来充当你们团队中组件的文档入口。

另请参阅Formidable Labs的 React Live 。 此组件渲染环境也用于 Bit的实时组件playground

3. React devTools

【译】5个工具 帮助你在React中提高开发效率

此官方React Chrome devTools扩展程序允许您检查Chrome开发者工具中的React组件层次结构。它也可以作为FireFox附加组件使用。

使用React devTools,您可以检查和编辑组件 props 和 state, 通过组织层次结构树,React devTools可让您了解组件的update如何影响其他组件,以帮助使用正确的组件结构和拆分来设计UI。

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

【译】5个工具 帮助你在React中提高开发效率

您可以在 这里 查看适用于Safari,IE和React Native的独立应用程序。

4. Redux devTools

【译】5个工具 帮助你在React中提高开发效率

此Chrome扩展程序(和FireFox附加组件)是一个开发调试的工具,为您的Redux开发工作提供帮助。它允许您检查每个state和action的payload,重新评估“分阶段”action。

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

5. Boilerplates & Kick-Starters

虽然这些并不完全是devTools,但它们有助于快速设置React应用程序,同时节省构建和其他配置的时间。

React有许多入门套件,这里有一些我觉得值得推荐的。您可以快速创建应用程序结构并将组件组合到其中。

Create React App (50k stars)

【译】5个工具 帮助你在React中提高开发效率

这个项目被广泛使用并且非常受欢迎,如果你要 快速创建一个简单的新React应用程序并直接可以运行 ,它可能是最好用的方法。

此软件包封装了开发一个新的React应用程序所需的复杂配置(Babel,Webpack等),因此您可以节省新应用程序的时间。

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

npx create-react-app my-app
复制代码

此命令在当前文件夹中创建名为my-app的目录。 在目录中,它将生成初始项目结构并安装依赖项,因此您可以直接开始编码。

React Boilerplate (18k stars)

这是 Max Stoiber 为您的React应用程序提供的一个启动模板,该模板专注于 离线开发 ,并在构建时考虑了 可扩展性性能

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

与create-react-app不同,这个样板 不是为初学者设计的 ,而是为经验丰富的开发人员准备的(它提供管理性能,异步,样式等工具)。

React Slingshot (8.5k stars)

Cory House的这个精彩项目是 React + Redux入门套件/模版带有Babel,热重载,测试,linting等等

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

该项目甚至包括一个示例应用程序,因此您可以直接开始工作,而无需过多地阅读文档。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深度解析淘宝运营

深度解析淘宝运营

刘涛 / 电子工业出版社 / 2015-9-1 / 49.00元

淘宝运营,仅有知识是不够的,还需要有系统的运营思路。为帮助广大电商从业者以及众多中小卖家更好地运营店铺,《深度解析淘宝运营》全面阐述了整个店铺运营的重点环节,包括淘宝搜索规则、打造爆款、店铺规划、客户服务、直通车、钻石展位、数据分析等内容。具体操作步骤翔实,并且结合笔者的实际操作经验,将各个环节最本质的一面透彻展现给读者,结合理论与实战,尽可能向读者展示一个最真实的运营核心。《深度解析淘宝运营》没......一起来看看 《深度解析淘宝运营》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具