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

​

ภาพรวม Overview

• src/: project root (ย่อการ import ด้วย @/)
  • assets/
    • css/: เก็บไฟล์ css ที่เป็นระดับ global ของ project
    • images/: เก็บไฟล์รูปภาพทั้งหมด
  • components/:
    เก็บไฟล์ที่เป็น component เพื่อให้มีการเรียกใช่ได้ทั้ง project
    • shared/: เป็น component ที่ใช้ร่วมกันได้ในหลายๆ feature
    • <feature-name>/: เป็น component ที่เจาะจงใช้เพียงแค่ feature นั้นๆ
  • features/:
    เก็บไฟล์ที่เป็น component ที่ไว้ใช้แสดง UI ทั้งหน้า (อาจมาจากการรวมกันของหลายๆ component)
  • pages/: จัดการ routing path ด้วยการสร้าง folders และ files โดยที่จะเรียก feature มาแสดง ทำให้โอกาศที่จะมีหน้า ที่คล้ายกันหรือซ้ำกัน น้อยลง
  • hooks/:
    เก็บไฟล์ที่เป็น hook เพื่อใช้ภายใน project
  • services/: เก็บไฟล์ที่เกี่ยวกับการเรียกหาข้อมูลภายนอก เช่น api, หรือการครอบการใช้งานของ web storage/cookie
  • stores/:
    เก็บไฟล์ที่เกี่ยวกับ state management
  • functions/:
    เก็บไฟล์ที่เป็น function สำหรับใช้ร่วมกันใน project
  • variables/:
    เก็บไฟล์ที่เป็น variable สำหรับใช้ร่วมกันใน project

​

รายละเอียด Detail

• components และ features
  • ทั้งคู่เป็น react component
  • ความแตกต่างคือ หน้าที่การใช้งาน
    • components
      • ใช้เพื่อ สร้างโค้ดที่ไว้ใช้ร่วมกัน
      • ใช้เพื่อ ลดความซ้ำซ้อนของโค้ด
      • เป็น โค้ดที่เป็นส่วนหนึ่ง ที่ไว้ใช้ใน feature
    • features
      • ใช้เพื่อแสดง UI โดยประกอบจากหลายๆ component
      • หากมี feature ที่ซ้ำกัน ควรแยกเป็น component
      • ใน 1 feature จะไม่มีการใช้งาน feature อื่น แต่อาจมีการใช้งาน component เดียวกัน
  • ทำไมถึงแยก
    • เพื่อจำแนก จุดประสงค์ การใช้งาน component
    • เพื่อให้ ง่าย ต่อการแก้ปัญหา
    • แบบเข้าใจง่าย คือ
      • components ใช้เพื่อ feature หรือ เพื่อ component ด้วยกัน
      • feature ใช้เพื่อ page เท่านั้น
      • feature ใช้เพื่อ feature ไม่ได้
• ทำไมถึงแยก features และ pages
  • มีจุดประสงค์ให้ pages เป็นตัวกำหนด url path เท่านั้น
  • หากมีหลาย page ที่มี UI หรือวิธีการทำงาน คล้าย/เหมือนกัน จะได้เรียก feature ได้เลย ไม่ต้อง copy page
  • ไม่แยกได้ไหม
    • ควรแยกเสมอ เพราะหากเกิดหน้าที่มี url path ที่แยกออกจากกัน แต่การทำงานคล้าย/เหมือนกัน จะทำให้เกิดความซ้ำซ้อนของโค้ด
    • ไม่รองรับการขยายตัวของ project
    • หากทำในภายหลัง จะเกิดการแก้หลายๆอย่าง ซึ่งอาจมีปัญหาตามมา
• stores ใช้ทำอะไร
  • เก็บ state ในระดับ global
  • สามารถเอามาใช้แทนที่ useState ได้ แต่ไม่แนะนำ
  • เพื่อความเข้าใจ กรุณาอ่านเพิ่มเติม
• วิธีคิด
  • เปรียบเทียบการ แยกกันและรวมกัน ทำอะไร ง่าย/ยาก ขึ้นบ้าง (เหตุผล + ตัวอย่าง)
  • ถ้าเปลี่ยนชื่อ ชื่อไหน สามารถอ่านและเข้าใจง่าย (ในเชิงภาษาอังกฤษ)
  • ต้องคิดเรื่องการเรียง ชื่อ หรือไม่
  • ป้องกันการมี โค้ดซ้ำซ้อน กันอย่างไร
  • เป็นไปตามมาตรฐาน pattern ใดบ้าง หรือ มีการดัดแปลงอะไรมาบ้าง