帮酷LOGO
  • 显示原文与译文双语对照的内容
A collection of Buffer UI React components

  • 源代碼名稱:buffer-components
  • 源代碼網址:http://www.github.com/bufferapp/buffer-components
  • buffer-components源代碼文檔
  • buffer-components源代碼下載
  • Git URL:
    git://www.github.com/bufferapp/buffer-components.git
  • Git Clone代碼到本地:
    git clone http://www.github.com/bufferapp/buffer-components
  • Subversion代碼到本地:
    $ svn co --depth empty http://www.github.com/bufferapp/buffer-components
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 緩衝區組件

    Build Status

    使用反應和CSS模塊的UI組件的共享集合。

    演示:https://bufferapp.github.io/buffer-components/

    若要在項目中使用這裡選項,請在使用部分開始。 如果你想添加到這個庫,跳到組件開發

    用法

    安裝軟體包並保存準確的版本:

    npm install @bufferapp/components -SE

    現在在代碼中,你可以導入特定的組件:

    importButtonfrom'@bufferapp/components/Button';

    要求

    對於組件庫,你需要使用幾個插件和一個有效的web pack配置。

    首先,你需要安裝( 0.14或者更高版本):

    npm i react react-dom -SE

    除了Babel配置( 未記錄),你還需要樣式裝載器 web pack插件:

    npm i style-loader -SDE

    web pack配置應該使用正確的配置,下面是一個示例:

    module.exports= {
     module: {
     loaders: [
     {
     test:/.css$/,
     loaders: [
     'style-loader',
     ],
     },
     ],
     },
    };

    組件開發

    快速啟動

    安裝 node 模塊

    npm i

    開始反應故事簿

    npm start

    打開 http://localhost:9001

    測試

    運行Linter和測試

    npm run test

    運行測試並監視更改

    npm run test-watch

    更新測試快照

    npm run test-update

    注:只有在你手動檢查它們時才提交這些內容

    組件解剖學

    src/# root
    +-- MyComponent/# component root
     `-- index.js # component display logic
     `-- story.js # storybook entry

    版本控制

    major.minor.patch

    考慮了補丁版本

    可以升級而不改變代碼庫

    • 添加組件
    • 向構件添加新的支柱

    考慮次要版本

    升級需要更改代碼才能工作

    • 刪除組件
    • 刪除道具

    考慮主要發行版

    • 主要里程碑( 例如 一套完整的組件)
    • 組件的完整外觀
    • 起到爭論

    常見問題解答

    組件

    在當前實現組件中,所有的組件都是函數和無狀態代碼。

    這意味著UI是一種狀態函數,因為我們使用純函數來構建視圖。

    UI = f(state)

    我如何確定組件的範圍

    這是個很難的問題。 但是一般來說,組件應該足夠簡單,可以跨多個應用程序重用,並且不超過 150行代碼。 如果你不確定的話,這是個不錯的建議。

    開發工作流程 look

    注意:這是的一種方法,但是不一定是構建組件所需的方法。 對於這個工作流,我們創建一個名為 NewComponent的組件。

    • 使用新組件的NAME 創建分支

    注意:也要確保你是最新

    git checkout master
    git pull -r
    git checkout -b task/add-newcomponent
    • 安裝依賴並啟動故事集
    npm i && npm start

    在瀏覽器中打開 http://localhost:9001 插件

    src/
    +-- NewComponent/
    • NewComponent 創建一個故事
    src/
    +-- NewComponent/
     `-- story.js

    用默認的故事填充英鎊的

    // story.jsimportReactfrom'react';import { storiesOf } from'@storybook/react';importNewComponentfrom'./index';storiesOf('Card')
    . add('Default', () => (
     <NewComponent /> ));

    當你看故事簿時,你應該看到一個壞故事( 紅屏)

    • 實現組件
    src/
    +-- NewComponent/
     `-- story.js
     `-- index.js

    使用新組件填充 index.js

    importReactfrom'react';import { calculateStyles } from'../lib/utils';constNewComponent= ({ hovered }) =><div
     style={calculateStyles({
     default:{
     background:'green',
     },
     hovered: {
     background:'red',
     }
     },{
     hovered, // key matches above style key and is activated when value is true })}
     > NewComponent
     </div>;exportdefaultNewComponent;
    • 第一次運行測試

    重要的是要注意,這創建了組件的快照。 將來運行的所有測試都將針對該快照進行測試,以確保它們沒有更改。

    npm t
    • 提交 !
    git add .git commit -m "Add NewComponent"git push -u origin task/add-newcomponent

    現在,在github上生成一個PR是一個好主意:)

    我如何為組件編寫測試?

    當你寫故事時,這會自動發生。 他們在幕後測試了jest快照。

    由於組件是函數和無狀態的,我們可以使用快照測試來獲得完整的覆蓋。

    你正在驗證每個屬性更改在HTML中都有預期的結果。

    測試第一次運行時,它會生成一個新。 檢查快照所需的秒的時間。

    我如何更新快照

    npm run test-update

    確定組件所做工作的時間?

    你可以跟一個 Pattern

    • 查看 Component.propTypes 部分
    • 這本質上是組件的API
    • 查看渲染函數
    • 查看任何 helper 函數
    • 詢問貢獻者:)



    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语