3个工具来记录你的React组件,像个专家一样

为这项特殊任务设计的不同工具的快速概述

照片:SigmundonUnsplash

有可能,如果你是一个开发者,你讨厌记录你的代码。我说的不是经典的//这个函数将用户保存到数据库中的saveUser函数上面的注释。相反,我说的是写有用的、冗长的、详细的关于你工作的文档。

我们都在某些时候讨厌这样做,因为毕竟感觉我们没有产生任何东西,相反,我们在浪费时间在现在没有人需要的东西上。

这是一种常见的感觉,而且是错误的。

文档是需要的,特别是对于那些将被他人重复使用的复杂系统。在这种情况下,我们谈论的是UI组件,但我们也可以讨论任何可共享的东西。如果别人要使用你的代码,那么你非常需要确保你在设计和编写代码时的每一个想法都被写下来。这是你确保你的库的用户了解它是如何工作的唯一方法(因为他们了解你是如何--最重要的是,为什么--这样构建它)。

让我们快速看一下一些工具,它们可以帮助你减少写那些讨厌的文档的影响,同时产生一些对你和其他人有用的东西。

1.用Bit记录(和分享)组件

Bit是一个开源工具(与Bit.dev的远程托管平台进行了本地集成),可以帮助你创建和分享原子组件。这意味着什么?你可以从头开始建立独立的组件,或者提取你的代码部分,并在Bit服务器(如Bit.dev)上作为独立组件共享。这最后一点(没有双关的意思!)是至关重要的,因为它允许你从一个已经在进行的项目中提取代码,并对其进行扩展和发布,就好像它是一个完全独立的第三方依赖。

除此之外,Bit还为Bit.dev上共享的每个组件自动生成文档。它解析TypeScript类型,并用相关的TSDocs注释来丰富它们。

如果你碰巧在组件的目录下有一个README文件,它也会确保整合它。

例如,这个在Bit上共享的日期选择器组件将生成以下文档(由README文件和 "收获的 "属性表组成)。

bit.dev/nexxtway/re…

在这下面,你还可以看到前面提到的详细的代码例子和收获的道具。

bit.dev/nexxtway/re…

当然,不要忘了第一张截图中可编辑代码旁边的实时小部件,它提供了一个完美的预览,你将会把什么集成到你的项目中。有时这比数百页的技术细节要好得多。

如果你正在寻找一种方法来自动生成大部分的文档,或者至少,自动格式化而不需要你做 "很多",那么Bit绝对是一个选择。特别是如果你把它整合到你的开发生命周期中,那么你就可以利用它提供的除文档之外的其他一切。

2.故事书

现在,如果在另一方面,你想创建一个完整的打击网站,使你的用户能够审查你的所有组件,那么Storybook绝对是一个有趣的选择,你可能想看看。

这里的重点是,你不只是要记录和分享一个单一的组件,而是要做一个组件库(一组共享相同设计原则的相关组件)。那么在这种情况下,Storybook的集成方法可能正是你需要的。

看看下面的屏幕截图。

任何试图了解如何使用你的组件的用户都会很高兴地看到,他们可以很容易地找到他们正在寻找的组件,通过实时预览来检查它,甚至可以乱用道具来了解它们如何影响最终的结果。

现在,不要误会我的意思,这很好,但它需要一些工作。这并不像Storybook会阅读你的代码并自己想出那种美妙的交互式用户界面。你必须花时间去做。幸运的是,这并不难,而且它有令人难以置信的良好记录(如预期)。他们的入门指南超级清晰,容易跟上,所以在决定放弃它之前,请确保你查看它,因为它看起来像一个很大的工作。

如果你想设计一个复杂的设计系统,Storybook绝对是你的首选。

3.GitHub Pages + Docsify

现在,听我说完。

如果你想把孤立的或仅有的几个组件记录在一起,Bit会做得非常棒。如果你正在建立一个庞大的设计系统,Storybook将是你的首选。

但如果你处于中间位置呢?如果你有一套组件并想自定义你的文档的外观呢?如果自动生成的、每个人看起来都一样的、有点来自比特的感觉是不够的呢?

那么你最好的选择就是Github页面

为什么这么说呢?

因为有可能,如果你在做这个,你已经在那里有你的代码了。另外,Github网页是一项免费服务,它不仅为你提供了一个预先设计好的网站供你定制,而且是完全免费的。你得到的文档和主机,都是免费的。

在此基础上。

  • 发布新的内容就像向 repo 推送一个提交一样简单。
  • 编写文档可以用Markdown来完成,所以你不必担心HTML,比如说,根本不需要。
  • 如果你愿意,你可以免费定制域名(你确实需要为域名付费,但Github页面不会像其他服务通常收取的那样为你添加自定义域名)。

假设在此基础上,你再加上像Docsify这样的东西,它允许你创建简单而强大的文档网站。在这种情况下,你有一个完美的组合,准备好摇滚了

我喜欢Docsify的主要功能之一是,它将包括一个强大的全文搜索到你的静态网站。我的意思是,拜托,谁不希望自己的文档有这样的功能?

这种方法的缺点是,你必须自己编写文档。没有自动生成的草稿,你可以用它来启动这个过程。如果你不喜欢写文档,这可能是一个问题,但话又说回来,最好的文档通常是手动创建的。

你喜欢为你的项目写什么样的文档?从你的代码注释中自动生成的文档?完整的详细的交互式文档,确切地显示了如何使用它?或者是自定义页面,其中有你认为在每种情况下都有意义的文本?

你在使用其他工具吗?请在评论中分享它们

位:建立更好的UI组件库

向你问好 比特.它是组件驱动的应用开发的第一大工具。

有了Bit,你可以把你的应用程序的任何部分创建为一个可组合和可重复使用的 "组件"。你和你的团队可以共享一个组件工具箱,以便更快、更一致地共同构建更多的应用程序。

  • 创建和组成 "应用构件"。UI元素、完整功能、页面、应用程序、无服务器或微服务。使用任何JS栈。
  • 在团队中轻松分享和重复使用组件。
  • 跨项目快速更新 组件
  • 让困难的事情变得简单。单体设计系统微前端

试用Bit开源和免费→。

了解更多


3个工具来记录你的React组件,就像一个专家一样最初发表在Medium上的Bits and Pieces,在那里人们通过强调和回应这个故事来继续对话。

猜你喜欢

转载自juejin.im/post/7129290732778553351
今日推荐