值得了解的6大React元件文件化工具（推薦收藏）

本篇文章推薦讓React元件如文檔般展示的6大工具。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

如果沒有人能夠理解並找到如何使用我們的元件，那它們有什麼用呢？

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

更多程式設計相關知識，請造訪：

程式設計入門！ ！

以上是值得了解的6大React元件文件化工具（推薦收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！