👋 สวัสดี, repo นี้จะเป็นการฝึก refactor โค้ดคับ เหมาะทั้ง frontend และ backend engineer เลย
- เขียน javascript พอได้
- ไม่จำเป็นต้องมีความรู้ React
- ไม่จำเป็นต้องมีความรู้ CSS
ผมตั้งใจสร้าง repo นี้ขึ้นมาเนื่องจากเป็นโค้ดที่ผ่านการใช้งานมาจริงๆ และเป็น business requirement ที่เกิดขึ้นจริง เหมาะสำหรับการฝึกฝนมากๆ หวังว่าจะเป็นประโยชน์กับทุกๆท่านที่ผ่านมาเห็นนะครับ
โค้ดทั้งหมดผมได้มาจาก MUI repository
หลังจาก clone โปรเจคแล้วลองรัน yarn && yarn start
จะได้หน้าจอแบบนี้ขึ้นมา
เพื่อให้เสมือนจริงมากที่สุด ให้เริ่มทำความเข้าใจโค้ดเองทั้งหมดว่า application นี้เกี่ยวกับอะไร ทำงานอย่างไร จากนั้นให้อ่าน Challenges แล้วเริ่มลงมือทำ
ถ้าไม่เข้าใจจริงๆ ให้อ่าน hint ได้
💡 hint
Application นี้เป็นเว็บไซต์สำหรับนักพัฒนาเพื่อเข้ามาดูโค้ดตัวอย่างแล้วนำไปใช้ ในกรณีที่ต้องการทดสอบโค้ดตัวอย่างสามารถเลือกเปิด interactive demo ได้สองแบบผ่าน CodeSandbox หรือ StackBlitz.
การทำงาน
- การทำงานทั้งหมดจะเริ่มจากไฟล์
src/App.jsเมื่อ user กดปุ่ม ข้อมูลจะถูกประมวลผลให้อยู่ในรูปแบบที่ CodeSandbox หรือ StackBlitz ต้องการ - ข้อมูลนั้นจะนำมาใช้ในการเรียก API เพื่อสร้าง sandbox
เมื่อกดปุ่ม StackBlitz จะเห็นว่า demo ไม่สามารถทำงานได้
Screen.Recording.2565-05-14.at.21.31.17.mov
Requirement
ให้เพิ่ม @babel/runtime เข้าไปใน dependencies ของ StackBlitz เท่านั้น เมื่อกดปุ่ม StackBlitz จะต้องเห็น demo ที่ทำงานได้ถูกต้องทันที
โค้ดตัวอย่างที่เห็นอยู่นั้นเป็น demo ของ Material UI ซึ่งเป็นหนึ่งในไลบรารี่ที่เรามี ทางบริษัทต้องการเพิ่มไลบรารี่ให้มากขึ้นโดยแต่ละไลบรารี่จะต้องมีไฟล์ template ที่แตกต่างกัน หากเปิดดูโค้ดที่อยู่ในไฟล์ getDemoConfig.js จะเห็นว่าฟังก์ชัน tsDemo() และ jsDemo() มี config เกี่ยวกับไฟล์ index.js ด้วยซึ่งเป็นส่วนหนึ่งของ template.
ไฟล์ src/challenges/templates.js มีโค้ดตัวอย่างของอีกหนึ่งไลบรารี่ที่ชื่อ Joy UI.
โจทย์คือให้ refactor โค้ด เพื่อนำ Joy UI มาแสดงเป็น demo และเปิด CodeSandbox กับ StackBlitz ได้ถูกต้อง
ในอนาคตจะมีไลบรารี่เพิ่มขึ้นอีกแน่นอน ฉะนั้นให้คำนึงถึงเรื่องนี้ตอน refactor โค้ดด้วย