Skip to content

Commit 13baac0

Browse files
Simoon-FSimoon-F
committed
docs(templates): Update the README document for React templates
- Rewrite the README for the React+TypeScript template with a clearer structure and content - Add instructions for the state management library to the React+Zustand template - Unify the document format and directory structure of the two templates - Remove redundant ESLint configuration instructions, simplifying the document content
1 parent 6fd55d2 commit 13baac0

File tree

2 files changed

+98
-102
lines changed

2 files changed

+98
-102
lines changed

‎templates/template-react-ts/README.md‎

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,51 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13-
14-
```js
15-
export default tseslint.config({
16-
extends: [
17-
// Remove ...tseslint.configs.recommended and replace with this
18-
...tseslint.configs.recommendedTypeChecked,
19-
// Alternatively, use this for stricter rules
20-
...tseslint.configs.strictTypeChecked,
21-
// Optionally, add this for stylistic rules
22-
...tseslint.configs.stylisticTypeChecked,
23-
],
24-
languageOptions: {
25-
// other options...
26-
parserOptions: {
27-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
28-
tsconfigRootDir: import.meta.dirname,
29-
},
30-
},
31-
})
1+
@ -1,55 +0,0 @@
2+
# React TS Boilerplate
3+
4+
## Technology Stack
5+
6+
- [Vite](https://vitejs.dev): Efficient build tool for modern browsers.
7+
- [React](https://reactjs.org): JavaScript library for building user interfaces.
8+
- [TypeScript](https://www.typescriptlang.org): Superset of JavaScript with static type-checking.
9+
10+
## Quick Start
11+
12+
Install project dependencies
13+
14+
```
15+
pnpm install
3216
```
3317

34-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35-
36-
```js
37-
// eslint.config.js
38-
import reactX from 'eslint-plugin-react-x'
39-
import reactDom from 'eslint-plugin-react-dom'
40-
41-
export default tseslint.config({
42-
plugins: {
43-
// Add the react-x and react-dom plugins
44-
'react-x': reactX,
45-
'react-dom': reactDom,
46-
},
47-
rules: {
48-
// other rules...
49-
// Enable its recommended typescript rules
50-
...reactX.configs['recommended-typescript'].rules,
51-
...reactDom.configs.recommended.rules,
52-
},
53-
})
18+
Launch the app, it will become available at [http://localhost:3000](http://localhost:3000/)
19+
20+
```
21+
pnpm dev
5422
```
23+
24+
## Project Standards
25+
26+
- xxx
27+
- xxx
28+
- xxx
29+
30+
## Directory Structure
31+
32+
`├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc<br>
33+
`├──`[`public`](./public) — Static assets such as robots.txt, index.html etc<br>
34+
`├──`[`src/assets`](./src/assets) — Static assets<br>
35+
`├──`[`src/components`](./src/components) — React public components<br>
36+
`├──`[`src/hooks`](./src/hooks) — React public hooks<br>
37+
`├──`[`src/stores`](./src/stores) — Status Management<br>
38+
`├──`[`src/pages`](./src/pages) — Application and page (screen) components<br>
39+
`├──`[`src/routes`](./src/routes) — Application routes components<br>
40+
`├──`[`src/theme`](./src/services) — External connection service<br>
41+
`├──`[`src/utils`](./src/utils) — Utility functions<br>
42+
43+
## Recommended VSCode Extensions
44+
45+
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss): IntelliSense for Tailwind CSS.
46+
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false#overview): Code formatting tool.
47+
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): Editor configuration consistency.
48+
49+
## Coding Conventions
50+
51+
- Check [here](https://github.com/sj-distributor/react-coding-conventions).

‎templates/template-react-zustand/README.md‎

Lines changed: 50 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,53 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13-
14-
```js
15-
export default tseslint.config({
16-
extends: [
17-
// Remove ...tseslint.configs.recommended and replace with this
18-
...tseslint.configs.recommendedTypeChecked,
19-
// Alternatively, use this for stricter rules
20-
...tseslint.configs.strictTypeChecked,
21-
// Optionally, add this for stylistic rules
22-
...tseslint.configs.stylisticTypeChecked,
23-
],
24-
languageOptions: {
25-
// other options...
26-
parserOptions: {
27-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
28-
tsconfigRootDir: import.meta.dirname,
29-
},
30-
},
31-
})
1+
@ -1,55 +0,0 @@
2+
# React TS Boilerplate
3+
4+
## Technology Stack
5+
6+
- [Vite](https://vitejs.dev): Efficient build tool for modern browsers.
7+
- [React](https://reactjs.org): JavaScript library for building user interfaces.
8+
- [TypeScript](https://www.typescriptlang.org): Superset of JavaScript with static type-checking.
9+
- [Ramda](https://ramdajs.com/): Functional programming library for JavaScript.
10+
- [Zustand](https://zustand-demo.pmnd.rs/): Small, fast and scaleable bearbones state-management solution.
11+
12+
## Quick Start
13+
14+
Install project dependencies
15+
16+
```
17+
pnpm install
3218
```
3319

34-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35-
36-
```js
37-
// eslint.config.js
38-
import reactX from 'eslint-plugin-react-x'
39-
import reactDom from 'eslint-plugin-react-dom'
40-
41-
export default tseslint.config({
42-
plugins: {
43-
// Add the react-x and react-dom plugins
44-
'react-x': reactX,
45-
'react-dom': reactDom,
46-
},
47-
rules: {
48-
// other rules...
49-
// Enable its recommended typescript rules
50-
...reactX.configs['recommended-typescript'].rules,
51-
...reactDom.configs.recommended.rules,
52-
},
53-
})
20+
Launch the app, it will become available at [http://localhost:3000](http://localhost:3000/)
21+
22+
```
23+
pnpm dev
5424
```
25+
26+
## Project Standards
27+
28+
- xxx
29+
- xxx
30+
- xxx
31+
32+
## Directory Structure
33+
34+
`├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc<br>
35+
`├──`[`public`](./public) — Static assets such as robots.txt, index.html etc<br>
36+
`├──`[`src/assets`](./src/assets) — Static assets<br>
37+
`├──`[`src/components`](./src/components) — React public components<br>
38+
`├──`[`src/hooks`](./src/hooks) — React public hooks<br>
39+
`├──`[`src/stores`](./src/stores) — Status Management<br>
40+
`├──`[`src/pages`](./src/pages) — Application and page (screen) components<br>
41+
`├──`[`src/routes`](./src/routes) — Application routes components<br>
42+
`├──`[`src/theme`](./src/services) — External connection service<br>
43+
`├──`[`src/utils`](./src/utils) — Utility functions<br>
44+
45+
## Recommended VSCode Extensions
46+
47+
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss): IntelliSense for Tailwind CSS.
48+
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false#overview): Code formatting tool.
49+
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): Editor configuration consistency.
50+
51+
## Coding Conventions
52+
53+
- Check [here](https://github.com/sj-distributor/react-coding-conventions).

0 commit comments

Comments
 (0)