getDefaultProps

หมายเหตุ: คอร์สนี้เรียบเรียงจาก React.js fundamentals

นี่คือตอนสุดท้ายของ React Basic course ซึ่งผมจะถือโอกาสนี้ในการ “เก็บงาน” ของโปรเจ็กท์ โดยจะทำการตกแต่ง component ซักเล็กน้อย พร้อมกับแทรกความรู้ที่น่าจะมีประโยชน์กับคุณผู้อ่านบ้าง

getDefaultProps

เราลองมาสร้าง component ที่ใช้แสดงผลระหว่างรอการ render component กันดูซักหน่อยดีกว่า

สร้างไฟล์ใหม่ชื่อว่า app/components/Loading.js แล้วเติม code เข้าไปดังนี้

Loading component จะรับ props อยู่สองตัวคือ text (สำหรับแสดงในตอน loading) และ speed (ความเร็วในการทำ animation)

หากสังเกตดีๆ งานนี้ ผมแกล้งเอา style ยัดเข้ามาในไฟล์นี้เลย เพื่อให้ดูถึงความหลากหลายในการใช้งาน style ใน React

จุดที่ผมอยากเน้นก็คือ code ในบรรทัดต่อไปนี้

นั่นคือ การกำหนดค่า default ให้กับ props ของ component ตัวนี้ นั่นหมายความว่า หาก component ใดก็ตามที่นำ <Loading/> ไปใช้ หากไม่ได้กรอกค่า text กับ speed ให้ ตัว <Loading/> ก็จะใส่ค่า default มาให้โดยไม่เกิด error ขึ้น

เมื่อได้ text มาแล้วก็จะนำมา assign เข้าไปให้กับ state.text ของ component นี้ต่อ เนื่องเพราะ text ตัวนี้จะมีการถูก update ค่า และมีผลต่อการแสดงผลของหน้าจอ ดังนั้น เราจึงเลือกที่จะใช้ state แทนที่จะเป็น props

code ภายใน componentDidMount คือการเริ่มจับเวลาเพื่อเติม “.” ต่อท้าย state.text โดยโดยจะต่อท้ายไปเรื่อยๆ จนครบสามจุด เช่น Loading… จากนั้นก็จะวนกลับมาที่ตอนเริ่มต้นที่มีแค่ text เพียงอย่างเดียว (Loading) จากนั้นก็เติมจุดต่อ วนไปวนมาเรื่อยๆ โดยใช้ฟังก์ชั่น setInterval() ซึ่งฟังก์ชั่นที่ใช้ในการตั้งเวลาให้หมุนวนไปเรื่อยๆ

ส่วน code ของ componentWillUnmount (ซึ่งเป็นหนึ่งใน Life Cycle Function ของ React ที่จะถูกเรียกในจังหวะที่ component ตัวนี้กำลังจะถูกลบออกจาก DOM) จะเป็นการหยุดเวลาที่เราต้องให้หมุนวนใน componentDidMount โดยใช้คำสั่ง clearInterval

นำ <Loading/> มาใช้งาน

เปิดไฟล์ app/components/ConfirmBattle.js แล้วแก้ code ดังนี้

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

หากไม่มีอะไรผิดพลาด เมื่อเราลองเข้าไปเปิด localhost:8080 แล้วเล่นไปถึงหน้า /battle และ /results จะเห็นหน้า Loading ก่อนจะมีการ render component หลักในแต่ละ path

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

https://github.com/himaeng/react-fun-course/tree/master/11-the-end

สรุป

ถือเป็นอันจบคอร์สขนาดยาวที่สอนให้ผู้อ่านได้เข้าใจถึงการเขียน React ขั้นพื้นฐานแล้วนะครับ

คอร์สต่อไปจะเป็นการเขียน Javascript แบบ ES6 เพื่อใช้งานกับ React

คำถามคือ ทำไมต้อง ES6 ด้วย คำตอบก็คือ ชาวบ้าน ชาวช่องเขาใช้ ES6 เขียน React กันเกือบทั้งหมด ดังนั้น หากอยากจะอ่าน code ของชาวบ้านเหล่านั้นให้รู้เรื่อง จำเป็นอย่างยิ่งที่ React dev. จะต้องเรียนจนเข้าใจ ES6 ครับ