หน้าที่ของแต่ละส่วน

• src/: project root (ย่อการ import ด้วย @/)

  • assets/

    • css/: เก็บไฟล์ css ที่เป็นระดับ global ของ project
    • images/: เก็บไฟล์รูปภาพทั้งหมด (นับรวม .svg ที่ไว้ใช้เป็น รูปภาพ เท่านั้น)
    • icons/: เก็บไฟล์ที่เกี่ยวกับ icon (ถ้าเป็น .svg เอาเฉพาะที่ไว้ใช้เป็น icon)

  • components/: Generate ได้ เก็บไฟล์ที่เป็น component เพื่อให้มีการเรียกใช่ได้ทั้ง project

  • constants/: Generate ได้ เก็บไฟล์ที่เป็น constant variable สำหรับใช้ร่วมกันใน project

  • functions/: Generate ได้ เก็บไฟล์ที่เป็น function สำหรับใช้ร่วมกันใน project

  • hooks/: Generate ได้ เก็บไฟล์ที่เป็น hook เพื่อใช้ภายใน project

    • ชื่อของ hook จะ ต้อง เริ่มด้วยคำว่า use เช่น useWindowSize

  • pages/: จัดการ routing path และ เป็นที่ไว้วางโค้ดสำหรับการแสดงผล UI

  • services/: เก็บไฟล์ที่เกี่ยวกับการเรียกหาข้อมูลภายนอก

    • เช่น api, หรือการครอบการใช้งานของ web storage, cookie, หรือ library อื่นๆ

  • stores/: Generate ได้ เก็บไฟล์ที่เกี่ยวกับ state management

  • translations/: เก็บไฟล์ที่เกี่ยวกับ การแปลภาษาต่างๆ ไว้ที่นี่ ควรเป็นไฟล์ .tsx เพราะ json ไม่มี type จึงทำให้การใช้งานยากขึ้น