การแยกไฟล์

ใช้ pattern ที่ดัดแปลงมาจาก Container/Presentational Pattern
- แยกส่วนการทำงานของ logic และ ui ออกจากกัน
- สามารถใช้ความเข้าใจของ MVC pattern
ประเภทของไฟล์
- <name>.main.tsx
  - เปรียบเสมือนการรวมกันของ C และ V หรือ Controller และ View ใน MVC
  - จะมีได้เมื่อทำการ generate source code ของ component แล้วเลือก MAIN
  ? [PLOP] Please choose a generator. (Use arrow keys) ❯ component - Auto generate component in /src/components feature - Auto generate feature in /src/features function - Auto generate utility function in /src/functions hook - Auto generate custom hook in /src/hooks store - Auto generate global state manager in /src/stores variable - Auto generate utility variable in /src/variables ? [PLOP] Please choose a generator. component - Auto generate component in /src/components ? Choose component type (Use arrow keys) ❯ MAIN CONTAINER + CONTENT
- <name>.container.tsx
  - เปรียบเสมือน C หรือ Controller ใน MVC
  - ทำเกี่ยวกับ state และ logic ต่างๆ ของ feature นั้นๆ
  - หากมีความซับซ้อนมากเกินไป แนะนำให้แยกออกเป็น components/<feature-name> เพื่อง่ายต่อการ maintain
- <name>.content.tsx
  - เปรียบเสมือน V หรือ View ใน MVC
  - ทำการแสดง ui โดยรับ props มาจาก <name>.container.tsx
- <name>.model.tsx
  - เปรียบเสมือน M หรือ Model ใน MVC
  - ทำการประกาศ interface/type ไว้ที่นี่
- <name>.module.css
  - ใช้วิธีการของ CSS module
  - สามารถใช้ร่วมกับ PostCSS ได้
  - เพื่อลดความซ้ำซ้อนของ style ใน <name>.content.tsx
- <name>.stories.tsx
  - จะมีอยู่ภายใต้ components/ เท่านั้น
  - เพื่อให้คนในทีมสามารถรับรู้ว่ามี component อะไรให้ใช้ และ ตัวอย่างการใช้
- <name>.test.tsx
  - ไฟล์ unit test

ตัวอย่าง

แบบ main

└── ../
    ├── index.tsx
    ├── <module-name>.main.tsx
    ├── <module-name>.model.tsx
    ├── <module-name>.module.css
    └── <module-name>.test.tsx

แบบ container/content

└── ../
    ├── index.tsx
    ├── <module-name>.container.tsx
    ├── <module-name>.content.tsx
    ├── <module-name>.model.tsx
    ├── <module-name>.module.css
    └── <module-name>.test.tsx

เป้าหมาย

มาตรฐานการทำงาน

สไตล์การเขียนโค้ด

โครงสร้างไฟล์

Packages

Commit