ใน 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 →

ES 6 หรือ ES 2015 เป็นมาตรฐาน javascript ใหม่ที่ออกในปี 2015 ซึ่งในปัจจุบัน browser ส่วนใหญ่รองรับประมาณ 90 % มีเพียงส่วนน้อยเท่านั้นที่ไม่สามารถใช้ มาตรฐานนี้ได้ หากใครพัฒนาระบบที่ยังใช้งาน browser รุ่นเก่าๆให้ระวังตรงนี้ด้วยครับRead More →

หลังจากไม่ได้ update version ไปนาน เหตุผลก็เพราะพยายามปรับปรุงระบบของ application ให้เป็นแบบใหม่ จนในที่สุดก็ ปล่อยตัว update version 3.0 โดย version นี้จะเป็นการปรับปรุงระบบพอร์ต ที่ใช้บันทึกการซื้อขายหุ้นให้สามารถแก้ไข และลบรายการที่เราต้องการได้Read More →

วันนี้ผมจะมาแนะนำอีกหนึ่งคำสั่งใน react เพื่อหากได้มีโอกาศใช้งาน คำสั่งนี้คือ React.createElement เอาไว้เพื่อทำการสร้าง element แบบ dynamic ตามคำสั่งโค้ดที่เราเขียนRead More →

หลังจากที่สร้าง Component เบื้องต้นแล้วที่นี้ก็มาเริ่มใส่ css ให้กับ form ต่างๆหรือ html tag ที่เราต้องการ render ออกมา โดยใน css นั้นจะมีการใช้ attribute class เพื่อกำหนดรูปแบบต่างๆให้กับ html ไม่ว่าจะเป็นเรื่องสี font ขนาด เป็นต้น ซึ่งจะทำให้เจ้า JSX ที่เก็บข้อมูล html นั้นเกิดปัญหาได้เพราะคำว่า class ดันไปต้นกับคำสงวนใน javascript นั้นเอง เพราะฉะนั้นจะต้องหาคำมาแทน จึงใช้คำว่า className แทนคำว่า class และ คำว่า for ให้เปลี่ยนไปใช้คำว่า htmlFor แทน ซึ่งใน React ปัจจุบันนับตั้งแต่ React 16 ขึ้นไปในสามารถใช้คำว่า class ตรงได้เลย แต่ก็จะมีบ้างกรณีที่ไม่สามารถใช้ได้ เพราะฉะนั้น ณ เวลานี้ควรใช้ className ไปก่อนเพื่อความเป็นมาตรฐานและไม่เกิดปัญหาที่ไม่คาดคิดเกิดขึ้นได้ เริ่มแรกผมจะใช้ css จาก bootstrap ซึ่งเป็น css พื้นฐานที่เป็นที่นิยมในปัจจุบันโดยจะใช้เป็น CDN เหมือนเดิมครับ สามารถกดเข้าไปที่ เว็บ bootstrap เพื่อ copy code ในส่วนของ CDN ได้เลยจากลิงค์นี้ครับ bootstrap ให้ทำการสร้างไฟล์ html ขึ้นมาจากนั้น การ copy ส่วน css ใส่ในระหว่างเปิดปิด tag <head></head> ส่วนที่เป็น javascript ให้ใส่ก่อนปิด tag </body> ครับ จากนั้นให้ทำการสร้าง div มี id ชื่อว่า loginForm แล้วในส่วนของ react ก็ใส่ใน tag script type babelRead 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 กันแบบเริ่มต้นง่ายๆด้วยตัวอย่าง Classic อย่างแสดงข้อความ Hello World กัน โดยตัวอย่างนี้จะใช้รูปแบบ include ไฟล์จาก cdn เข้ามาในไฟล์ html ที่สร้างขึ้นแบบง่ายๆก่อนRead More →

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

ใน version นี้มีการเพิ่มข้อมูลการแสดงผลใหม่คือ เงินปันผลสรุปแต่ละปีของหุ้นแต่ละตัว แต่ต้องขอบอกก่อนว่าจะเป็นข้อมูลประวัติการจ่ายปันผลที่ทาง app นี้มีเท่านั้น หากใย้อนกลับไปหลายๆปี ก็จะไม่มีเพราะไม่ได้ข้อมูลย้อนหลังในอดีต แต่เท่าที่ app นี้มีก็ย้อนหลังไปหลายปีเหมือนกัน หวังว่าผู้ใช้งานคงจะเข้าใจและใช้งานบนพื้นฐานที่ว่า จะมีข้อมูลย้อนหลังเก่าๆ ไม่ครบ ซึ่งข้อมูลปันผลรายปีนั้นจะอยู่ในหน้ารายละเอียดหุ้นRead More →