阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ant Design 教程

      快速上手

      Ant Design React 致力于提供给程序员愉悦的开发体验。

      在开始之前,推荐先学习 React 和 JavaScript,并正确安装和配置了 Node.js 。官方指南假设你已了解掌握了 React 全家桶的正确开发方式。

      网站

      使用组件

      直接用下面的代码替换 index.js 的内容,用 React 的方式直接使用 antd 组件。

      import React from 'react';
      import ReactDOM from 'react-dom';
      import { ConfigProvider, DatePicker, message } from 'antd';
      // 由于 antd 组件的默认文案是英文,所以需要修改为中文
      import zhCN from 'antd/es/locale/zh_CN';
      import moment from 'moment';
      import 'moment/locale/zh-cn';
      import 'antd/dist/antd.css';
      import './index.css';
      
      moment.locale('zh-cn');
      
      class App extends React.Component {
        state = {
          date: null,
        };
      
        handleChange = date => {
          message.info(`您选择的日期是: ${date ? date.format('YYYY-MM-DD') : '未选择'}`);
          this.setState({ date });
        };
        render() {
          const { date } = this.state;
          return (
            <ConfigProvider locale={zhCN}>
              <div style={{ width: 400, margin: '100px auto' }}>
                <DatePicker onChange={this.handleChange} />
                <div style={{ marginTop: 20 }}>
                  当前日期:{date ? date.format('YYYY-MM-DD') : '未选择'}
                </div>
              </div>
            </ConfigProvider>
          );
        }
      }
      
      ReactDOM.render(<App />, document.getElementById('root'));
      

      探索更多组件用法

      你可以在左侧菜单查看组件列表,比如 Alert 组件,组件文档中提供了各类演示,最下方有组件 API 文档可以查阅。在代码演示部分找到第一个例子,点击右下角的图标展开代码。

      然后依照演示代码的写法,在之前的 codesandbox 里修改 index.js,首先在 import 内引入 Alert 组件:

      - import { ConfigProvider, DatePicker, message } from 'antd';
      + import { ConfigProvider, DatePicker, message, Alert } from 'antd';
      

      然后在 render 内添加相应的 jsx 代码:

        <DatePicker onChange={value => this.handleChange(value)} />
        <div style={{ marginTop: 20 }}>
      -   当前日期:{date ? date.format('YYYY-MM-DD') : '未选择'}
      +   <Alert message={`当前日期:${date ? date.format('YYYY-MM-DD') : '未选择'}`} type="success" />
        </div>
      

      在右侧预览区就可以看到如图的效果。

      好的,现在你已经会使用基本的 antd 组件了,你可以在这个例子中继续探索其他组件的用法。如果你遇到组件的 bug,也推荐建一个可重现的 codesandbox 来报告 bug。

      实际项目开发

      你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例:

      • Ant Design Pro
      • antd-admin
      • d2-admin
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录