การออกแบบส่วนประกอบของโปรเจ็กต์ หรือ components คือการวางแผนว่าโปรเจ็กต์ของเราจะมีกี่ส่วน ต้องสร้างไฟล์กี่ไฟล์ และไฟล์ที่สร้างขึ้นมามีหน้าที่อะไรบ้าง
หน้าตาโปรเจ็กต์
หากวิเคราะห์จากหน้าตาโปรเจ็กต์ เราอาจจะแบ่งโปรเจ็กต์ออกเป็นส่วนต่าง ๆ ดังนี้
1. ส่วนของการค้นหา (SearchBar)
จะเป็น from ที่รับ input เข้ามา และส่งไปที่ API เพื่อใช้ในการดึงข้อมูลวีดีโอตามคำค้นหามาแสดงผล
2. ส่วนแสดงรายการวีดีโอ (VideoList)
ส่วนนี้ใช้แสดงผลรายการวีดีโอแต่ละรายการ (VideoItem) เมื่อเราได้ผลลัพธ์จาก API กลับมา ไฟล์นี้จะทำหน้าที่ loop ข้อมูลแต่ละรายการ หรือ Video แต่ละ item ออกมาแสดงผล
3. ส่วนแสดงรายการวีดีโอ (VideoItem)
คือรายการวีดีโอแต่ละวีดีโอ แสดงผลภายใต้ VideoList เมื่อรายการใดถูกคลิก ก็จะถูกส่งข้อมูลไปแสดงผลที่ VideoDetail
4. ส่วนแสดงรายละเอียดวีดีโอ (VideoDetail)
ทำหน้าที่แสดงรายละเอียดวีดีโอที่ถูกคลิกมาจาก VideoItem ตัวมันเองแสดงผล iframe ที่เป็น source ของวีดีโอ ทำให้สามารถเล่นวีดีโอได้
5. ไฟล์ App.js
ทำหน้าที่รวมทุก ๆ components เข้าไว้ด้วยกัน รวมถึงการ set ค่าเริ่มต้นของโปรแกรมและการเรียกใช้งาน API ด้วย
ภาพรวมทั้งหมด
โครงสร้างของโปรเจ็กต์
**หมายเหตุ FN ย่อมาจาก Function
Class VS Function
ในการสร้างไฟล์ .js หรือ components ต่าง ๆ เราจะสร้างเป็น JavaScript functions หรือ สร้างเป็น Classes ก็ได้
ซึ่งทั้ง Function และ Class ต่างสามารถสร้าง HTML กลับมาให้เราได้ (โดยใช้ JSX)
และต่างก็สามารถ handles feedback จาก user ได้เช่นกัน (โดยใช้ Event Handlers)
ในโปรเจ็กต์นี้ เราจะใช้ class ใน component ที่มี logic ซับซ้อน
เช่น ไฟล์ App.js และ SeatchBar.js
ส่วน component แบบง่าย ๆ เราจะเขียนแบบ function เช่น ไฟล์ VideoList.js, VideoItem.js และไฟล์ VideoDetail.js
สุดท้ายไฟล์ youtube.js เป็นส่วนของการใช้งาน API เราจะเรียนรู้มันอีกครั้งในตอนใช้งานร่วมกับ Axios
ในตอนต่อไปเราจะติดตั้งโปรเจ็กต์กันแล้วนะคะ แล้วพบกันค่ะ
Sources
