React คืออะไร

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

React ใช้หลักการ Virtual DOM ในการทำงาน ทำให้มีประสิทธิภาพมากขึ้น เพราะหน้าเว็บที่เป็นแบบเก่านั้นจะใช้หลักการของ DOM ธรรมดาซึ่งจะเก็บข้อมูลในรูปแบบของ Tree ซึ่งหากมีข้อมูลจำนวนมาก จะทำให้จำนวนชั้น และ กิ่งมีจำนวนมาก หาต้องการอัพเดตข้อมูลในกิ่งไหนทำได้ช้า แต่ Virtual DOM แทนที่จะเก็บข้อมูล โครงการ tag html แบบ DOM นั้นก็จะเก็บเป็น reference ของข้อมูลแทนทำให้ สามารถอ้างอิงและ update ข้อมูลได้เร็วกว่า เหมือน tag div ที่ซ้อนกันหลายๆชั้น แทนที่จะเก็บข้อมูล div tag ทั้งหมดก็เก็บแค่ว่า มี div แบบไหนซ้อนกันยังไงก็พอ เวลาจะ update ก็แค่อ้างอิง tag ที่ต้องการเปลี่ยน แล้วทำการ render ใหมาเท่านั้นเอง ทำให้ประสิทธิภาพของ Virtual DOM เร็วกว่า DOM มา

ต่อมาสิ่งที่เกี่ยวพันกับ Rect หลักๆก็จะมี 3 อันคือ JSX, ES5, ES6

เริ่มกันที่ ES5 จะเป็นมาตรฐาน ECMAScript หรืออาจเรียกได้ว่าเป็น javascript รูปแบบทั่วๆไปก็ได้ ซึ่งถูกพัฒนาเสร็จสมบูรณ์ในปี 2009 ซึ่ง browser ส่วนใหญ่จะรองรับ ES5 เจ้าตัว ES5 ถูกใช้งานมานานเป็นเวลาหลายปีจน browser เกือบทั้งหมดลอง ES5

ES6 จะเป็นมาตรฐาน ECMAScript อันใหม่ที่ถูกพัฒนาเสร็จสิ้นเมื่อปี 2015 มีการปรับเปลี่ยน syntax ให้มีความยืดหยุ่นมาขึ้น ซึ่ง ES6 รองรับใน browser ส่วนใหญ่ในตลาด แต่ใน browser รุ่นเก่าๆจะไม่รองรับรูปแบบการเขียน javascript แบบ ES6 เพราะฉะนั้นหากใช้งานใน browser รุ่นเก่าๆค่อยต้อง check การรองรับไว้ด้วย

JSX หรือรูปแบบที่พัฒนาต่อยอดมาจาก ES6 เพื่อที่จะสามารถใส่ข้อมูลพวก HTML, XML ใน javascript ได้ หลังจากนั้นก็ถูกเปลี่ยน DOM โดยผ่านตัวแปลงที่ชื่อ Babel นั้นเอง ใน JSX นั้นสามารถใช้ attribute บางอันของ HTML ได้เช่น class ต้องเปลี่ยนไปใช้ className แทน เป็นต้น

ตัวอย่างโค้ด JSX

หากใครสนใจก็ลองไปศึกษากันได้ที่ https://reactjs.org/ หรือ https://github.com/facebook/react/ กันได้เลยนะครับ หากผมมีเวลาเขียนบทความ ครั้งต่อไปจะเขียนวิธีการเริ่มใช้งาน Rect ครับ

Leave a Reply

Your email address will not be published. Required fields are marked *