本篇文章給大家推薦讓React組件如文檔般展示的6大工具铝量。有一定的參考價值倘屹，有需要的朋友可以參考一下，希望對大家有所幫助慢叨。
如果沒有人能夠理解并找到如何使用我們的組件纽匙，那它們有什么用呢？
React鼓勵我們使用組件構(gòu)建模塊化程序拍谐。模塊化給我們帶來了非常多的好處哄辣，包括提高了可重用性。然而赠尾，如果你是為了貢獻和復(fù)用組件力穗，最好得讓你的組件容易被找到、理解和使用气嫁。你需要將其文檔化当窗。
目前，使用工具可以幫助我們實現(xiàn)自動化文檔工作流程寸宵，并使我們的組件文檔變得豐富崖面、可視化和可交互。有些工具甚至將這些文檔組合為共享組件的工作流程的組成部分梯影。
為了輕而易舉地將我們的組件文檔化巫员，我收集了一些業(yè)界流行的工具，如果你有推薦的組件也可以評論留言甲棍。
1. Bit
共享組件的平臺
Bit不僅是一個將組件文檔化的工具简识，它還是一個開源工具，支持你使用所有文件和依賴項封裝組件感猛，并在不同應(yīng)用程序中開箱即用地運行它們七扰。
在Bit，你可以跨應(yīng)用地共享和協(xié)作組件陪白，你所有共享組件都可以被發(fā)現(xiàn)颈走，以便你的團隊在項目中查找和使用，并輕松共享他們自己的組件咱士。
在Bit中立由，你共享的組件可以在你們團隊中的組件共享中心找到，你可以根據(jù)上下文序厉、bundle體積锐膜、依賴項搜索組件，你可以非持茫快地找到已經(jīng)渲染好的組件快照枣耀，并且選擇使用它們。
當你進入組件詳情頁時，Bit提供了一個可交互的頁面實時渲染展示組件捞奕，如果該組件包含js或md代碼牺堰，我們可以對其進行代碼修改和相關(guān)調(diào)試。
找到想要使用的組件后颅围，只需使用NPM或Yarn進行安裝即可伟葫。你甚至可以使用Bit直接開發(fā)和安裝組件，這樣你的團隊就可以協(xié)作并一起構(gòu)建院促。
通過Bit共享組件筏养，就不需要再使用存儲庫或工具，也不需要重構(gòu)或更改代碼常拓，共享渐溶、文檔化、可視化組件都集中在一起弄抬，并且也能實現(xiàn)開箱即用茎辐。
快速上手：
Share reusable code components as a team · Bit
teambit/bit
2. StoryBook & Styleguidist
StoryBook和StyleGuidist是非常棒的項目，可以幫助我們開發(fā)獨立的組件掂恕，同時可以直觀地呈現(xiàn)和文檔化它們拖陆。
StoryBook 提供了一套UI組件的開發(fā)環(huán)境。它允許你瀏覽組件庫懊亡，查看每個組件的不同狀態(tài)依啰，以及交互式開發(fā)和測試組件。在構(gòu)建庫時店枣，StoryBook提供了一種可視化和記錄組件的簡潔方法速警，不同的AddOns讓你可以更輕松地集成到不同的工具和工作流中。你甚至可以在單元測試中重復(fù)使用示例來確認細微差別的功能艰争。
StyleGuidist是一個獨立的React組件開發(fā)環(huán)境并且具備實時編譯指引坏瞄。它提供了一個熱重載的服務(wù)器和即時編譯指引桂对，列出了組件propTypes并展示基于.md文件的可編輯使用示例甩卓。它支持ES6，F(xiàn)low和TypeScript蕉斜，并且可以直接使用Create React App逾柿。自動生成的使用文檔可以幫助Styleguidist作為團隊不同組件的文檔門戶。
類似的工具還有UiZoo
3. Codesandbox, Stackblitz & friends
組件在線編譯器是一種非常巧妙的展示組件和理解他們?nèi)绾芜\行的工具宅此。當你可以將它們組合為文檔的一部分（或作為共享組件的一部分）時机错，在線編譯器可幫助你快速了解代碼的工作方式并決定是否要使用該組件。
Codesandbox是一個在線編輯器父腕，用于快速創(chuàng)建和展示組件等小項目弱匪。創(chuàng)建一些有趣的東西后，你可以通過共享網(wǎng)址向他人展示它璧亮。CodeSandbox具有實時預(yù)覽功能萧诫，可以在你輸入代碼時顯示運行結(jié)果斥难，并且可以集成到你的不同工具和開發(fā)工作流程中去。
Stackblitz是一個由Visual Studio Code提供支持的“Web應(yīng)用程序在線IDE”帘饶。與Codesnadbox非常相似哑诊，StackBlitz是一個在線IDE，你可以在其中創(chuàng)建通過URL共享的Angular和React項目及刻。與Codesandbox一樣镀裤，它會在你編輯時自動安裝依賴項，編譯缴饭，捆綁和熱重載暑劝。
其他類似工具：
11 React UI Component Playgrounds for 2019
4. Docz
Docz使你可以更輕松地為你的代碼構(gòu)建Gtabsy支持的文檔網(wǎng)站。它基于MDX（Markdown + JSX）颗搂，即利用markdown進行組件文檔化铃岔。基本上峭火，你可以在項目的任何位置編寫.mdx文件毁习，Docz會將其轉(zhuǎn)換并部署到Netlify，簡化你自己設(shè)計的文檔門戶的過程卖丸。非常有用不是嗎纺且？
pedronauck / docz
5. MDX-docs
MDX-docs允許你使用MDX和Next.js記錄和開發(fā)React組件。您可以將markdown與內(nèi)聯(lián)JSX混合以展示React組件稍浆。像往常一樣寫下markdown并使用ES導(dǎo)入語法在文檔中使用自定義組件载碌。內(nèi)置組件會將JSX代碼塊渲染為具有可編輯代碼并提供實時預(yù)覽功能，由react-live提供支持衅枫。
6. React Docgen
React DocGen是一個用于從React組件文件中提取信息的CLI和工具箱嫁艇，以便生成文檔。它使用ast-types和@babel/parser將源解析為AST弦撩，并提供處理此AST的方法步咪。輸出/返回值是JSON blob/JavaScript對象。它通過React.createClass益楼，ES2015類定義或功能（無狀態(tài)組件）為React組件提供了一個默認的定義猾漫。功能十分強大。
reactjs/react-docgen
callstack/component-docs
更多編程相關(guān)知識感凤，請訪問：編程入門Ｃ踔堋！
