老大说最近打算做一个要做一个中台项目，前后端分离，让我预演一下前端。从产品那里初步了解了需求后，我们决定用近来最火的React 来搭建前端项目。平常大家都是 jQuery + BootStrap + Gulp，偶尔有点 Codorva + 微信的活，算是打牙祭了。听到这个消息后，小伙伴们摩拳擦掌，准备大干一场。
选型
因为中台项目涉及到大量可重复使用的表单组件，我们决定一个比较成熟的 UI 组件库。文档齐全又是中文的 React UI 组件库就是 antd 了。
目前 antd 版本是 v0.12.0，对应的 React 版本是 v0.14.x。结合入门文档跑起来还是很容易的。
注意：Node >= 4.0
- 安装开发工具
如果没有现成的 React 前端应用开发的脚手架工具，可以试一试 antd-init，可以安装到全局直接使用。
mkdir antd-demo && cd antd-demo
$ antd-init- 生成项目
npm install antd-init -g- 启动开发服务器
npm run dev启动成功后，在浏览器中输入 http://localhost:8001，可以看到 antd 的日期选择器组件。就这么简单。
不过，细心的看你可能会发现，Windows cmd 终端会警告：'openssl' 不是内部或外部命令，也不是可运行的程序或批处理文件。打开 package.json，定位到 dev 命令，可以看到运行 npm run dev 命令实际上是在运行 dora -p 8001 --plugins atool-build,proxy,hmr 脚本。
查看文档，dora 原来是个 Kao 实现的开发服务器，通过插件的方式集合各种调试方案，类似于 webpack-dev-server。-p 8001 是指定 dora 的端口号为 8001。 --plugins atool-build,proxy,hmr 是 dora 的三个插件。atool-build 是对 Webpack 的二次开发工具，proxy 是代理中间件，hmr 是 dora 的热替换插件，这个功能比 `webpack-dev-server 的HMR 好用。
去掉 proxy 插件终端会不会警告了。React 应用可以直接在 package.json 中设置代理的。
- 构建
npm run build没报错，但输出到 dist/${npm_package_family}/${npm_package_name}/${npm_package_version}，明显是个 bug。
打开 package.json，定位到 build命令，将脚本改为 atool-build 就可以了。
- 启动开发服务器
代码结构
.editorconfig
.eslintrc
.gitignore
index.html
package-lock.json
package.json
README.md
webpack.config.js
src
common
lib.js
component
App.jsx
entry
index.jsx文件还是比较少的，自由度很高。
package.json
以下是修改后的完整 package.json。
{
"name": "antd-demo",
"version": "1.0.0",
"entry": {
"index": "./src/entry/index.jsx"
},
"dependencies": {
"antd": "~0.12.0",
"atool-build": "0.5.x",
"babel-plugin-antd": "^0.2.0",
"es3ify-loader": "^0.1.0",
"react": "~0.14.6",
"react-dom": "~0.14.6"
},
"devDependencies": {
"dora": "0.2.x",
"dora-plugin-atool-build": "0.4.x",
"dora-plugin-hmr": "0.3.x",
"dora-plugin-proxy": "0.5.x",
"eslint": "1.10.x",
"eslint-config-airbnb": "4.0.x",
"eslint-plugin-react": "3.16.x",
"pre-commit": "1.x"
},
"pre-commit": [
"lint"
],
"scripts": {
"dev": "dora -p 8001 --plugins atool-build,hmr",
"lint": "eslint --ext .js,.jsx src",
"build": "atool-build "
}
}可以看到，除了 andt 的工具库，还使用了代码质量相关的两个库：eslint 和 pre-commit 。大厂就是大厂，总是走在技术最前沿。?
修改组件
文档中的示例任然使用 create-react-class 模块， 其实可以用 class 关键字来定义 React 组件，毕竟 React v0.13 就开始支持 ES6 class 语法了。
将 App.jsx 做如下修改
import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
const FormItem = Form.Item;
class App extends React.Component {
constructor(props) {
super(props);
// 绑定 this.handleSubmit
// this.handleSubmit = this.handleSubmit.bind(this);
}
// 默认启用 class fields（公有类字段） 语法
handleSubmit = (e) => {
e.preventDefault();
console.log('Submitted: ',
this.props.form.getFieldsValue());
}
render() {
const { getFieldProps } = this.props.form;
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem
label="账户："
>
<Input placeholder="请输入账户名"
{...getFieldProps('userName')}
/>
</FormItem>
<FormItem
label="密码："
>
<Input type="password" placeholder="请输入密码"
{...getFieldProps('password')}
/>
</FormItem>
<FormItem>
<label className="ant-checkbox-inline">
<Checkbox
{...getFieldProps('agreement')}
/>记住我
</label>
</FormItem>
<Button type="primary" htmlType="submit">登录</Button>
</Form>
);
}
}
App = Form.create()(App);
export default App;
antd-init 还是有点你小问题的，不过不影响使用。嗯，再加上 Reac router 和 Redux，基本上能演示了。?
评论 (0)