使React元件如文件般展示的6大工具

React鼓勵我們用元件來構建模組程式。模組化為我們帶來了很多好處，包括提高了可重用性。但是，如果您想貢獻和重用元件，那麼最好讓您的元件易於查詢、理解和使用。您必須把它記錄下來。當前，使用工具可以幫助我們實現文件工作流程的自動化，使我們的元件文件變得豐富、視覺化、互動性強，一些工具甚至把這些文件組合成共享元件的工作流程的組成部分，今天小編就為大家介紹一下行業界流行的工具。

1。Bit

共享元件的平臺

Bit不僅是一個將元件文件化的工具，它還是一個開源工具，支援你使用所有檔案和依賴項封裝元件，並在不同應用程式中開箱即用地執行它們。

在Bit，你可以跨應用地共享和協作元件，你所有共享元件都可以被發現，以便你的團隊在專案中查詢和使用，並輕鬆共享他們自己的元件。

在Bit中，你共享的元件可以在你們團隊中的元件共享中心找到，你可以根據上下文、bundle體積、依賴項搜尋元件，你可以非常快地找到已經渲染好的元件快照，並且選擇使用它們。

瀏覽bit。dev上的元件

當你進入元件詳情頁時，Bit提供了一個可互動的頁面實時渲染展示元件，如果該元件包含js或md程式碼，我們可以對其進行程式碼修改和相關除錯。

找到想要使用的元件後，只需使用NPM或Yarn進行安裝即可。你甚至可以使用Bit直接開發和安裝元件，這樣你的團隊就可以協作並一起構建。

透過Bit共享元件，就不需要再使用儲存庫或工具，也不需要重構或更改程式碼，共享、文件化、視覺化元件都集中在一起，並且也能實現開箱即用。

快速上手：Sharereusablecodecomponentsasateam·Bit

teambit/bit

2。StoryBook&Styleguidist

StoryBook和StyleGuidist是非常棒的專案，可以幫助我們開發獨立的元件，同時可以直觀地呈現和文件化它們。

StoryBook提供了一套UI元件的開發環境。它允許你瀏覽元件庫，檢視每個元件的不同狀態，以及互動式開發和測試元件。在構建庫時，StoryBook提供了一種視覺化和記錄元件的簡潔方法，不同的AddOns讓你可以更輕鬆地整合到不同的工具和工作流中。你甚至可以在單元測試中重複使用示例來確認細微差別的功能。

StyleGuidist是一個獨立的React元件開發環境並且具備實時編譯指引。它提供了一個熱過載的伺服器和即時編譯指引，列出了元件propTypes並展示基於。md檔案的可編輯使用示例。它支援ES6，Flow和TypeScript，並且可以直接使用CreateReactApp。自動生成的使用文件可以幫助Styleguidist作為團隊不同元件的文件門戶。

類似的工具還有UiZoo

3。Codesandbox，Stackblitz&friends

元件線上編譯器是一種非常巧妙的展示元件和理解他們如何執行的工具。當你可以將它們組合為文件的一部分（或作為共享元件的一部分）時，線上編譯器可幫助你快速瞭解程式碼的工作方式並決定是否要使用該元件。

Codesandbox是一個線上編輯器，用於快速建立和展示元件等小專案。建立一些有趣的東西后，你可以透過共享網址向他人展示它。CodeSandbox具有實時預覽功能，可以在你輸入程式碼時顯示執行結果，並且可以整合到你的不同工具和開發工作流程中去。

Stackblitz是一個由VisualStudioCode提供支援的“Web應用程式線上IDE”。與Codesnadbox非常相似，StackBlitz是一個線上IDE，你可以在其中建立透過URL共享的Angular和React專案。與Codesandbox一樣，它會在你編輯時自動安裝依賴項，編譯，捆綁和熱過載。

其他類似工具：

11ReactUIComponentPlaygroundsfor2019

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。ReactDocgen

ReactDocGen是一個用於從React元件檔案中提取資訊的CLI和工具箱，以便生成文件。它使用ast-types和@babel/parser將源解析為AST，並提供處理此AST的方法。輸出/返回值是JSONblob/JavaScript物件。它透過React。createClass，ES2015類定義或功能（無狀態元件）為React元件提供了一個預設的定義。功能十分強大。

reactjs/react-docgen

callstack/component-docs