ในบ้างครั้งเวลาเราเขียน form ขึ้นมาแล้วมี input ใน form อยู่หลายอันแต่เราต้องการเก็บค่าของ input แต่ละอันทุกครั้งที่มีการเปลี่ยนแปลง แล้วค่อยจัดการ process ต่อเมื่อกดปุ่ม submit form เท่านั้น ใน React.js นั้นจะมีการใช้ state ในการเก็บค่าต่าง เราสามารถประยุกต์ร่วมกับ object event ของ DOM ได้ทำให้เราสามารถเขียน handle event onchange แค่ function เดียวที่รองรับ input หลายๆอันที่อยู่ใน form ได้Read More →

หลังจากที่เราลองสร้าง class component และใช้งาน props มาในบทความก่อนหน้านี้ รอบนี้จะเป็นการใช้ handle event ของ form control และการ ใช้งาน state เบื้องต้น state จะใช้ได้ใน class component เท่านั้น และ state สามารถเปลี่ยนแปลงแก้ไขค่าได้ อีกทั้งยังมี life cycle ของ class มาเกี่ยวข้อง ส่วน function component จะไม่มีการใช้ state ซึ่งการใช้งาน state นั้นจะต้องถูกกำหนดค่าหรือ state เริ่มต้นที่ constructor ของ class component อีกทั้งยังต้องใช้คำสั่ง super ใน constructor อีกด้วยไม่นั้นจะ error ซึ่งเป็นข้อบังคับของทาง React.js เอาละเรามาดูอย่างโค้ดกันเลยดีกว่าโดยผมจะตัดเอาโค้ดในส่วนที่อยู่ในส่วน tag script มานะครับ โดนเริ่มแรกผมจะทำการสร้าง method ทีมีชื่อว่า handleInputChange ใน ClassBasedCompont ตามโค้ดเลยครับ จากนั้นในส่วนของ render ให้เพิ่ม textbox ขึ้นมา 1 อันกำหนดชื่อว่า message จากนั้นกำหนด onChange ให้ทำการเรียกใช้งาน handleInputChange ตามโค้ดด้านล่างเลยครับ **สามารถใช้โค้ดเก่าของบทความก่อนหน้า หรือ download code ได้ จาก Link นี้ครับ เมื่อลองรันแล้วพิมพ์ข้อความใน textbox ก็จะเห็นว่ามีการเรียกใช้งาน handleInputChange ที่นี้ลองแก้ handleInputChange ให้มี param event แล้วทำการ console.log ค่า event.target.name จะเห็นว่าเราสามารถอ้างอิงชื่อ control จาก event.target.name หรือถ้าเราต้องการค่า value ก็จะใช้คำสั่ง event.target.valueRead More →

การใช้งาน prop ใน React.js นั้นจะเป็นการกำหนดค่า properties ต่างๆที่เราต้องการ โดย props นั้นจะใช้กับ component ใน react ซึ่งจะมี component 2 แบบคือ function component กับ class component ซึ่ง class component นั้นจะเป็นแบบเก่าดังเดิมของ React อยู่แล้วส่วน function component นั้นจะเป็น component แบบใหม่ที่จะเอามาตอบโจทย์การใช้งานแบบสั้นๆ และรูปแบบไม่ซับซ้อน อยู่ในรูปแบบ es 6 สามารถเขียนในรูปแบบ arrow function ได้เช่น const Hello = ({name}) => Hello {name}Read More →

