Daifee-React-Component

用 React 封装一套常用组件

所有组件都是 stateless 组件，但为方便，某些组件提供 API 调用方式的静态方法。

[TOC]

使用前须知

源码已构建成 UMD 模块发布到 NPM.

npm install -s daifee-react-component

依赖：

用法

建议用 webpack 构建

Demos

将所有依赖(包括 Daifee-React-Component)与项目源码打包为一个文件。

源码：/example

配置：/website/webpack.config.demos.js

Demos-externals

将所有依赖(包括 Daifee-React-Component)用 加载。

源码：/example

配置：/website/webpack.config.demos-externals.js

项目目录结构

/react-component

|-- dist 构建后的代码

|-- doc 文档

|-- example 开发过程中的例子(也是在线 Demos 的源码)

|-- src 项目源码

|-- test 测试(还没写)

|-- website 网站(Demos 构建配置)

|-- ...配置

开发

命令脚本：

npm install 安装依赖

npm start 启动本地开发服务器 localhost:8082

npm test 测试

npm run lint 检测代码

npm run lint:watch 监听文件变化，持续检测代码

npm run build 构建编译源码

npm run build:website 构建 website 项目

风格

文件名(包含目录)和标识符(变量、函数名、属性)都用使用“驼峰式”。

以模块为单位创建文件，如果模块为“类”则第一个字母大写。

每个组件定义一个目录，以组件名命名。

尽量使用 stateless component

某些组件为了方便使用，提供静态方法作为直接调用的接口。

定义组件时用到的 props 必须在 propTypes 声明，可以向组件传递任意 props(React 支持就行)。

踩到的坑

addComponentAsRefTo Invariant Violation

构建 UMD 模块

Daifee-React-Component 依赖 react-addons-css-transition-group 将其配置为 externals

// webpack.config.js

'react-addons-css-transition-group': {

// UMD 依赖模块： root['React']['addons']['CSSTransitionGroup']

// 项目依赖模块：module.exports = React.addons.CSSTransitionGroup;

// 作为项目依赖模块时，root 的值不能是数组，只能是 {root: 'React.addons.CSSTransitionGroup'}

root: ['React','addons','CSSTransitionGroup'],

commonjs2: 'react-addons-css-transition-group',

commonjs: 'react-addons-css-transition-group',

amd: 'react-addons-css-transition-group'

}

如果项目依赖 Daifee-React-Component，并希望也将 react-addons-css-transition-group 配置为 externals，其配置却与上面不一样。

// webpack.config.demos-externals.js

externals: {

'react': 'React',

'react-dom': 'ReactDOM',

// 看我傻逼不？

'react-addons-css-transition-group': 'React.addons.CSSTransitionGroup',

'daifee-react-component': 'DaifeeReactComponent',

'xiscroll': 'IScroll'

}