react文档 ↓
https://reactjs.bootcss.com/
需要在电脑上先安装好 Node >= 8.10 和 npm >= 5.6
该项目名称为“niu-ts-react” ↓ （其中npx并不是拼写错误，是npm5.2+附带的package运行工具）
npx create-react-app niu-ts-react
cd niu-ts-react
npm start
根据网页提示，将其中涉及到的刚删掉内容进行修改。修改位置都在这两个文件中。
tada~~
一个react就起来喽~
安装antd（和react配套的ui库）
项目文件夹下打开小黑窗，输入 ↓
npm install antd --save
因为antd中用less的语法，我们一起将less也配置一下。为了方便后面修改主题色，我们用antd文档的高级配置中的内容 ↓
https://ant-design.gitee.io/docs/react/use-with-create-react-app-cn
安装craco ↓
yarn add @craco/craco
修改 package.json 文件里 script 属性 ↓
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
在src下的 index.js 文件中，加入以下代码 ↓
import 'antd/dist/antd.less';
在项目根目录中创建一个 craco.config.js 文件，用于将来修改默认配置。
安装 craco-less ↓
yarn add craco-less
在使用 antd 组件的页面先引入 antd组件 ↓
import { Button, Space } from "antd";
import { SearchOutlined } from "@ant-design/icons";
<Space>
<Button type="primary">按钮</Button>
<Button type="primary">
<SearchOutlined />搜索
</Button>
<Button>
<UploadOutlined />点击以上传
</Button>
</Space>
接下来修改主题色。
在刚刚创建的craco.config.js 文件中 ↓
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
tada~~
主题色修改完毕~
