帮酷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  |  如果智培  |  酷兔英语