加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

2019 年,React 开拓职员应该行使的 22 个神奇器材

发布时间:2019-10-30 01:29:34 所属栏目:建站 来源:JAVA柯尼塞克丶
导读:正如我们所知, React 是 JavaScript 库,用于构建出色的用户界面。然而,并不是每小我私人都在行使沟通的器材或知道有这么一些精彩的器材,可以让 Reacat 开拓体验变得越发风趣和起劲主动。 假如各人还没有效过 React,可能各人的伴侣也许有乐趣行使它,那么

Bit 让我们试探数以千计的开源组件,并应承我们行使它们来构建项目。

2019 年,React 开拓职员应该行使的 22 个神奇器材

有许多差异的 React 组件,可供任何人行使,包罗选项卡、按钮、图表、表格、导航条、下拉菜单、加载旋转器、日期选择器、面包屑导航(breadcrumbs)、图标、机关等等。

这些是由其他 React 开拓职员上传的,这些开拓职员就跟你我一样。

可是,也有一些可用的适用措施,如名目化日期之间的间隔。

10. Storybook

假如你还不知道 Storybook ,并但愿可以或许更轻易地构建 UI 组件,那么,我凶猛提议你开始行使它。

该器材启动一个及时开拓处事器,支持开箱即用的热重载,我们可以在个中独立地及时开拓 React 组件。

关于这个尚有一件很棒的工作是,我们可以行使现有的开源插件,把我们的开拓体验晋升到一个全新的程度。

好比,借助 Storybook README 包,我们可以建设 README 文档,同时,在统一页面上开拓用于出产的 React 组件。

这足以作为平凡的文档页面了:

2019 年,React 开拓职员应该行使的 22 个神奇器材

11. React Sight

各人有没有想过,本身的应用措施在流程图中看起来是什么样子? React Sight 可以让各人可视化本身的 React 应用措施,借助整个应用措施的及时组件条理布局树泛起。

它还支持 回响路由器(react-router) 、 Redux ,以及 React Fiber 。

借助该器材,各人可以将鼠标悬停于节点上,它们是指向那些跟树中直接跟它们有关的组件的链接。

假如各人在查察功效时碰着坚苦,那么,可以在地点栏中键入 chrome:extensions,查找 React Sight 器材箱,然后点击 Allow access to file URLs 开关,如下所示:

2019 年,React 开拓职员应该行使的 22 个神奇器材

12. React Cosmos

React Cosmos 是用于建设可重用 React 组件的开拓器材。

它扫描项目中的组件,并使我们可以或许:

用属性、上下文和状态的恣意组合来渲染组件。

模仿每个外部依靠项(如:API 相应、localStorage 等等)。

在和运行中的实例举办交互时,及时查察应用措施的状态演变。

13. CodeSandbox

这毫无疑问是最好的可用器材之一,可以让我们亲手行使 React 的速率比眨眼还要快(好吧,大概没有那么快)。

这个被称为 CodeSandbox 的器材是一个在线编辑器,它让我们从原型建设 web 应用措施以举办陈设——全部这些都来自该网站。

在早期阶段, CodeSandbox 最初只支持 React,可是,此刻已经扩展到如 Vue和 Angular 等库的附加启动模板。

它们还通过行使 Gateby 或 Next.js 等常用静态站点天生器建设项目,支持启动下一个 React web 项目。

谈到 CodeSandbox,有许多好对象可以讲。起首,它很是活泼。

假如各人必要试探一下人们为利便各人起见正在构建的一些项目,那么简朴所在击一下 explore 就可以会见一大堆代码示例,来辅佐各人更新下一个项目:

2019 年,React 开拓职员应该行使的 22 个神奇器材

一旦各人开始编辑一个项目,就会心识到,将要行使的现实上是个强盛的 VS Code编辑器。

我很想写一篇文章全面先容一下现在我们可以在 CodeSandbox 行使的成果,可是,看起来,这项事变 已经完成了 。

14. React Bits

React Bits 是 React 模式、技能、能力和秘诀的荟萃,都是用相同于在线类文档的名目编写的,各人可以快速地会见差异的计划模式和技能、反模式、样式、UX 变体和其他有辅佐的与 React 相干的原料,全部这统统都在统一个选项卡上。

他们有个 GitHub 存储库 ,今朝有 9923 个星标。

一些示例包罗一些观念,如属性署理、用于在差异场景中处理赏罚差异 UX 的组合,乃至果真了一些每个 React 开拓职员都应该知道的一些陷阱。

这就是在他们页面上的感受。正如各人可以在左侧菜单上看到的,上面有许多信息:

2019 年,React 开拓职员应该行使的 22 个神奇器材

15. folderize

folderize 是一个 VS Code 扩展,宣布的时刻还不到 7 天。它使我们可以或许把一个组件文件转换为组件文件夹布局。我们的 React 组件仍将是个组件,只是此刻它转换成一个目次罢了。

好比,假设我们在建设一个 React 组件,它把文件作为属性以表现有效的信息,好比它们的元数据。

用于元数据组件的逻辑占用了许多行,因此,我们抉择把这个拆分成一个单独的文件。可是,当我们抉择这么做的时辰,我们就有了两个彼此关联的文件。

因此,假如我们有个像这样的目次:

2019 年,React 开拓职员应该行使的 22 个神奇器材

我们也许想把 FileView.js 和 FileMetadata.js 抽象到一个目次布局中,就像 Apples 那样——尤其是,假如我们正在思量添加更多与 FileScanner.js 等文件相干的组件。

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读