-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
67 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,55 @@ | ||
| # React + TypeScript + Vite | ||
| # React TS Boilerplate | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
| ## Technology Stack | ||
|
|
||
| Currently, two official plugins are available: | ||
| - [Vite](https://vitejs.dev): Efficient build tool for modern browsers. | ||
| - [React](https://reactjs.org): JavaScript library for building user interfaces. | ||
| - [TypeScript](https://www.typescriptlang.org): Superset of JavaScript with static type-checking. | ||
| - [ReactRouter](https://reactrouter.com/docs/en/v6): Navigation library for React applications. | ||
| - [Axios](https://axios-http.com/): Promise-based HTTP client for the browser and Node.js. | ||
| - [Ramda](https://ramdajs.com/): Functional programming library for JavaScript. | ||
| - [ahooks](https://ahooks.js.org/): Collection of React Hooks for common tasks. | ||
| - [Zustand](https://zustand-demo.pmnd.rs/): Small, fast and scaleable bearbones state-management solution. | ||
|
|
||
| - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
| - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
| ## Quick Start | ||
|
|
||
| ## Expanding the ESLint configuration | ||
| Install project dependencies | ||
|
|
||
| If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
| ``` | ||
| pnpm install | ||
| ``` | ||
|
|
||
| - Configure the top-level `parserOptions` property like this: | ||
| Launch the app, it will become available at [http://localhost:3000](http://localhost:3000/) | ||
|
|
||
| ```js | ||
| export default { | ||
| // other rules... | ||
| parserOptions: { | ||
| ecmaVersion: 'latest', | ||
| sourceType: 'module', | ||
| project: ['./tsconfig.json', './tsconfig.node.json'], | ||
| tsconfigRootDir: __dirname, | ||
| }, | ||
| } | ||
| ``` | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| ## Project Standards | ||
|
|
||
| - xxx | ||
| - xxx | ||
| - xxx | ||
|
|
||
| ## Directory Structure | ||
|
|
||
| `├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc<br> | ||
| `├──`[`public`](./public) — Static assets such as robots.txt, index.html etc<br> | ||
| `├──`[`src/assets`](./src/assets) — Static assets<br> | ||
| `├──`[`src/components`](./src/components) — React public components<br> | ||
| `├──`[`src/hooks`](./src/hooks) — React public hooks<br> | ||
| `├──`[`src/models`](./src/hooks) — Status Management<br> | ||
| `├──`[`src/pages`](./src/pages) — Application and page (screen) components<br> | ||
| `├──`[`src/routes`](./src/routes) — Application routes components<br> | ||
| `├──`[`src/theme`](./src/services) — External connection service<br> | ||
| `├──`[`src/utils`](./src/utils) — Utility functions<br> | ||
|
|
||
| ## Recommended VSCode Extensions | ||
|
|
||
| - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss): IntelliSense for Tailwind CSS. | ||
| - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false#overview): Code formatting tool. | ||
| - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): Editor configuration consistency. | ||
|
|
||
| ## Coding Conventions | ||
|
|
||
| - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` | ||
| - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` | ||
| - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list | ||
| - Check [here](https://github.com/sj-distributor/react-coding-conventions). |