1 | # Beisen-module-template
|
2 |
|
3 | ### 功能
|
4 |
|
5 | ```
|
6 | React组件开发,并发布到北森cnpm服务器
|
7 | ```
|
8 |
|
9 | ### 使用方法
|
10 |
|
11 | #### 1)空项目使用
|
12 |
|
13 | ```
|
14 | 第一步:git clone git@gitlab.beisen.co:cnpm/beisen-module-template.git
|
15 |
|
16 | 第二步:cd beisen-module-template
|
17 |
|
18 | 第三步:./renew.js 项目路径/项目名称
|
19 |
|
20 | 如执行./renew.js ../testDemo/ //**testDemo**为新项目名称,与该空项目平级,新项目不带git信息,一个纯的项目
|
21 |
|
22 | 第四步:cd ../testDemo/ //此时不带git信息的新项目testDemo建立完成
|
23 |
|
24 | ```
|
25 |
|
26 | #### 2)修改`package.json`
|
27 |
|
28 | `package.json`中不允许出现中文
|
29 |
|
30 | ```
|
31 | "name": "@beisen/ComponentName",
|
32 | "author": {
|
33 | "name": "name",
|
34 | "email": "name@beisen.com"
|
35 | },
|
36 | "description": "",
|
37 | "keywords": [
|
38 | "beisen",
|
39 | "react-component",
|
40 | "es6",
|
41 | "karma",
|
42 | "jasmine"
|
43 | ],
|
44 | "maintainers": [
|
45 | {
|
46 | "name": "name",
|
47 | "email": "name@beisen.com"
|
48 | }
|
49 | ]
|
50 |
|
51 | **组件名称(必填)---应首字母大写,若为多个单词拼接,则使用驼峰格式,如TabComponent**
|
52 |
|
53 | **组件作者(必填)**
|
54 |
|
55 | **组件概述(必填)**
|
56 |
|
57 | **组件关键词(必填)eg.Form,Icon,DropDown...**
|
58 |
|
59 | **维护人员 (必填)**
|
60 |
|
61 | ```
|
62 |
|
63 | #### 3) 项目文件结构
|
64 | ```
|
65 | ReactComponent
|
66 |
|
67 | —— dist
|
68 | |
|
69 | |—— index.js (webpack打包后的js)
|
70 | |
|
71 | —— examples
|
72 | |
|
73 | |—— preview
|
74 | |—— 预览图.png (组件截图)
|
75 | |
|
76 | |—— index.html (可直接打开的示例)
|
77 | |
|
78 | —— lib (babel转换后的语法 es6 —> es5)
|
79 | |
|
80 | —— src
|
81 | |
|
82 | |—— index.js (组件源码,webpack打包入口)
|
83 | |
|
84 | —— tests (测试文件夹)
|
85 | |
|
86 | | —— index-spec.js (测试用例)
|
87 | |
|
88 | —— index.html (组件调用)
|
89 | |
|
90 | —— index.js (组件调用)
|
91 | |
|
92 | —— karma.conf.js (karma配置)
|
93 | |
|
94 | —— webpack.config.js (webpack配置)
|
95 | |
|
96 | —— package.json (如有依赖,必须写全)
|
97 | |
|
98 | —— README.md (组件使用说明,配置参数)
|
99 |
|
100 | ```
|
101 |
|
102 | #### 4) 项目运行、打包
|
103 |
|
104 | * `cnpm install` 或 `npm install` [cnpm使用教程](http://book.beisen.co/ui/Dev/_book/Tools/NPM.html)
|
105 | * `npm run dev` (开发环境打包 port:8080)
|
106 | * `npm run test` (测试用例)
|
107 | * `npm run build` (生产环境打包)
|
108 |
|
109 | #### 5) 组件开发流程
|
110 |
|
111 | * 新建项目
|
112 | * 项目导出
|
113 | * 向组织提出申请,将项目加入cnpm组
|
114 | * 申请通过后,项目作者需打tag
|
115 |
|
116 | 打tag后,请同步更新package.json中的version版本号,服务器会`自动`将项目同步或更新到cnpm库中,并添加官方授权,Beisen前端组件库会自动添加或更新组件信息(包含文档,示例和预览图)
|
117 |
|
118 | 应该使用`0.1.0`作为初始化开发版本。
|
119 |
|
120 | 具体版本信息参考[语义化版本 2.0.0](http://semver.org/lang/zh-CN/#section-2)
|
121 |
|
122 | #### 6) 组件开发要求
|
123 |
|
124 | * 必须要有`文档`,包括组件使用说明,配置参数,版本信息
|
125 | * 必须要有使用`示例`
|
126 | * 必须要有`预览图`
|
127 | * 必须编写`单元测试`
|
128 |
|
129 | **[组件接入story步骤]:(http://note.youdao.com/share/?id=413ccdc6cd3570e8cb202468ea0a3696&type=note#/)**
|
130 |
|
131 | #### 7) 组件开发规范
|
132 |
|
133 | * 一个`项目`只能对应一个`组件`
|
134 | * 纯`react`组件,不需要redux相关内容
|
135 | * 如有依赖其他组件,必须在`package.json`中写全
|
136 | * 最外层index.js不能命名为其他
|
137 | * 统一使用`ES6`语法
|
138 | * css统一使用`sass`, 2个空格缩进
|
139 | * 代码应有适当`注释`,包括函数、参数
|
140 | * 测试文件统一以“-spec”为结尾命名,如app-spec.js
|
141 | * 预览图必须命名为preview.png,可以上传多幅预览图(组件平台会以preview.png为主),命名依次为preview1.png、preview2.png依此类推
|
142 | * PropTypes定义规范如下:
|
143 |
|
144 | ```
|
145 | import React, {Component, PropTypes} from 'react'
|
146 |
|
147 | class Demo extends Component {
|
148 | render() {
|
149 | return <h1>hello world</h1>
|
150 | }
|
151 | }
|
152 |
|
153 | Demo.propTypes = {
|
154 | total: PropTypes.number,
|
155 | next_text: PropTypes.string,
|
156 | callback: PropTypes.func
|
157 | }
|
158 |
|
159 | module.exports = Demo;
|
160 | ```
|
161 |
|
162 | ### React书写规范
|
163 |
|
164 | #### 每个文件只包含一个React组件
|
165 |
|
166 | #### 使用JSX语法
|
167 |
|
168 | #### Class vs React.createClass
|
169 |
|
170 | ```
|
171 | // bad
|
172 | const Listing = React.createClass({
|
173 | render() {
|
174 | return <div />;
|
175 | }
|
176 | });
|
177 |
|
178 | // good
|
179 | class Listing extends React.Component {
|
180 | render() {
|
181 | return <div />;
|
182 | }
|
183 | }
|
184 | ```
|
185 |
|
186 | #### 对于 JSX 使用双引号,对其它所有 JS 属性使用单引号
|
187 |
|
188 | ```
|
189 | // bad
|
190 | <Foo style={{ left: '20px' }} />
|
191 |
|
192 | // good
|
193 | <Foo style={{ left: "20px" }} />
|
194 | ```
|
195 |
|
196 | #### 在自闭和标签之前留一个空格,若组件无子组件也应使用自闭标签
|
197 |
|
198 | ```
|
199 | // bad
|
200 | <Foo/>
|
201 |
|
202 | // very bad
|
203 | <Foo />
|
204 |
|
205 | // bad
|
206 | <Foo
|
207 | />
|
208 |
|
209 | // good
|
210 | <Foo />
|
211 | ```
|
212 |
|
213 | #### 如果组件有多行属性,闭合标签应写在新的一行上
|
214 |
|
215 | ```
|
216 | // bad
|
217 | <Foo
|
218 | bar="bar"
|
219 | baz="baz" />
|
220 |
|
221 | // good
|
222 | <Foo
|
223 | bar="bar"
|
224 | baz="baz"
|
225 | />
|
226 | ```
|
227 |
|
228 | #### 生命周期 Composite Component
|
229 |
|
230 | ```
|
231 | * - constructor
|
232 | * - componentWillMount
|
233 | * - render
|
234 | * - [children's construtors]
|
235 | * - [children's componentWillMount and render]
|
236 | * - [children's componentDidMount]
|
237 | * - componentDidMount
|
238 | *
|
239 | * Update Phase:
|
240 | * - componentWillReceiveProps (only called if parent updated)
|
241 | * - shouldComponentUpdate
|
242 | * - componentWillUpdate
|
243 | * - render
|
244 | * - [children's constructors or receive props phase]
|
245 | * - componentDidUpdate
|
246 | *
|
247 | * - componentWillUnmount
|
248 | * - [children's componentWillUnmount]
|
249 | * - [children's destroyed]
|
250 | * - (destroyed)
|
251 | ```
|
252 | #### 执行顺序
|
253 |
|
254 | ```
|
255 | constructor
|
256 | optional static methods
|
257 | getChildContext
|
258 | componentWillMount
|
259 | componentDidMount
|
260 | componentWillReceiveProps
|
261 | shouldComponentUpdate
|
262 | componentWillUpdate
|
263 | componentDidUpdate
|
264 | componentWillUnmount
|
265 | clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
|
266 | getter methods for render like getSelectReason() or getFooterContent()
|
267 | Optional render methods like renderNavigation() or renderProfilePicture()
|
268 | render
|
269 | ```
|
270 |
|
271 | ### 参考资料
|
272 |
|
273 | * [北森前端TalentUI开发文档](http://book.beisen.co/ui/TalentUI/_book/index.html)
|
274 |
|
275 | * [React官方文档](https://facebook.github.io/react/)
|
276 |
|
277 | * [ES6语法](http://es6.ruanyifeng.com/#docs/intro)
|
278 |
|
279 | * [Jasmine行为驱动测试官方文档](http://jasmine.github.io/edge/introduction.html) |
\ | No newline at end of file |