👋 สวัสดี, repo นี้จะเป็นการฝึก refactor React คับ เหมาะสำหรับคนที่เขียน React มาสักพัก
- จำเป็นต้องมีความรู้ React มาหน่อย (แต่จริงๆมือใหม่ก็ลองทำได้)
- ไม่จำเป็นต้องมีความรู้ CSS
ผมตั้งใจสร้าง repo นี้ขึ้นมาเนื่องจากเป็นโค้ดที่ผ่านการใช้งานมาจริงๆ และเป็น business requirement ที่เกิดขึ้นจริง เหมาะสำหรับการฝึกฝนมากๆ หวังว่าจะเป็นประโยชน์กับทุกๆท่านที่ผ่านมาเห็นนะครับ
โค้ดทั้งหมดผมได้มาจาก MUI repository
หลังจาก clone โปรเจคแล้วลองรัน yarn && yarn dev
จะได้หน้าจอแบบนี้ขึ้นมา
เพื่อให้เสมือนจริงมากที่สุด ให้เริ่มทำความเข้าใจโค้ดเองทั้งหมดว่า application นี้เกี่ยวกับอะไร ทำงานอย่างไร
ไฟล์ที่เกี่ยวข้อง
src/App.tsxsrc/useResizeHandle.js
ทำเสร็จแล้วก็เปิด PR มาได้เลยครับ จะได้เป็นตัวอย่างให้ท่านอื่นๆด้วย ถ้าผมมีเวลาจะเข้าไปช่วยรีวิวโค้ดให้
สำหรับใครที่ต้องการฝึกฝนด้วย TypeScript ด้วย ให้ใช้ branch typescript.
เริ่มต้นตัวปุ่มรองรับเม้าส์และการสัมผัส เมื่อลากไปทางซ้ายจะเห็นว่ากล่องสีเทาจะมีความกว้างลดลง และเมื่อลากกลับมาทางขวากล่องสีเทาจะมีความกว้างมากขึ้น
โจทย์คือ เมื่อโฟกัสไปที่ปุ่ม (ด้วยการกด Tab) แล้วกดลูกศรซ้าย-ขวาที่คีย์บอร์ด ความกว้างต้องเปลี่ยนไปที่ละ 1px
จากข้อ 1, ทำให้สามารถ custom ระยะที่เปลี่ยนแปลงเวลากด ลูกศร 1 ครั้ง
- ถ้ากด SHIFT ค้างไว้ด้วย ให้ เอาระยะนั้น คูณ 10
- ถ้ากด ALT ค้าง ระยะจะเป็น 1px เสมอ
ถ้ากดลูกศรค้าง ความกว้างจะเปลี่ยนไปเรื่อยๆ แต่ต้องไม่เกิน maxWidth ที่กำหนดไว้