ใน React.js นั้นทุกอย่างจะเริ่มต้นด้วย component จากนั้นก็จะมีเรื่องของ state เข้ามาเพื่อกำหนดจังหวะและ logic ในการทำงาน ซึ่งเรื่องของ state จะมาเขียนอธิบายในบทความหน้า แต่บทความนี้จะมาพูดถึง Constructor ซึ่งทาง React.js นั้นได้ออกแบบมาเป็นพื้นฐานรูปแบบทั่วไปเหมือนในภาษา Programming อื่นๆคือ ใช้คำว่า constructor เลยมีการเรียกใช้ super เพื่อใช้ constructor ของ class แม่ตามแบบฉบับ OOP มาตราฐาน ซึ่งการกำหนด constructor ของ class component ชัดเจนทำให้ง่ายต่อการพัฒนา ต่างจากรูปแบบ javascript แบบเก่าที่ใช้งาน constructor ได้สับสน เอาละเรามาดูรูปแบบการใช้งานกัน จากโค้ดจะเห็นมาสิ่งเริ่มต้นทำใน constructor นั้นจะเป็นการกำหนดค่า state และ prop ให้กับ component ที่สร้างขึ้นเพื่อเป็นการกำหนดค่าเริ่มต้น เหมือนกับ การสร้าง object ในภาษานั้นเองรวมไปถึงเพื่อให้ง่ายต่อการกำหนด design state การทำงานของ component ได้อีกด้วย นอกจากนี้ จะเห็นมาเราสามารถใช้คำสั่ง super เพื่อให้เรียกใช้ constructor ของ class แม่ ซึ่งสังเกตว่า Class Car นั้นมีการกำหนด ค่า state power เป็น oil แต่เมื่อ Class ElectricCar สืบทอด Class Car มีการ override state power ให้เป็น Electric นอกจากนี้ยังมีการเพิ่ม state speed อีกด้วย เมื่อสั่ง render component ทั้งสอง Class ก็จะได้ดังรูปครับ จุดสังเกตว่าถ้าเราลองลบคำสั่ง super ใน class ElectricCar จะทำให้Read More →

จากตัวอย่างในบทความก่อน เริ่มต้น Hello World ใน React.js คราวนี้จะลองเขียนแยกออกมาเป็น component เบื้องต้นกัน เริ่มแรกจากโค้ดเก่าให้ทำการแก้โค้ดใน script tag โดยสร้าง Class ที่มีชื่อว่า App ทำการ extends มาจาก React.Component โดยมี method render ที่ return ข้อมูลออกมาเป็นข้อความ tag h1 ซึ่งมีโค้ดดังนี้ เมื่อทำการแก้โค้ดเสร็จ ลองเปิดหน้าเพจดูกับพบว่าเป็นหน้าเปล่าๆ เพราะยังไม่ได้ทำการ render ผ่าน visual DOM นั้นเอง ซึ่งต้องใช้คำสั่ง ReactDOM.render โดยมีโค้ดในส่วนของ script tag ดังนี้ครับ สังเกตว่ามีการประกาศตัวแปร mount ขึ้นมาให้เก็บค่า DOM ที่เราต้องการ render ข้อมูล แล้วใช้คำสั่ง ReactDOM.render ที่ยังคง concept เดิมคือ ReactDOM.render( อะไร, ที่ไหน ) โดย class App ที่เป็น component ที่เราสร้างขึ้นนั้นให้ใช้เป็น close tag ของชื่อ class ที่เราสร้างขึ้นคือ <App /> นั้นเอง เมื่อลอง refresh เพจอีกรอบก็จะแสดงข้อความออกมาตามภาพด้านล่างครับ จุดสังเกตจะเห็นว่าแม้กระทั่งใน class component ก็ยังบังคับให้ใช้ method render แล้ว return ค่าออกมาRead More →

React หรือ React.js ก็แล้วแต่ใครจะเรียก คือ javascript library ที่ถูกพัฒนาโดย facebook ซึ่งออกแบบมาเพื่อสร้าง UI ให้กับ web application ซึ่งจะทำงานส่วนใหญ่เกี่ยวกับ view layer หัวใจหลักของ React นั้นคือ component การที่สร้าง component ขึ้นมาสามารถทำให้ reuse การใช้งานได้ และเมื่อประกอบกันหลาย component กลายเป็น UI ของ Web Application นั้นเองRead More →