react-antd-typescript-starter

vite + react + ts + redux template

Use

git clone git@github.com:qqxs/react-antd-typescript-starter.git

cd react-antd-typescript-starter

pnpm install

Scripts

# 安装项目依赖
# only allow pnpm
pnpm install

# 开启开发环境react 编译
# start development environment
pnpm run dev

# 开始编译生产环境
# production environment
pnpm run build

# 开始编译生产环境并输出分析
# production environment analyzer
pnpm run analyzer

# 对部分不符合eslint 语法进行修复
# 注意⚠️: 不是所有的错误都会修复，部分还是要手动修复
# eslint fix code
pnpm run fix

# 进行eslint语法检查, 如果有错会在控制中指出
# eslint lint code
pnpm run lint

# 使用prettier 代码进行格式化
# prettier format code
pnpm run fmt

# test
pnpm run test

# 首先要安装nginx镜像
# docker nginx deploy
# http://localhost:8000
# docker-compose up -d
docker compose up -d

src

.
├── assets      # @/assets/xxx assets source
│   ├── FE.png
│   └── react.svg
├── components  # @/components common components
│   ├── Auth    # auth
│   ├── ErrorBoundary  # ErrorBoundary
│   └── Layout  # layout
├── constant    # @/constant constant
├── hooks       # @/hooks
│   ├── useTheme.ts   # theme hooks
│   └── redux.ts # redux hooks
├── main.tsx    # entry
├── services    # @/services  api
├── pages       # pages
│   ├── error   # error page
│   ├── home    # home page
│   ├── login   # login page
│   └── register # register page
├── router.tsx  # router tree
├── sentry.ts   # sentry config
├── store       # redux store
│   ├── index.ts
│   └── features # redux state
├── styles
│   ├── themes      # antd theme file
│   └── theme.scss
├── utils
│   ├── Axios.ts   # axios
│   └── auth.ts
└── vite-env.d.ts

Components

自定义组件放在src/components下

Place custom components under src/components

Themes

如果需要修改antd5 主题，请更改src/styles/themes下文件

If it is necessary to modify the antd5 theme, Please modify the src/styles/themes file.

// https://ant.design/docs/react/customize-theme-cn
// default.scss
:root {
  --color-primary: #00b96b; // -> colorPrimary: #00b96b
  --border-radius: 4px; // -> borderRadius: 2px
}

scripts/sass-to-json.ts 转换 src/styles/themes下文件为下面对象格式

{
  "theme" {
    "tokens": {
      "dark": {
        "colorPrimary": "#000",
        "borderRadius": "4px",
      },
      "default": {
        "colorPrimary": "#00b96b",
        "borderRadius": "4px"
      }
    },
    "vars": {
      "dark": "  --color-primary: #000;  --border-radius: 4px;",
      "default": "  --color-primary: #00b96b; --border-radius: 4px;"
    }
  }
}

css 变量在切换主题时自动注入到 head 下，保证 antd@5.x 主题 token 变量和css 变量对应

head 下 style 标签

<!-- $____theme____$ 是唯一id -->
<style id="$____theme____$" data-theme="default">
  :root {
    --color-primary: #00b96b;
    --border-radius: 4px;
  }
</style>

警告⚠️： 主题文夹下文件中仅支持 css 变量

Api

gin_serve api

Sentry

@sentry/react

在vite.config.ts中开启OPEN_SENTRY=true, 并在src/sentry.tsx 中配置 $__SENTRY__DSN__$。