快速创建 React Ts APP

初始化结构, 安装依赖

使用脚本创建框架

1
npx create-react-app quant-tools --template typescript

在已有程序中添加 ts 支持

1
yarn add -D typescript @types/node @types/react @types/react-dom @types/jest

安装 Mui 依赖

1
yarn add @mui/icons-material @mui/material @mui/styles

安装其他依赖

1
2
3
4
5
6
# emotion
yarn add @emotion/react @emotion/styled
# 多 class name 支持
yarn add classnames
# 轮播图, Router
yarn add react-material-ui-carousel react-router-dom

修改 public 文件夹内容

替换 logo 图片

  • favicon.ico
  • logo192.png
  • logo512.png

修改 manifest.json 中 short_name, name 字段

修改 index.html 中 title, meta description 字段内容, 在 head 中添加

1
2
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

修改 index.html 中 meta viewport 字段内容为

1
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

修改 src 文件夹内容

删除文件

  • App.js
  • App.css
  • App.test.js
  • logo.svg

删除 index.js 文件中 import App from './App';<App /> 部分

增加 index.js 文件中 import { CssBaseline } from "@mui/material"; 引入包

修改 render 结构

1
2
3
4
5
6
<React.StrictMode>
<React.Fragment>
<CssBaseline />
{/* ... */}
</React.Fragment>
</React.StrictMode>,
Donate - Support to make this site better.
捐助 - 支持我让我做得更好.