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 的使用流程,并非真实的开发过程,你可以根据自己的项目开发流程进行接入。
备注:
完全走了一遍流程。