BFD UI
企业级 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 模块 message、confirm、xhr 也支持全局配置，涉及 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开发规范
- 向下兼容
- 单元测试：组件根目录下创建
__tests__文件夹 - 代码规范参考 airbnb react
编写一个新组件
npm run create MyComponent查看: http://localhost:4001/components/MyComponent