Ant Design 在 create-react-app 中使用

前言

create-react-app 是 React 的脚手架，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。

你可以通过 create-react-app 教程 查看这个是怎么使用的

初始化项目

参考 create-react-app 项目安装和使用 创建项目

npx create-react-app my-app
cd my-app
npm start

# 或者
yarn start

项目的目录

项目的目录如下

└─my-app
    │  .gitignore
    │  package.json
    │  README.md
    │  yarn.lock
    │
    ├─node_modules
    ├─public
    │      favicon.ico
    │      index.html
    │      logo192.png
    │      logo512.png
    │      manifest.json
    │      robots.txt
    │
    └─src
            App.css
            App.js
            App.test.js
            index.css
            index.js
            logo.svg
            serviceWorker.js
            setupTests.js

安装并引入 antd

$ yarn add antd

使用

修改 src/App.js，引入 antd 的按钮组件。

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。

我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！