antd 试水

简介: antd 试水

1.安装


sudo cnpm install antd --save
sudo cnpm install antd-init -g


2.创建


mkdir  antdtest && cd antdtest
antd-init


3.替换内容


import React from 'react';
import ReactDOM from 'react-dom';
import { LocaleProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文,所以需要修改为中文
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您选择的日期是: ' + (date ? date.toString() : ''));
    this.setState({ date });
  }
  render() {
    return (
      <LocaleProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={value => this.handleChange(value)} />
          <div style={{ marginTop: 20 }}>当前日期:{this.state.date && this.state.date.toString()}</div>
        </div>
      </LocaleProvider>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));


4.启动


一键启动调试,访问 http://127.0.0.1:8000看效果。5


$ npm start


5.构建和部署


$ npm run build


入口文件会构建到 dist 目录中,你可以自由部署到不同环境中进行引用。


上述例子用于帮助你理解 Ant Design React 的使用流程,并非真实的开发过程,你可以根据自己的项目开发流程进行接入。

 

备注:

完全走了一遍流程。


目录
相关文章
|
19小时前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
2天前
|
Web App开发 JSON 前端开发
React 发布十周年!
React 发布十周年!
|
8月前
|
JSON 前端开发 开发工具
Vue3 小兔鲜:项目起步
Vue3 小兔鲜:项目起步
189 0
|
存储 JavaScript
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
|
移动开发 前端开发 小程序
论如何搭上 antd 的快车-Form 篇
论如何搭上 antd 的快车-Form 篇
171 0
论如何搭上 antd 的快车-Form 篇
|
数据可视化 前端开发 开发工具
Umi UI 二期来了
Umi UI 二期来了
1468 0
Umi UI 二期来了
|
前端开发
好客租房5-React脚手架的应用
好客租房5-React脚手架的应用
94 0
|
前端开发
好客租房7-React脚手架的使用
好客租房7-React脚手架的使用
77 0
|
算法 JavaScript 前端开发
好客租房75-react组件
好客租房75-react组件
60 0
|
前端开发
好客租房20-react组件介绍
好客租房20-react组件介绍
58 0