SSD React Component — มาตรฐานการเขียน React Component

บริบท

การเขียน React component ของ SSD ต้องใช้รูปแบบ functional component ด้วย TypeScript (TSX) และต้องปฏิบัติตาม naming convention ที่กำหนด เพื่อให้โค้ดอ่านง่าย บำรุงรักษาง่าย และสามารถทำ automation test ได้

กฎหลัก

1. ต้องสร้าง 1 component ต่อ 1 ไฟล์ (ยกเว้น Stateless/Pure components)
2. ต้องใช้ TSX ร่วมกับ React เสมอ ห้ามใช้ React.createElement
3. ต้อง declare Props type และ export ออกมาทุกครั้งที่มี Props
4. ชื่อ Props type ต้องตั้งตามรูปแบบ [ComponentName]Props
5. ต้องใช้ arrow function สำหรับ event handler
6. ต้องใช้ shorthand fragment <>...</> แทน <React.Fragment>
7. ต้องใช้ ref callback ไม่ใช้ string ref

ขั้นตอนการสร้าง Component