本人从Vue转React，首次搭建，遇坑无数。特写此文记录，以供参考。
React官网简介： https://react.docschina.org/docs/react-api.html
官方脚手架create-react-app：https://create-react-app.dev/docs/getting-started
typescript之tsconfig简介：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Ant Design of React：https://ant.design/docs/react/use-in-typescript-cn
1 使用脚手架 create-react-app初始化
// 安装yarn，速度比较块
npm install -g yarn
// 不建议安装全局，无法使用最新的脚手架
npm install -g create-react-app
// 卸载命令
npm uninstall -g create-react-app
// failed==>这个不行，总是报D://Program 路径有空格的错误，查阅很多解决方案无法解决
yarn create react-app my-app
// ok==>不启用--typescript
npm init react-app my-app
// ok==>启用typescript模板。但是实际上并没有自动添加，仍需要手动添加
npx create-react-app my-app3 --typescript
// 启动程序，和npm run start是一样的
yarn start
启动后，页面是白的。F12显示下图错误：Uncaught TypeError: Cannot read property 'forEach' of undefined react-refresh-runtime问题，是由于之前浏览器安装了react插件。
这挺可怕的，一个插件版本不一样，导致页面都看不了。
禁用React这个浏览器开发插件， 重新启动后，看到下面这个图就表示运行ok了。
2 手动支持typescript
明明选择的 --typescipt，但是并未如期引入，只能手动引入了。参考：https://create-react-app.dev/docs/adding-typescript/
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest
安装完成后， 手动将 App.js和index.js重命名为 App.tsx和 index.tsx
执行yarn start后会自动添加 tsconfig.json 文件
yarn start
又遇到了下图错误，无法使用 JSX, 除非提供了 "--jsx" 标志。
解决方法，点击右下角的typescript版本4.0.3，再点击选择TypeScript 版本4.0.3
选择与之匹配的工作区版本4.1.2
终于不红了。
3. 添加antd控件
https://ant.design/docs/react/use-in-typescript-cn
yarn add antd
修改 src/App.tsx，引入 antd 的按钮组件。
import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';
const App: FC = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>);
export default App;
修改 src/App.css，在文件顶部引入 antd 的样式。
@import '~antd/dist/antd.css';
大功告成！
BUG参考解决方案：
https://www.cnblogs.com/chenxizhang/p/14035749.html
https://blog.csdn.net/sjk2054949/article/details/109298959
