Write code convention FE

[minhhy2801]

Please help add your code convention of FE and BE side Here is an example in FE for you to have a look:

• File- and component names need to be identical.
• Use PascalCase naming convention for filename as well as component name
• Use lint format suggestation
  • https://eslint.org/docs/latest/use/getting-started
  • Rules of Hooks: eslint-plugin-react-hooks
  • JSX accessibility: eslint-plugin-jsx-a11y
  • https://github.com/jsx-eslint/eslint-plugin-react
  • https://typescript-eslint.io/getting-started/
• Use prettier https://prettier.io/
• Use husky https://github.com/typicode/husky
• List rules of commit detail

[bentran1vn]

[ UNIQLO ] FRONTEND - CODING CONVENTIONS

CODING RULE

1. Quy ước đặt tên:

• Wrapper Folder: Lower-Case
  • Function Folder: Title-Case
  • File:
  • Component: Title-Case
  • Not-Component: lower-case

2. Khai báo biến:

• Khai báo biến bằng const.

FOLDER DESCRIPTION

👉 UNIQLO Project
|
└───dist
└───node_modules
└───public
|   └───images
│       └───mainLayout
│           │ image1.png
│           │ image2.png
│
│       └───leaderLayout
│           │ image1.png
│           │ image2.png
└─── src
|    └───apis
|        └───auth.api.ts
|    └───components
|        └───Button
|            |  Button.tsx
|            |  index.ts
|
|        └───Footer
|    └───constant
|        |  httpStatus.ts
|        |  path.ts
|
|    └───context
|        |  app.context.tsx
|
|    └───layouts
|        └───MainLayout
|            |  MainLayout.tsx
|            |  index.ts
|
|        └───HeaderLayout
|
|    └───pages
|        └───Login
|            |  Login.tsx
|            |  index.ts
|
|        └───ProductList
|    └───types
|        |  auth.type.ts
|        |  user.type.ts
|
|    └───utils
|        │  auth.ts
|        │  http.ts
|
│    .editorconfig
│    .eslintignore
│    .eslintrc.cjs
│    .prettierignore
│    .prettierrc
│    package.json
│    vercel.json
│    .gitignore
│    README.md

1.dist:

• Thư mục chứa các file build.

2. src:

• Thư mục chứa mã nguồn. vd: constants, controller....

3.src/apis:

• Chứa các file tương tác với API.

4.src/components:

• Chứa Các Component Folders.

5.src/components/component:

• Chứa Component.
• Chứa các Component có thể tái sử dụng ở nhiều nơi. -> Như Button có thể xài ở nhiều pages Login hoặc Register vì đăng nhập hay đăng kí thì đều phải có nút bấm

6.src/constants:

• Chứa các file chứa các hằng số, chứa những thứ xài chung.

7.src/context:

• Chứa file quản lý các Global State

8.src/layouts:

• Chứa Các Layout Component Folders.

9.src/layouts/layout:

• Chứa Các Layout Component.
• Chứa toàn bộ giao diện của 1 trang web. Ví dụ trang Đăng Nhập thì có Header, Login, Footer. Nếu biến Component Login thành Children thì ra có thể tái sử dụng Header, Footer cho phần Register

10.src/pages:

• Chứa Các Page Component Folders.
• Nơi các Component mà bên trong xử lý logic -> Ví dụ Component Login. Bên trong sẽ gọi API

9.src/types:

• Chứa các types, interface custom.

10.src/utils:

• Chứa các file chứa các hàm tiện ích...