Skip to main content
  • ใช้ 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