React:Project Videos #2 ออกแบบส่วนประกอบโปรเจ็กต์ (components)

การออกแบบส่วนประกอบของโปรเจ็กต์ หรือ components คือการวางแผนว่าโปรเจ็กต์ของเราจะมีกี่ส่วน ต้องสร้างไฟล์กี่ไฟล์ และไฟล์ที่สร้างขึ้นมามีหน้าที่อะไรบ้าง


หน้าตาโปรเจ็กต์

ภาพที่ 1

หากวิเคราะห์จากหน้าตาโปรเจ็กต์ เราอาจจะแบ่งโปรเจ็กต์ออกเป็นส่วนต่าง ๆ ดังนี้


1. ส่วนของการค้นหา (SearchBar)

จะเป็น from ที่รับ input เข้ามา และส่งไปที่ API เพื่อใช้ในการดึงข้อมูลวีดีโอตามคำค้นหามาแสดงผล

ภาพที่ 2

2. ส่วนแสดงรายการวีดีโอ (VideoList)

ส่วนนี้ใช้แสดงผลรายการวีดีโอแต่ละรายการ (VideoItem) เมื่อเราได้ผลลัพธ์จาก API กลับมา ไฟล์นี้จะทำหน้าที่ loop ข้อมูลแต่ละรายการ หรือ Video แต่ละ item ออกมาแสดงผล

ภาพที่ 3

3. ส่วนแสดงรายการวีดีโอ (VideoItem)

คือรายการวีดีโอแต่ละวีดีโอ แสดงผลภายใต้ VideoList เมื่อรายการใดถูกคลิก ก็จะถูกส่งข้อมูลไปแสดงผลที่ VideoDetail

ภาพที่ 4

4. ส่วนแสดงรายละเอียดวีดีโอ (VideoDetail)

ทำหน้าที่แสดงรายละเอียดวีดีโอที่ถูกคลิกมาจาก VideoItem ตัวมันเองแสดงผล iframe ที่เป็น source ของวีดีโอ ทำให้สามารถเล่นวีดีโอได้

ภาพที่ 5

5. ไฟล์ App.js

ทำหน้าที่รวมทุก ๆ components เข้าไว้ด้วยกัน รวมถึงการ set ค่าเริ่มต้นของโปรแกรมและการเรียกใช้งาน API ด้วย

ภาพที่ 6

ภาพรวมทั้งหมด

ภาพที่ 7

โครงสร้างของโปรเจ็กต์

ภาพที่ 8

**หมายเหตุ FN ย่อมาจาก Function


Class VS Function

ในการสร้างไฟล์ .js หรือ components ต่าง ๆ เราจะสร้างเป็น JavaScript functions หรือ สร้างเป็น Classes ก็ได้

ภาพที่ 9

ซึ่งทั้ง Function และ Class ต่างสามารถสร้าง HTML กลับมาให้เราได้ (โดยใช้ JSX)

ภาพที่ 10

และต่างก็สามารถ handles feedback จาก user ได้เช่นกัน (โดยใช้ Event Handlers)

ภาพที่ 11

ในโปรเจ็กต์นี้ เราจะใช้ class ใน component ที่มี logic ซับซ้อน

เช่น ไฟล์ App.js และ SeatchBar.js

ภาพที่ 12

ส่วน component แบบง่าย ๆ เราจะเขียนแบบ function เช่น ไฟล์ VideoList.js, VideoItem.js และไฟล์ VideoDetail.js

สุดท้ายไฟล์ youtube.js เป็นส่วนของการใช้งาน API เราจะเรียนรู้มันอีกครั้งในตอนใช้งานร่วมกับ Axios

ในตอนต่อไปเราจะติดตั้งโปรเจ็กต์กันแล้วนะคะ แล้วพบกันค่ะ


Sources

Modern React with Redux