antd 试用

老大说最近打算做一个要做一个中台项目，前后端分离，让我预演一下前端。从产品那里初步了解了需求后，我们决定用近来最火的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，基本上能演示了。😆