【譯】讓React組件如文檔般展現的6大工具

原文 6 Tools for Documenting Your React Components Like a Pro

若是沒有人可以理解並找到如何使用咱們的組件，那它們有什麼用呢？

React鼓勵咱們使用組件構建模塊化程序。模塊化給咱們帶來了很是多的好處，包括提升了可重用性。然而，若是你是爲了貢獻和複用組件，最好得讓你的組件容易被找到、理解和使用。你須要將其文檔化。

目前，使用工具能夠幫助咱們實現自動化文檔工做流程，並使咱們的組件文檔變得豐富、可視化和可交互。有些工具甚至將這些文檔組合爲共享組件的工做流程的組成部分。

爲了垂手可得地將咱們的組件文檔化，我收集了一些業界流行的工具，若是你有推薦的組件也能夠評論留言。

1. Bit

共享組件的平臺

Bit不只是一個將組件文檔化的工具，它仍是一個開源工具，支持你使用全部文件和依賴項封裝組件，並在不一樣應用程序中開箱即用地運行它們。
在Bit，你能夠跨應用地共享和協做組件，你全部共享組件均可以被發現，以便你的團隊在項目中查找和使用，並輕鬆共享他們本身的組件。

在Bit中，你共享的組件能夠在大家團隊中的組件共享中心找到，你能夠根據上下文、bundle體積、依賴項搜索組件，你能夠很是快地找到已經渲染好的組件快照，而且選擇使用它們。

瀏覽bit.dev上的組件

當你進入組件詳情頁時，Bit提供了一個可交互的頁面實時渲染展現組件，若是該組件包含js或md代碼，咱們能夠對其進行代碼修改和相關調試。

找到想要使用的組件後，只需使用NPM或Yarn進行安裝便可。你甚至可使用Bit直接開發和安裝組件，這樣你的團隊就能夠協做並一塊兒構建。

經過Bit共享組件，就不須要再使用存儲庫或工具，也不須要重構或更改代碼，共享、文檔化、可視化組件都集中在一塊兒，而且也能實現開箱即用。

快速上手：
Share reusable code components as a team · Bit
teambit/bit

2. StoryBook & Styleguidist

StoryBook和StyleGuidist是很是棒的項目，能夠幫助咱們開發獨立的組件，同時能夠直觀地呈現和文檔化它們。

StoryBook 提供了一套UI組件的開發環境。它容許你瀏覽組件庫，查看每一個組件的不一樣狀態，以及交互式開發和測試組件。在構建庫時，StoryBook提供了一種可視化和記錄組件的簡潔方法，不一樣的AddOns讓你能夠更輕鬆地集成到不一樣的工具和工做流中。你甚至能夠在單元測試中重複使用示例來確認細微差異的功能。

StyleGuidist是一個獨立的React組件開發環境而且具有實時編譯指引。它提供了一個熱重載的服務器和即時編譯指引，列出了組件propTypes並展現基於.md文件的可編輯使用示例。它支持ES6，Flow和TypeScript，而且能夠直接使用Create React App。自動生成的使用文檔能夠幫助Styleguidist做爲團隊不一樣組件的文檔門戶。

相似的工具還有UiZoo

3. Codesandbox, Stackblitz & friends

組件在線編譯器是一種很是巧妙的展現組件和理解他們如何運行的工具。當你能夠將它們組合爲文檔的一部分（或做爲共享組件的一部分）時，在線編譯器可幫助你快速瞭解代碼的工做方式並決定是否要使用該組件。

Codesandbox是一個在線編輯器，用於快速建立和展現組件等小項目。建立一些有趣的東西后，你能夠經過共享網址向他人展現它。CodeSandbox具備實時預覽功能，能夠在你輸入代碼時顯示運行結果，而且能夠集成到你的不一樣工具和開發工做流程中去。

Stackblitz是一個由Visual Studio Code提供支持的「Web應用程序在線IDE」。與Codesnadbox很是類似，StackBlitz是一個在線IDE，你能夠在其中建立經過URL共享的Angular和React項目。與Codesandbox同樣，它會在你編輯時自動安裝依賴項，編譯，捆綁和熱重載。

其餘相似工具：
11 React UI Component Playgrounds for 2019

4. Docz

Docz使你能夠更輕鬆地爲你的代碼構建Gtabsy支持的文檔網站。它基於MDX（Markdown + JSX），即利用markdown進行組件文檔化。基本上，你能夠在項目的任何位置編寫.mdx文件，Docz會將其轉換並部署到Netlify，簡化你本身設計的文檔門戶的過程。很是有用不是嗎？
pedronauck / docz

5. MDX-docs

MDX-docs容許你使用MDX和Next.js記錄和開發React組件。您能夠將markdown與內聯JSX混合以展現React組件。像往常同樣寫下markdown並使用ES導入語法在文檔中使用自定義組件。內置組件會將JSX代碼塊渲染爲具備可編輯代碼並提供實時預覽功能，由react-live提供支持。

jxnblk / MDX-文檔

6. React Docgen

React DocGen是一個用於從React組件文件中提取信息的CLI和工具箱，以便生成文檔。它使用ast-types和@babel/parser將源解析爲AST，並提供處理此AST的方法。輸出/返回值是JSON blob/JavaScript對象。它經過React.createClass，ES2015類定義或功能（無狀態組件）爲React組件提供了一個默認的定義。功能十分強大。

reactjs/react-docgen
callstack/component-docs