Storybook 是在開發模式下 與 您的應用程式一起執行的. 它可以幫助您構建 UI 元件,並與 應用程式的 業務邏輯和上下文 隔離開來. 本期"學習 Storybook"適用於 React; Vue和Angular
版本即將推出.
整個頁面 -> 拿出各種元件 -> 分隔出 每個元件 /
元件組合
用來測試與文件說明
我們需要按照幾個步驟設定 Storybook 環境. 首先,我們想要使用Create React App (CRA) 快速設定我們的環境,並啟用Storybook和 jest-笑話 測試我們建立的應用. 讓我們執行以下命令:
# 建立應用:
npx create-react-app taskbox
cd taskbox
# 加入 Storybook:
npx -p @storybook/cli sb init
我們可以快速檢查,我們的應用程式的各種命令是否正常工作:
# 執行 測試引擎(Jest):
yarn test
# 啟動 storybook 在埠:6006 :
yarn run storybook
# 啟動 前端 頁面 在埠:3000:
yarn start
我們的三個前端應用程式模式: 自動化測試 (Jest) ,元件開發 (Storybook) 和 應用程式本身.
根據您正在處理的應用程式的哪個部分,您可能希望同時執行其中一個或多個. 由於我們目前的重點是建立單個 UI 元件,因此我們將堅持執行 Storybook.
本例子Taskbox
重用了 GraphQL 和 React Tutorial 示例應用中的設計元素,所以我們不需要在本教程中編寫 CSS. 我們只需將 LESS 編譯為單個 CSS 檔案, 並將其包含在我們的應用程式中. 複製和貼上這個編譯的 CSS根據 CRA的規則 進入 src/index.css 檔案.
我們還需要新增 字型和圖示資料夾到了src/assets
資料夾. 新增 樣式和靜態資源 後,應用程式會奇奇怪怪的. 沒關係. 因為我們還沒有開發應用程式. 現在我們開始構建我們的第一個元件!