Giter Site home page Giter Site logo

bfd-ui's Introduction

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

bfd-ui's People

Contributors

antsfee avatar dangtuo avatar jianghai avatar jiangtl avatar sunny586 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.