Ant-design 快速入门

最新推荐文章于 2024-09-03 07:08:45 发布

zsr228

最新推荐文章于 2024-09-03 07:08:45 发布

阅读量3.5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/zsspj12/article/details/52634357

React 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何通过Ant Design和Node.js快速搭建一个基于React的应用程序。从安装Node.js到配置开发环境，再到使用Ant Design组件创建日期选择器示例，并实现本地运行及构建部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载node.js4.x及以上，然后安装。

2、安装后在win+r输入npm install antd-init -g 安装antd

3、创建ant-demo 输入mkdir antd-demo 创建antd-demo

4、cd antd-demo

5、安装npm依赖输入 antd-init --type plain-react 此时会产生一些文件

将以下代码替换\antd-demo\src\entries\index.js的内容

import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您选择的日期是: ' + date.toString());
    this.setState({ date });
  }
  render() {
    return (
      <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={value => this.handleChange(value)} />
        <div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

6、重开”运行” npm start输入开始服务器

7、另一个”运行”进入ant-demo目录 , npm run build构建和部署antd-demo

8、url访问127.0.0.1:8989/antd-demo

9、访问效果如下即可