node package manager

bfd-ui

BFD UI

build status npm package NPM downloads

企业级 React 组件库 http://ui.baifendian.com

安装

npm install bfd-ui --save

使用

BFD UI 抛弃传统的资源加载方式,基于 webpack 打包,资源种类多种多样,会涉及一些 webpack 的配置,如下:

{
  module: {
    loaders: [{
      test: /\\.(eot|woff|woff2|ttf|svg|png|jpg)(\\?v=[\\d\\.]+)?$/,
      loader: 'file?name=files/[hash].[ext]'
    }, {
      test: /\\.css$/,
      loader: 'style!css'
    }]
  },
  resolve: {
    alias: {
      bfd: 'bfd-ui/lib'
    }
  }
}

webpack 配置完成后,即可在代码中使用组件,以 DatePciker 为例:

import React, { Component } from 'react'
import DatePicker from 'bfd/DatePicker'
 
class App extends Component {
 
  handleSelect(date) {
    console.log(date)
  }
 
  render() {
    return <DatePicker onSelect={this.handleSelect} />
  }
}

强烈建议基于脚手架开发,省去繁琐的环境配置、项目基本结构、模板以及开发和部署相关工作

组件全局配置

覆盖或扩展 defaultProps 即可,以 DatePciker 为例:

DatePicker.defaultProps = Object.assign(DatePicker.defaultProps || {}, {
  placeholder: 'Please select date'
})

命令式 API 模块 messageconfirmxhr 也支持全局配置,涉及 url 方式加载数据的组件以及 Form 均依赖 xhr。详细配置请参考其各自文档

全局配置后,这些 API 会变成有状态的,即最终结果受配置影响,所以尽量一次性配置并向其它开发者说明

受控属性与不受控属性

组件支持不受控(defaultXXX)的使用方式,关于为什么区分受控 / 不受控请参考 Controlled / Uncontrolled Components

浏览器支持

Chrome、Firefox、Safari、IE9+

开发者说明

开发环境安装

git clone https://github.com/yourName/bfd-ui.git
 
# DEMO 站集成了脚手架项目的说明,所以需要依赖这个项目的一些资源,与 bfd-ui clone 在同一目录下即可 
git clone https://github.com/baifendian/create-bfd-app.git
 
cd bfd-ui
 
npm install
 
npm start

查看: http://localhost:4001

开发规范

  • 向下兼容
  • 单元测试:组件根目录下创建 __tests__ 文件夹
  • 代码规范参考 airbnb react

编写一个新组件

npm run create MyComponent

查看: http://localhost:4001/components/MyComponent

更新日志

CHANGELOG

LICENSE

BSD License