1.安装react脚手架 create-react-app
npm insall create-react-app -g
2.用 create-react-app 脚手架搭建项目
yarn create create-react-app my-app 或 npx create-react-app my-app
3.然后进入项目并启动。
cd my-app
yarn start
4.安装 Antd:
yarn add antd
5.修改配置
此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 craco (一个对 create-react-app 进行自定义配置的社区解决方案)。
现在我们安装 craco 并修改 package.json
里的 scripts
属性。
$ yarn add @craco/craco
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
eject
你也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索,不在本文讨论范围内。
yarn run eject
6.自定义主题
参考antd 配置主题,通过 ConfigProvider 进行主题配置:
import React from 'react';
import {
ConfigProvider } from 'antd';
export default () => (
<ConfigProvider
theme={
{
token: {
colorPrimary: '#00b96b',
},
}}
>
<MyApp />
</ConfigProvider>
);