เริ่มต้นเขียนเว็บ 2018 [05] : Create-React-App & State
หลังจากเราทำการสร้าง Server ฉบับง่ายๆไปแล้วด้วย Express บน Nodejs คราวหน้าถึงเวลาที่เราจะทำฝั่งหน้าบ้านกันบ้าง หรือ ฝั่งหน้าเว็บนั้นเอง โดย Tools ที่เราจะใช้ก็คือ React นั้นเอง
ปกติแล้วเวลาจะ New project React ขึ้นมาต้องเซ็ต babel webpack บลาๆ แต่เราก็มีตัวช่วยสำหรับ New project ขึ้นมาก็คือ Create-React-app นั้นเอง
Command ง่ายๆสำหรับ Create-react-app ก็ตามนี้ลองเอาไปรันกันได้เลย
เมื่อทำการรัน npm start ขึ้นมาเราก็จะพบหน้าเว็บใน localhost:3000
ไฟล์สำหรับหน้าเว็บเราจะอยู่ใน App.js โดยโค้ดสำหรับแสดงผลจะอยู่ในส่วนของการ return ออกมา โดยสิ่งที่ return ออกมานั้นจะอยู่ภายใน div เพียง div เดียว หรือ เพียง 1 component
แล้วถ้าเรามีจำนวน div มากกว่า 1 หรือ component มากกว่า 1 เราต้องทำยังไง ?
ง่ายๆ ก็คือครอบ div ทั้งหมด เพียงแค่นี้ก็ไม่ติด error เรียบร้อยแล้ว
ภายใน Return จะเป็นภาษาที่เรียกว่า JSX คือเขียนทั้ง JS รวมกับ HTML tage ได้ โดยมี 1 สิ่งที่แตกต่างจากปกติก็คือ class ใน jsx จะไม่เหมือนกับ class ใน HTML tage จะใช้คำว่า className แทน เนื่องจาก class จะใช้แทน class ในการเขียน OOP
เริ่มต้นความมหัศจรรย์หรือ magic อย่างแรกของ React นั้นก็คือ
STATE !!
State คือสถานที่สำหรับเก็บค่าต่างๆภายในเว็บของเรา เช่น เมื่อเราทำการพิมพ์อะไรซักอย่างก่อนจะส่งไปให้ server เราก็จะทำการเก็บค่านั้นลง state หรือ เมื่อเราทำการดึงค่ามาจาก Database เราก็จะทำการบันทึกลง state จากนั้นจึงจะทำการแสดงผลออกมา
Magic of state
เมื่อเราทำการเปลี่ยนค่าใน state ตัวหน้าเว็บของเราจะทำการ Rerender เฉพาะส่วนที่เกี่ยวข้องกับ state นั้นๆ ถ้าไม่เห็นภาพ เราจะมาเล่า Magic ผ่านตัว Code ให้แก้ไขเฉพาะไฟล์ src/App.js
อธิบายคร่าวๆ ตัวโค้ดจะทำงานตาม life cycle นี้
สำหรับการรับค่าผ่านทาง input เราก็จะยัด function ลงไปใน onChange
เตือนสำหรับ JSX
tag ทุกอย่างใน jsx ต้องทำการปิด tag เสมอ เช่น <br> จะไม่สามารถใช้ได้ต้องเปลี่ยนเป็น <br/> หรือ <input> ต้องเปลี่ยนเป็น <input/>
