# react-ts-template

**Repository Path**: duchengdong/react-ts-template

## Basic Information

- **Project Name**: react-ts-template
- **Description**: 基于react、react-router5.x、reduxjs/toolkit、typescript的前端项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-29
- **Last Updated**: 2022-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: template

## README

react-ts-template

## 基于react、react-router5.x、reduxjs/toolkit、typescript的前端项目模板
## 前端UI框架采用antd，构建采用craco工具对react app 的webpack配置进行修改，支持对antd less常量修改（theme.js）
## 支持scss、环境变量，接口请求采用axios进行封装
## docker镜像打包

### 1. 项目启动
```
// npm 启动
npm insatll // 安装依赖
npm start // 启动项目

// yarn 启动
yarn // 安装依赖
yarn start // 启动项目
```

### 2. 项目部署
```
npm run build
// or
yarn build
```

### 3. 目录结构
```
ui-baekje-clockin-web            //                        
├── README.md                    //    
├── craco.config.js              //  carco 修改webpack配置         
├── docker                       //  docker文件目录           
├── package.json                 //        
├── public                       //  
│   ├── index.html               //          
│   ├── logo192.png              //           
│   ├── manifest.json            //             
│   └── robots.txt               //          
├── src                          //  项目文件
│   ├── App.tsx                  //       
│   ├── assets                   //  静态文件    
│   │   └── images               //          
│   ├── components               //  公共组件                    
│   ├── data                     //  常量数据定义  
│   │   ├── blood.data.ts        //                 
│   │   ├── common.data.ts       //                  
│   │   ├── medical.data.ts      //                   
│   │   └── service.data.ts      //                   
│   ├── hooks                    //  公共hooks定义   
│   │   ├── index.ts             //            
│   │   ├── test.js              //           
│   │   ├── usePageFunc.ts       //                  
│   │   └── useStoreHooks.ts     //                    
│   ├── index.tsx                //         
│   ├── layout                   //  layout布局组件    
│   │   ├── AuthLayout.tsx       //  基本布局                
│   │   ├── LoadingHtmp.tsx      //                   
│   │   ├── ProjectTabs.tsx      //  项目切换组件                 
│   │   ├── datas.ts             //            
│   │   └── index.scss           //              
│   ├── pages                    //  页面级路由组件   
│   │   ├── Login                //         
│   │   ├── MedicalService       //                  
│   │   └── PatientService       //                  
│   ├── react-app-env.d.ts       //                  
│   ├── reportWebVitals.ts       //                  
│   ├── routes                   //  路由配置目录    
│   │   ├── RouteView.tsx        //                 
│   │   └── router.config.ts     //                    
│   ├── service                  //  API接口定义     
│   │   ├── bloodApi.ts          //               
│   │   ├── medicalApi.ts        //                 
│   │   ├── patientApi.ts        //                 
│   │   └── publicApi.ts         //                
│   ├── setupTests.ts            //             
│   ├── store                    //  全局状态管理   
│   │   ├── globleSlice.ts       //                  
│   │   ├── index.ts             //            
│   │   ├── listStoreSlice.ts    //                     
│   │   └── storeConfig.ts       //                  
│   ├── style                    //  全局样式   
│   │   ├── index.scss           //              
│   │   └── theme.scss           //              
│   ├── types                    //  ts类型定义   
│   │   ├── config.type.d.ts     //                    
│   │   ├── pagesfunc.type.d.ts  //                       
│   │   ├── server.type.d.ts     //                    
│   │   └── store.type.d.ts      //                   
│   └── utils                    //  全局公共方法   
│       ├── localStorage.ts      //                   
│       ├── pagesFunc.ts         //                
│       ├── request.ts           //  接口请求封装            
│       └── utils.ts             //            
├── theme.js                     //    
├── tree.md                      //   
├── tsconfig.json                //         
└── yarn.lock                    //     
```