ant design是蚂蚁金服团队开源的react UI组件库。ant design的项目实践也相当多，除了蚂蚁金服外还有美团等大型企业在用这个UI库。我们公司选择这个UI库来结合react和ES6进行开发，因此做了个demo出来分享一下

　　demo链接

项目目录

login组件代码

import React from 'react';import ReactDOM from 'react-dom';import { Form, Icon, Input, Button, Checkbox } from 'antd';import  './login.less'const FormItem = Form.Item;class NormalLoginForm extends React.Component {    handleSubmit = (e) => {        e.preventDefault();        this.props.form.validateFields((err, values) => {                        var numFormat =new RegExp('/^[1][34578][0-9]{9}$/');            var num = values.userName;            if(!err){                console.log(values.userName);                console.log('Received values of form:', values);            }        });    }    render() {        const { getFieldDecorator } = this.props.form;        return (            
     
                
      
                           {getFieldDecorator('userName', {                        rules: [{required: true,pattern:/^[1][34578][0-9]{9}$/,message: '请输入正确的手机号!' }],                    })(                        
       } placeholder="手机号" />                    )}                
                      
      
                           {getFieldDecorator('password', {                        rules: [{ required: true, message: '请输入你的密码!' }],                    })(                        
       } type="password" placeholder="密码" />                    )}                
                      
      
                           {getFieldDecorator('remember', {                        valuePropName: 'checked',                        initialValue: true,                    })(                        
       
        记住密码
                           )}                    
       忘记密码？                    
                               登录                                         
       注册                
                  
     
        );    }}const WrappedNormalLoginForm = Form.create()(NormalLoginForm);export default WrappedNormalLoginForm;

index.js代码

import React from 'react';import ReactDOM from 'react-dom';import WrappedNormalLoginForm from './component/login/login';import './less/index.less';ReactDOM.render(  
     ,  document.body);

效果图