React Private Component

เนื้อหาของคอร์สนี้ เรียบเรียงขึ้นจาก React.js Fundamental

ตอนนี้เราเหลือ component อยู่ตัวเดียวที่ยังไม่ได้รับการตกแต่งให้สมบูรณ์ นั่นคือ Results component ซึ่งเป็น component ใน path สุดท้ายของระบบนี้

ได้เวลาทำให้ component ตัวนี้มีความสมบูรณ์แล้ว ให้เปิดไฟล์ app/components/Results.js ขึ้นมาแล้วแก้ code ดังนี้

รายละเอียดโดยคร่าวๆ ของ code ข้างต้นก็คือ นำ props scores มาเปรียบเทียบกันว่า คะแนนของใครสูงกว่า ก็จะเป็น winner ไป โดยให้ winner อยู่ฝั่งซ้ายของหน้าจอ ส่วน loser ให้อยู่ฝั่งขวาของหน้าจอ โดยใช้ UserDetails และ UserDetailsWrapper เป็นตัวรับผิดชอบแสดงผลรายละเอียด github user (ซึ่งก็จะมีหน้าตาแบบเดียวกับ path /battle)

มีการเพิ่มปุ่ม ‘Start Over’ เพื่อทำการเริ่มการแข่งขันใหม่ โดยการ route กลับไปที่หน้า /playerOne เพื่อทำการเลือก player คนแรกอีกครั้ง

คราวนี้มีโจทย์มาข้อนึง คือ แล้วหากผลลัพธ์การแข่งขันมันดันเสมอกันล่ะ เพราะตอนนี้ส่วนหัวของ component ได้ฝังไปแล้วว่าเป็น winner กับ loser

ไอครั้นจะสร้าง component ที่มีหน้าตาเหมือนกัน โดยใช้ code เหมือนกัน เพื่อมารองรับการ render ในกรณีที่เสมอกันนั้นก็ไม่ใช่เรื่อง

ด้วยเหตุนี้เราจึงควรทำการ extract เพื่อแยก component ออกมาเป็นส่วนๆ เพื่อสะดวกต่อการ reuse จะเป็นการดีกว่า

Divide and Conquer

เราจะทำการ Refactoring โดยการ Extract component ออกเป็นส่วนย่อยๆ

แยกปุ่ม Start Over

เปิดไฟล์ app/components/Results.js แล้วทำการแก้ไข code ดังนี้

ใน code ข้างบน เป็นการแยก ปุ่ม ‘Start Over’ ออกมาเป็น component แยกต่างหาก ชื่อว่า StartOver แต่เนื่องจากปุ่ม StartOver ไม่ได้เป็นปุ่มที่จะถูกนำไปแชร์กับ component ตัวอื่นๆ นอกเหนือไปจาก Results ดังนั้น เราจึงแยก component ตัวนี้ออกมา แต่วางอยู่ในภายในไฟล์เดียวกับ Results component

ซึ่งการแยก component แบบนี้เราเรียกว่าเป็น private component หรือ component ที่ใช้งานได้เฉพาะกับ component ที่อยู่ในไฟล์นี้เท่านั้น ที่เป็นเช่นนี้เพราะเราไม่ได้ทำการ export component ตัวนี้ออกไป ดังนั้น component ที่อยู่ภายนอกจึงไม่สามารถ access ได้

สร้าง component รองรับกรณีมีผลเสมอกัน

คราวนี้ก็ได้เวลาสร้าง component สำหรับแสดงในกรณีที่ผลการแข่งขันเสมอกันแล้ว

ให้เปิดไฟล์ app/components/Result.js ขึ้นมาแล้วเพิ่ม code ไปดังนี้

จาก code ข้างต้นจะมีการสร้าง private component ขึ้นมาอีกตัวที่ชื่อว่า Tie เพื่อใช้สำหรับ render ในกรณีที่มีผลเสมอกัน เมื่อใดก็ตามที่ props.scores ทั้งสองมีค่าเท่ากัน ระบบจะทำการ render Tie component ขึ้นมา

แยก main container

คราวนี้ลองดู component สามตัวดังต่อไปนี้

จะเห็นว่า ทั้งสาม component มี code ที่ซ้ำกันอยู่ ซึ่งละเมิดกฎ DRY (Don’t Repeat Yourself) ดังนั้น เราจึงต้องทำการ extract ออกมาเป็น component ต่างหาก และสำหรับกรณีนี้ต้องทำเป็น public component หรือทำเป็นไฟล์ต่างหาก เพราะ Home component นั้นอยู่ต่างไฟล์กับ Results component นั่นเอง

ดังนั้น เราจะสร้าง container กลางขึ้นมาหนึ่งตัว เพื่อใช้สำหรับ “ห่อหุ้ม” component ที่เกี่ยวข้อง

สร้างไฟล์ใหม่ใน folder app/containers/ ชื่อว่า MainContainers.js โดยกรอก code ดังนี้

เปิดไฟล์ app/components/Results.js ขึ้นมา แล้วแก้ไฟล์ดังนี้

หลังจากให้เปิดไฟล์ app/components/ConfirmBattle.js ขึ้นมา แล้วแก้ code ดังนี้

จากนั้นให้เปิดไฟล์ app/components/Home.js ขึ้นมาแล้วแก้ code ดังนี้

มีอยู่จุดหนึ่งที่อยากให้ผู้อ่านได้สังเกตก็คือ การสร้าง component แบบ stateless functional แบบ private นั้น เราไม่จำเป็นต้องใช้ this เลย ถือเป็นการช่วยลดความยุ่งยากในการทำงานลงไปเยอะทีเดียว เพราะไม่ต้องมานั่งงงว่า this ตัวนี้อยู่ใน scope ไหน

สำหรับผู้ที่อยากได้ code อ้างอิง สามารถเข้าไปดูได้ที่

https://github.com/himaeng/react-fun-course/tree/master/10-private-component

สรุป

เนื้อหาในตอนนี้ เป็นการสอนการสร้าง component แบบ stateless functional ในแบบ private ที่ไม่จำเป็นต้อง export และสร้างไฟล์ใหม่ให้กับมัน เพราะมันจะถูก reuse ภายในไฟล์ของมันเองเท่านั้น