199 lines
4.1 KiB
Markdown
199 lines
4.1 KiB
Markdown
<div align="center">
|
|
|
|
# Template Repo for `React + Typescript + Vite`
|
|
|
|
<p>
|
|
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div align="center">
|
|
|
|
## Introduction
|
|
|
|
</div>
|
|
|
|
This is a template repo for projects built with `react` and `typescript` on the basis of `vite`.
|
|
|
|
<div align="center">
|
|
|
|
## Features
|
|
|
|
</div>
|
|
|
|
- Support **`React Hooks`**.
|
|
- Build on **`Vite`**.
|
|
- **`Typescript`** in use.
|
|
- **Code checking and formatting** support.
|
|
- Basic components from **`antd`**
|
|
- **`GraphQL`** support.
|
|
- **`axios`** installed.
|
|
- **Route configuration and guarding** supported by [@syy11cn/config-router](https://github.com/syy11cn/config-router).
|
|
- **Git hooks** support.
|
|
- Use **`yarn`** for package management.
|
|
|
|
<div align="center">
|
|
|
|
## Usage
|
|
|
|
</div>
|
|
|
|
### Fork
|
|
|
|
Fork this repo to your account first.
|
|
|
|
### Rename
|
|
|
|
Rename the repo using the name of your project.
|
|
|
|
### Clone
|
|
|
|
Clone the repo to your local folder.
|
|
|
|
### Develop
|
|
|
|
```bash
|
|
cd <path-to-your-cloned-repo>
|
|
yarn
|
|
yarn dev
|
|
```
|
|
|
|
|
|
|
|
### More Scripts
|
|
|
|
For more `yarn` scripts, please refer to `package.json`
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vite build",
|
|
"serve": "vite preview",
|
|
"precommit": "lint-staged",
|
|
"lint:less": "stylelint --fix \"src/**/*.less\" --syntax less",
|
|
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
|
|
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
|
|
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx",
|
|
"lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
|
|
"prettier": "prettier -c --write \"src/**/*\""
|
|
}
|
|
}
|
|
```
|
|
|
|
<div align="center">
|
|
|
|
## Packages
|
|
|
|
</div>
|
|
|
|
Here are the packages installed (in `package.json`).
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"react": "^17.0.0",
|
|
"react-dom": "^17.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@apollo/client": "^3.4.16",
|
|
"@syy11cn/config-router": "^1.0.5",
|
|
"@types/react": "^17.0.33",
|
|
"@types/react-dom": "^17.0.10",
|
|
"@types/react-router-dom": "^5.3.2",
|
|
"@typescript-eslint/eslint-plugin": "^5.2.0",
|
|
"@typescript-eslint/parser": "^5.2.0",
|
|
"@vitejs/plugin-react": "^1.0.0",
|
|
"antd": "^4.16.13",
|
|
"axios": "^0.24.0",
|
|
"eslint": "^7.10.0",
|
|
"eslint-plugin-react": "^7.26.1",
|
|
"eslint-plugin-react-hooks": "^4.2.0",
|
|
"esprima": "^4.0.1",
|
|
"graphql": "^15.0.0",
|
|
"husky": "^7.0.4",
|
|
"lint-staged": "^11.2.6",
|
|
"prettier": "^2.4.1",
|
|
"react-router-dom": "^5.3.0",
|
|
"stylelint": "^14.0.1",
|
|
"stylelint-config-standard": "^23.0.0",
|
|
"typescript": "^4.4.4",
|
|
"vite": "^2.6.4"
|
|
}
|
|
}
|
|
```
|
|
|
|
- `react` for building user interfaces.
|
|
- `@apollo/client` for sending gql requests.
|
|
- `react-router-dom` and `@syy11cn/config-router` for route configuration and guarding.
|
|
- `typescript` and peer plugins for writing `.ts` or `.tsx` files in `react` project.
|
|
- `esprima` for parsing `typescript` grammar.
|
|
- `vite` for the base build tool.
|
|
- `eslint`, `stylelint`, `prettier` and `editorconfig` for code checking and formatting.
|
|
- `husky` and `lint-staged` for git hooks configuration.
|
|
- `antd` for basic components.
|
|
|
|
<div align="center">
|
|
|
|
## Folders
|
|
|
|
</div>
|
|
|
|
```shell
|
|
src
|
|
│ App.css
|
|
│ App.tsx
|
|
│ favicon.svg
|
|
│ index.css
|
|
│ logo.svg
|
|
│ main.tsx
|
|
│
|
|
├─apis
|
|
├─components
|
|
├─routes
|
|
│ index.ts
|
|
│
|
|
├─typings
|
|
│ images.ts
|
|
│
|
|
├─utils
|
|
└─views
|
|
ErrorPage.tsx
|
|
```
|
|
|
|
<div align="center">
|
|
|
|
## Configuration
|
|
|
|
</div>
|
|
|
|
Modify the following config files.
|
|
|
|
- `.editorconfig`
|
|
- `.eslintrc`
|
|
- `.prettierrc`
|
|
- `.stylelintrc`
|
|
- `tsconfig.json`
|
|
- `vite.config.js`
|
|
|
|
<div align="center">
|
|
|
|
## About
|
|
|
|
</div>
|
|
|
|
### Chinese Introduction
|
|
|
|
[CLICK HERE](https://uestc.feishu.cn/docs/doccnFsR35nFeG2DGkG75b77Pld) to check the Chinese introduction doc to this repo on Lark.
|
|
|
|
### License
|
|
|
|
[MIT](https://opensource.org/licenses/MIT)
|
|
|
|
Copyright (c) 2021, Yiyang Sun
|