在 create-react-app 中使用

    在开始之前，你可能需要安装 。

    工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

    然后我们进入项目并启动。

    2. $ yarn start

    此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

    这是 create-react-app 生成的默认目录结构。

    1. ├── README.md
    2. ├── package.json
    3. ├── public
    4. │   ├── favicon.ico
    5. ├── src
    6. │   ├── App.css
    7. │   ├── App.js
    8. │   ├── App.test.js
    9. │   ├── index.css
    10. │   ├── index.js
    11. │   └── logo.svg

    现在从 yarn 或 npm 安装并引入 antd。

    1. $ yarn add antd

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

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

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

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

    这个例子在实际开发中还有一些优化的空间，比如无法进行主题配置。

    此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）。

    现在我们安装 craco 并修改 package.json 里的 scripts 属性。

    1. $ yarn add @craco/craco
    1. /* package.json */
    2. -   "start": "react-scripts start",
    3. -   "build": "react-scripts build",
    4. -   "test": "react-scripts test",
    5. +   "start": "craco start",
    7. +   "test": "craco test",
    8. }

    然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

    按照 的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 来帮助加载 less 样式和修改变量。

    1. /* src/App.js */
    2. - import './App.css';
    3. + import './App.less';
    1. /* src/App.less */
    2. - @import '~antd/dist/antd.css';

    然后安装 craco-less 并修改 craco.config.js 文件如下。

    1. $ yarn add craco-less

    这里利用了 less-loader 的 来进行主题配置，变量和其他配置方式可以参考 文档。修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

    antd 内建了深色主题和紧凑主题，你可以参照 使用暗色主题和紧凑主题 进行接入。

    你也可以使用 create-react-app 提供的 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。

    以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd。

    上述教程的脚手架源码我们放在 create-react-app-antd 中，你可以直接下载使用。