# react-tem-ts

**Repository Path**: lihtao/react-tem-ts

## Basic Information

- **Project Name**: react-tem-ts
- **Description**: 基于react-ts 进行封装，通过craco 进行初始化
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-01
- **Last Updated**: 2025-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Autor: Aka
 * @Date: 2023-07-11 18:54:02
 * @Description:
 * @LastEditTime: 2023-09-15 14:08:15
-->

#### 软件架构

react 架构
通过 react 脚手架搭建项目，通过 Craco 进行重构 Webpack 项目，该项目配置了 axios、antd、scss、typescript、react-router-dom、react-redux、多语言配置、并且做了区分多环境配置

#### 安装教程

```
yarn
```

### Compiles and hot-reloads for development

```
yarn start
```

### Compiles and minifies for production

```
yarn build
```

#### 文件结构

```bash
|-- react-tem-ts
    |-- .env.development               #开发环境变量配置
    |-- .env.prod                      #生产环境变量配置
    |-- .env.test                      #测试环境变量配置
    |-- .gitignore                     #git ignore文件配置
    |-- craco.config.cjs               #craco 配置文件
    |-- package-lock.json              #包管理文件
    |-- package.json                   #包管理文件
    |-- README.md                      #项目介绍
    |-- tsconfig.json                  #typescript配置
    |-- bin                            #脚本命令
    |   |-- i18n                        #多语言脚本命令
    |       |-- langScript.js
    |       |-- 语言包.xlsx
    |-- build
    |-- public                        #资源文件
    |   |-- favicon.ico
    |   |-- index.html
    |   |-- logo192.png
    |   |-- logo512.png
    |   |-- manifest.json
    |   |-- robots.txt
    |-- src                            #项目资源主目录
        |-- App.test.tsx
        |-- App.tsx
        |-- index.tsx
        |-- api                        #除mock文件夹，其他文件名都采用PascalCase的命名方式
        |   |-- xxx.ts                 #模块xxx的api
        |-- assets                     #静态文件，文件名都采用kebab-case的命名方式
        |   |-- styles                 #全局样式
        |   |   |-- base.scss
        |   |   |-- nprogress.scss
        |   |   |-- variables.scss
        |   |-- svgs                  #svg图片库
        |       |-- xxx.svg
        |-- components                #公共组件
        |   |-- Multilingual          #多语言组件
        |   |   |-- index.tsx
        |   |-- Nprogress             #加载条组件
        |       |-- nprogress.tsx
        |-- layouts                   #错误页面
        |   |-- 404.tsx                 #404页面
        |-- plugin                    #插件
        |   |-- i18n                     #多语言
        |       |-- emit.ts
        |       |-- i18n.ts
        |       |-- lang
        |           |-- en.json
        |           |-- zh.json
        |-- redux                    #状态管理工具
        |   |-- actions
        |   |   |-- count.ts
        |   |-- constors
        |   |   |-- count.ts
        |   |-- reducers
        |   |   |-- count.ts
        |   |-- store
        |       |-- index.ts
        |-- request                 #api接口函数
        |   |-- Api.ts
        |   |-- AxiosInterceptor.ts
        |   |-- Response.ts
        |   |-- ResponseErrors.ts
        |-- router                 #路由
        |   |-- index.tsx
        |   |-- routes.tsx
        |   |-- module
        |       |-- home.tsx
        |       |-- login.tsx
        |-- utils                   #公共模块
        |   |-- CommonMethod.ts     #公共方法
        |   |-- IconSvg.ts          #全局svg模块
        |-- views                   #视图
            |-- home
            |   |-- index.tsx
            |-- login
                |-- index.tsx
```