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 的使用流程,并非真实的开发过程,你可以根据自己的项目开发流程进行接入。

 

备注:

完全走了一遍流程。


目录
相关文章
|
7月前
|
前端开发 JavaScript
【第41期】一文入围React面试
【第41期】一文入围React面试
71 0
|
4月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
281 0
|
6月前
|
JavaScript
基于Vue3的Uniapp实训项目|一家鲜花店
基于Vue3的Uniapp实训项目|一家鲜花店
69 0
|
7月前
|
Web App开发 JSON 前端开发
React 发布十周年!
React 发布十周年!
|
JSON 前端开发 开发工具
Vue3 小兔鲜:项目起步
Vue3 小兔鲜:项目起步
284 0
|
存储 JavaScript
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
|
移动开发 前端开发 小程序
论如何搭上 antd 的快车-Form 篇
论如何搭上 antd 的快车-Form 篇
199 0
论如何搭上 antd 的快车-Form 篇
|
数据可视化 前端开发 开发工具
Umi UI 二期来了
Umi UI 二期来了
1549 0
Umi UI 二期来了
|
JavaScript 前端开发 安全
Vue3.0全球发布会干货总结
Vue3.0全球发布会干货总结
183 0
好客租房104-组件库antd-mobile
好客租房104-组件库antd-mobile
97 0
好客租房104-组件库antd-mobile