这款免费工具可让您为 React 组件创建世界一流的文档。

全文可在 Aviyel 免费阅读（在 Aviyel 上查看之前，请先在这里点个赞）。

各位开发者们，大家好！我猜你们肯定都了解React，而且很喜欢它，但让我们回到你们还不了解 React 的时候。那时你们可能不知道从何入手，所以可能看过一些 React 入门视频，结果发现自己深陷于冗长的教程泥潭。但看看现在的你们！你们已经精通 React，可以轻松地一次性为 React 组件编写文档。

为什么开发者需要文档？

当一款软件能够解决问题并让其他人（包括开发者）的工作更轻松时，它就是一款优秀的软件。但真正驱动其拥有庞大用户群的，是其背后的开发者。试想一下，如果 React 不存在，而你只是在一两个周末的时间里开发了它，那么恐怕没多少人会去尝试，你的技术最终会被遗忘（这是最糟糕的情况）。除非你把你的技术记录下来，否则其他人很可能会开发出比你更好的类似技术，从而吸引更多的用户和开发者。

文档其实就是一份关于如何使用某项技术的报告（格式没有严格限制），通常由技术的创建者编写，以便其他人能够轻松上手并掌握其用法。试想一下，如果你为自己开发的某项技术（这项技术不一定非得像整个 React 库或 Angular 框架那样庞大）编写的精美文档被Clément Mihailescu或Akshay Saini等知名软件工程师注意到，并且他们试用后非常喜欢，那会是怎样一番景象？接下来，你的代码可能会变得流行起来，你或许能加入心仪的公司，或者将这项技术发展成一家初创公司，最终获得成功和财富。如果你的文档是开源的，它不仅能拓宽社区发展和协作的新途径，还能让你结识业内大佬。

创建优质文档很难吗？

制作像下面这些一样既酷炫又专业的文档很难吗？如果你想手动实现所有花哨的 UI 组件，那当然很难。你有没有看过Expo（一个基于 React Native 的工具链）的文档？他们不只是写一堆文字描述如何使用组件，而是提供了可编辑的组件代码。这意味着用户可以直接在网站上编辑显示的代码片段（例如，将“color = black”改为“color = yellow”），更改会立即显示在屏幕上。这样，用户就能以交互的方式理解组件的行为，这对开发者来说是理想的学习方式。你也可以参考Flutter和Material UI，从中汲取灵感，创建更好的文档。

编写 React 组件文档的最佳方法是什么？

你可以拥有全世界的财富，聘请最优秀的网页开发人员，手工打造一个精美的文档网站。但说实话，这真的非常耗时耗力，而且要保证文档各部分的风格一致，简直是件苦差事。等你真正着手整理的时候，整个团队可能已经筋疲力尽了。好在，开源社区投入了大量精力，开发出一款工具，可以帮助你创建高质量、专业、强大且简洁的软件文档。在你以为我要让你付费使用这款软件之前，请放心，我即将分享的这款工具完全免费！图片来源：Medium

Docz 就是个好东西。Docz 是一款流行的开源工具，它技术先进，任何人都能轻松创建简洁且高度可定制的软件文档网站。你可以把它想象成用 Canva 来制作精美的海报。它在GitHub上拥有 21.7 万颗星，这在软件开发领域可是个了不起的成就。以下是 Docz 的一些功能和亮点：

• 它基于 Gatsby 构建，Gatsby 是一个热门的开源框架，用于创建速度极快的静态网站，这些网站实际上是渐进式 Web 应用 (PWA)。而且，您无需了解 Gatsby 即可使用此工具。
• 基于 MDX。MDX 是 Markdown + JSX 的结合体。现在，您无需理解复杂的符号即可创建 Markdown 文档，只需使用一系列简单易用的类似 JSX 的语法即可。
• 支持 TypeScript。它提供原生 TypeScript 支持。人人都喜欢 TypeScript。如果你不喜欢，可能是因为你使用 TypeScript 的时间不够长，或者你还没有接触过大型代码库，因为几乎所有大型 JavaScript 项目都是用 TypeScript 构建的。

快速入门指南

在向您展示如何使用 Docz 之前，如果您时间充裕，请务必阅读官方文档，以便对该工具有一个全面的了解。如果时间有限，请继续阅读。

• 将 Docz 添加为项目的依赖项。根据您使用的包管理器（npm/yarn），选择以下命令之一。请注意，您应用中的 react 和 react-dom 版本必须高于 16.8.0。否则，此方法将无法正常工作，请升级它们。确保已安装 react 和 react-dom 才能运行这些命令；

yarn add docz

npm install docz

• 在项目中的任何位置添加 .mdx 文件，无需遵循任何文件架构或约定。您可以直接复制粘贴此代码。

---
name: Button
route: /
---

import { Playground, Props } from 'docz'
import Button from './Button'

# Button

<Props of={Button} />

## Basic usage

<Playground>

  <Button type="submit">Click me</Button>

  <Button>No, click me</Button>

</Playground>

只剩下几个简单的步骤了。在 Aviyel 上免费查看完整文章。我保证，这款免费工具将在您的软件开发之旅中以您意想不到的方式为您提供帮助。