From ccf71825845c1194fc5b6282b765941939b2a81f Mon Sep 17 00:00:00 2001 From: Simon Date: Thu, 15 Feb 2024 10:25:35 +0800 Subject: [PATCH] chore: modify template README file --- templates/template-react-recoil/README.md | 45 +++++++-------- templates/template-react-zustand/README.md | 67 +++++++++++++++------- 2 files changed, 67 insertions(+), 45 deletions(-) diff --git a/templates/template-react-recoil/README.md b/templates/template-react-recoil/README.md index d695e61..1a9c535 100644 --- a/templates/template-react-recoil/README.md +++ b/templates/template-react-recoil/README.md @@ -1,13 +1,18 @@ -# React Vite Recoil Boilerplate +# React TS Boilerplate -## 技术栈 +## Technology Stack -- [Vite](https://vitejs.dev) -- [React](https://reactjs.org) -- [TypeScript](https://www.typescriptlang.org) -- [ReactRouter](https://reactrouter.com/docs/en/v6) +- [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. +- [TailwindCss](https://tailwindcss.com/): Utility-first CSS framework for creating custom designs. +- [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. +- [Recoil](https://recoiljs.org/): A state management library for React. -## 快速开始 +## Quick Start Install project dependencies @@ -21,39 +26,31 @@ Launch the app, it will become available at [http://localhost:3000](http://local yarn dev ``` -## 项目规范 +## Project Standards - xxx - xxx - xxx -## 目录结构 +## Directory Structure `├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc
`├──`[`public`](./public) — Static assets such as robots.txt, index.html etc
`├──`[`src/assets`](./src/assets) — Static assets
`├──`[`src/components`](./src/components) — React public components
`├──`[`src/hooks`](./src/hooks) — React public hooks
-`├──`[`src/models`](./src/models) — Status management file
+`├──`[`src/models`](./src/hooks) — Status Management
`├──`[`src/pages`](./src/pages) — Application and page (screen) components
`├──`[`src/routes`](./src/routes) — Application routes components
`├──`[`src/theme`](./src/services) — External connection service
`├──`[`src/utils`](./src/utils) — Utility functions
-## 安装以下 vscode 插件方便开发 +## Recommended VSCode Extensions -Tailwind CSS IntelliSense +- [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. -> https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss +## Coding Conventions -Prettier - Code formatter - -> https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false#overview - -EditorConfig for VS Code - -> https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig - -## 编码约定 - -> https://github.com/sj-distributor/react-coding-conventions +- Check [here](https://github.com/sj-distributor/react-coding-conventions). diff --git a/templates/template-react-zustand/README.md b/templates/template-react-zustand/README.md index 0d6babe..4d2b455 100644 --- a/templates/template-react-zustand/README.md +++ b/templates/template-react-zustand/README.md @@ -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
+`├──`[`public`](./public) — Static assets such as robots.txt, index.html etc
+`├──`[`src/assets`](./src/assets) — Static assets
+`├──`[`src/components`](./src/components) — React public components
+`├──`[`src/hooks`](./src/hooks) — React public hooks
+`├──`[`src/models`](./src/hooks) — Status Management
+`├──`[`src/pages`](./src/pages) — Application and page (screen) components
+`├──`[`src/routes`](./src/routes) — Application routes components
+`├──`[`src/theme`](./src/services) — External connection service
+`├──`[`src/utils`](./src/utils) — Utility functions
+ +## 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).