diff --git a/react编码规范.md b/react编码规范.md index cee3ed6..2cac1bc 100644 --- a/react编码规范.md +++ b/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; ``` diff --git a/sass环境依赖解决.md b/sass环境依赖解决.md new file mode 100644 index 0000000..055b217 --- /dev/null +++ b/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) diff --git a/如何写一个标准的react组件.md b/如何写一个标准的react组件.md index 89aa7e6..869c491 100644 --- a/如何写一个标准的react组件.md +++ b/如何写一个标准的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) ##### 开发调试 diff --git a/现有组件及待开发.md b/现有组件及待开发.md index ad5c4f9..cfe2d99 100644 --- a/现有组件及待开发.md +++ b/现有组件及待开发.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