react+antd快速入门

### 创建基于React框架使用Ant Design组件库的快速上手指南

#### 安装环境准备

为了能够顺利地运行React应用以及集成Ant Design，确保已经安装了Node.js和npm。可以通过命令`node -v` 和 `npm -v`来验证版本是否正确安装[^1]。

#### 初始化项目

通过Create React App工具可以轻松建立一个新的React应用程序：

npx create-react-app react-antd-demo
cd react-antd-demo

这一步骤会自动配置好Webpack和其他必要的依赖项，使得开发者可以直接专注于编写业务逻辑而无需担心复杂的构建设置[^2]。

#### 集成Ant Design

进入项目的根目录下执行如下命令以引入Ant Design及其样式文件:

npm install antd --save

接着，在src/index.js 或者 src/App.jsx 中导入全局CSS资源以便在整个应用范围内生效:

import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

对于按需加载的情况，则推荐采用babel-plugin-import插件来进行优化处理[^3]:

npm install babel-plugin-import --save-dev

编辑.babelrc 文件加入相应的配置选项:

{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

#### 开始编码

现在可以在组件内部直接引用所需的Ant Design UI控件了。例如，要显示一个按钮只需要这样做即可：

import React from 'react';
import { Button } from 'antd';

function MyComponent() {
  return (
    <div>
      <Button type="primary">Click me!</Button>
    </div>
  );
}

export default MyComponent;

上述代码片段展示了如何利用Ant Design提供的预定义样式创建具有视觉吸引力且功能完整的交互元素。