Merge branch 'master' of github.com:tinper-bee/react-components-docs

react编码规范.md

@@ -26,6 +26,7 @@
 - 代码规范使用   [airbnb规范](https://github.com/airbnb/javascript/tree/master/react)
 
 ## 样式规范
+- 组件样式使用sass编写，公用样式使用tinper-bee-core包，请阅读[tinper-bee-core文档](https://github.com/tinper-bee/tinper-bee-core)
 - 组件样式调用，使用classnames模块，进行样式处理，使用className调用
 - 组件内部使用clsPrefix为样式前缀
 ```javascript
@@ -48,9 +49,9 @@ const classString = classNames('hide', class1, class2);
 
 ```javascript
 //引入依赖
-let React = require('react');
-let ReactDOM = require('react-dom');
-let classnames = require('classnames');
+import React from 'react';
+import ReactDOM from'react-dom';
+import classnames from 'classnames';
 
 //定义prop检验
 const propTypes = {
@@ -83,7 +84,7 @@ class Button extends React.Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-module.exports = Button;
+export default Button;
 ```
 
 

sass环境依赖解决.md

@@ -0,0 +1,30 @@
+# sass环境依赖
+
+## 安装Ruby
+sass依赖Ruby环境，所以需要先安装Ruby
+- 下载地址[http://rubyinstaller.org/downloads](http://rubyinstaller.org/downloads)
+- 注意事项：安装时，最好勾选Add Ruby executables to your PATH这个选项，添加环境变量。
+- 查看ruby是否正确安装，在命令窗口使用ruby -v查看版本号来确认是否正确安装
+
+
+## 安装gulp-sass
+generator-tinper-bee是我们编写组件的脚手架产出工具，它产出的脚手架使用gulp-sass编译sass，
+gulp-sass依赖于node-sass，node-sass由于某些网络原因，我们可能无法下载
+所以请使用cnpm下载node-sass
+```
+npm install -g cnpm
+
+cnpm install --save-dev node-sass
+
+```
+接着下载gulp-sass
+```
+cnpm install --save-dev gulp-sass
+```
+
+
+
+## sass用法
+请移步参考：
+[http://www.w3cplus.com/sassguide/](http://www.w3cplus.com/sassguide/)
+[http://sass-lang.com/documentation/file.SASS_REFERENCE.html](http://sass-lang.com/documentation/file.SASS_REFERENCE.html)

如何写一个标准的react组件.md

@@ -2,6 +2,7 @@
 
 #### 环境依赖
 - 需要安装node 4.0版本及以上, npm版本最好3.0以上
+- [sass环境依赖](https://github.com/tinper-bee/react-components-docs/blob/master/sass%E7%8E%AF%E5%A2%83%E4%BE%9D%E8%B5%96%E8%A7%A3%E5%86%B3.md)
 
 ### 一、生成组件脚手架
 #### 1、下载
@@ -17,8 +18,9 @@ cd button
 yo tinper-bee --port=8000 --author=yonyou
 ```
 API介绍
+
 | 参数        | 说明         | 默认值  |
-| ------------- |:-------------:| -----:|
+|:------------ |:-------------:| -----:|
 | port      | 开发时服务监听端口 | 8000 |
 | author      | 作者名字      |   空字符串 |
 | beeVersion | 版本号     |    0.0.1 |
@@ -33,10 +35,11 @@ API介绍
 ```
 -demo
  -ButtonDemo.js
- -ButtonDemo.less
+ -ButtonDemo.scss
  -index.js
 -src
  -Button.js
+ -Button.scss
  -index.js
 -test
  -setup.js
@@ -61,6 +64,9 @@ API介绍
 - 根目录 中的 html 不可修改，通过 js 中的 jsx 渲染页面，通过 require css 引入 css。
 - 开发中用到其他公共库，通过 `npm install --save` 以及 `npm install --save-dev` 来安装
 
+##### 代码书写规范
+[react编码规范](https://github.com/tinper-bee/react-components-docs/blob/master/react%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83.md)
+[react组件测试流程和规范](https://github.com/tinper-bee/react-components-docs/blob/master/react%E7%BB%84%E4%BB%B6%E6%B5%8B%E8%AF%95%E6%B5%81%E7%A8%8B%E5%92%8C%E8%A7%84%E8%8C%83.md)
 
 ##### 开发调试
 

现有组件及待开发.md

@@ -6,10 +6,16 @@
 - badge
 - loadingstate
 
+### 正在开发组件
+|组件|开发者|
+|:--|--:|
+|dropdown|boyuhzou|
+|badge|ahua|
+|switch|wanghongxiang|
+
+
 ### 待开发组件
 
-
-
 #### 基本组件
 
 - radio
@@ -19,7 +25,6 @@
 - loading
 - multilang
 - progress
-- switch
 - textfield
 - tooltip
 - input