คุณสมบัติและประโยชน์ของ React

เนื้อหาของคอร์สนี้ เรียบเรียงขึ้นจาก React.js Fundamental

  1. Declarative Programming
  2. Unidirectional Dataflow
  3. Composition
  4. Explicit Mutations
  5. ใช้ JS 100%

declarative programming

ก่อนอื่นเราต้องรู้ก่อนว่าการเขียนโปรแกรมมีสองแบบคือ Imperative กับ Declarative

โดย Imperative นั้นคือการเขียนโปรแกรมสั่งให้คอมพิวเตอร์ทำงานแบบบอกวิธีทำ หรือ How ดังตัวอย่างต่อไปนี้

Code ข้างต้น จะเป็นการนำสมาชิกใน Array มาบวกรวมกันทั้งหมดเป็นค่า total

จะเห็นว่าการเขียนโปรแกรมข้างต้นเป็นการบอกขั้นตอนการทำงานให้กับคอมพิวเตอร์ทีละขั้น ซึ่งเป็นวิธีที่เหล่า dev. คุ้นเคยกันเป็นอย่างดี

แต่ยังมีวิธีการเขียนโปรแกรมอีกแบบหนึ่งที่มีชื่อว่า Declarative อันเป็นวิธีการเขียนโปรแกรมที่บอกกับคอมพ์ไปเลยว่า เราต้องการอะไร (What) ดังตัวอย่างต่อไปนี้

code ข้างต้นมีเป้าหมายในการทำงานเหมือนกับ Code ก่อนหน้านี้ (Imperative) ทุกประการ ต่างกันตรงวิธีการเขียนที่ใช้รูปแบบของ Declarative เท่านั้น

code ข้างต้นจะเป็นการ call function ที่มีชื่อว่า reduce หรือแปลตรงๆว่า “การลดรูป” อันเป็นการลดรูปจาก array ที่มีสมาชิกหลายตัว ให้กลายมาเป็น primitive data ตัวเดียว โดยจะใช้ function ที่เรากรอกเป็น argument (หรือที่เรียกกันว่าเป็น callback) เข้าไปในฟังกัชั่นดังกล่าวเพื่อลดรูป ซึ่งในที่นี้คือ การนำค่า total มาบอกกับค่า current ทีละขั้น โดยระบบจะทำการ loop ไปทีละตัวเริ่มตั้งแต่สมาชิกตัวแรก (ในที่นี้คือ 4) โดยค่า total เริ่มต้นนั้นคือ 0 (argument ตัวที่สอง)

ผลที่ได้จากโปรแกรมทั้งสองตัวจะเท่ากัน ซึ่งก็คือ 15 นั่นเอง

หากเปรียบ code เป็นเจ้านาย และคอมพิวเตอร์เป็นบ่าว เจ้านายแบบ Imperative จะเป็นเจ้านายที่กำกับ และบอกวิธีการอย่างละเอียดทีละขั้นทีละตอน ส่วนเจ้านายแบบ Declarative นั้นจะเป็นเจ้านายที่บอกเป้าหมาย และผลลัพธ์ของงานที่ต้องการ เท่านั้น

เขาว่ากันว่า การเขียนโปรแกรมแบบ Declarative นี้ จะให้ประโยชน์สองประการดังนี้

  1. Code อ่านง่ายขึ้น (ในกรณีที่เราเขียนแบบ declarative คล่องแล้ว)
  2. Bug น้อยลง (อีกนั่นแหละ ในกรณีที่เราเขียนแบบ declarative คล่องแล้ว)

แล้ว React เป็น Declarative ยังไง?

ต้องบอกว่า React ไม่ได้ทำงานแบบ Declarative แบบ 100% เพียงแต่ code ส่วนใหญ่นั้นจะอยู่ในรูปแบบของ Declarative เท่านั้นเอง (เพราะอย่างไรเสีย JavaScript ก็คือภาษาแบบ Imperative ดจะให้มันเป็น Declarative แบบสมบูรณ์ก็คงทำได้ยาก)

ลองมาเปรียบเทียบกับ JS library ตัวดังๆ อย่าง JQuery กันดีกว่า

Code ข้างต้นเป็นการใส่ callback function เข้าไปในปุ่มที่มี id=tylers-btn โดยเมื่อกดปุ่มดังกล่าว ระบบจะทำการใส่ class ที่ชื่อว่า highlight เข้าไปในปุ่ม และเปลี่ยน text บนหน้าปุ่มจาก “Add Highlight” เป็น “Remove Highlight”

คราวนี้ลองมาดูว่า หากต้องการบรรลุผลลัพธ์เดียวกันโดยใช้ React จะต้องทำอย่างไร

เริ่มด้วยการประกาศ component ที่ชื่อว่า TylerBtn จากนั้นก็ assign callback function ที่ชื่อว่า handleToggleHighlight เข้าไปใน propperty ที่ชื่อว่า onToggleHighlight และ assign ค่าของ this.state.highlight เข้าไปใน property ที่มีชื่อว่า highlight ของ TylerBtn component ซึ่งค่าดังกล่าวจะเปลี่ยนไปทุกครั้งที่เกิดการคลิกบน component TylerBtn ดังกล่าว

คราวนี้เรามาดูกันต่อว่า React จะเปลี่ยนค่าใน this.state ได้อย่างไร

โดย code ข้างบนจะถูกเรียกใช้เพื่อทำการเซต “ค่ากลาง” ที่เรียกว่า state ให้เปลี่ยนค่าตามการทำงานของ component TylerBtn

code ข้างต้นจะคอยทำงานอยู่เบื้องหลัง โดยทำงานในลักษณะ Imperative

หมายเหตุ: เรื่องของ state เป็นเรื่องหลักเรื่องนึงใน React แต่ผมจะพูดถึงในภายหลังต่อจากนี้

Composition

การสร้างระบบใน React นั้น จำเป็นต้องเข้าใจคำว่า Composition เสียก่อน ซึ่ง composition นั้นก็คือการนำเอา component หลายๆ ตัวมาวางบนหน้าจอเดียวกัน ภายใต้ component ใหญ่อีกทีหนึ่ง ดังนั้น เวลามอง ui ของ React มันจะให้มุมมองในทำนองว่า มี component ย่อยมาวางบน component ใหญ่ และแต่ละ component ใหญ่ๆ ก็จะวางอยู่บน component ที่ใหญ่กว่าอีกต่อหนึ่ง

อย่างเช่นหน้าจอของ ของ Facebook นั้นจะประกอบไปด้วย component หลายๆ ตัวดังรูป

screen-shot-2559-10-30-at-2-41-53-pm

ทางด้านซ้ายก็เป็น component แสดงภาพ ทางขวาก็มีทั้ง component ที่แสดงชื่อเพจ, component โพส, component ที่แสดงบาร์ (like comment share), รวมไปถึง component comment ด้วย เป็นต้น

หากจะเอารูปข้างต้นมาลองเขียนแบบ React จะได้ประมาณนี้ว่า

จะเห็นได้ว่า การวางหน้าจอแบบนี้เป็นการนำเอา component ต่างๆ มาเรียงร้อยต่อกันแบบเดียวกับ html ที่เราคุ้นเคยนั่นเอง ต่างกันตรง syntax นิดหน่อย (ซึ่งก็คือ JSX เป็น markup language ที่ React ประดิษฐ์ขึ้นมา)

Explicit mutation

จาก code ดังต่อไปนี้

UI ใน React นั้นจะมีข้อมูลฐานอยู่กลุ่มหนึ่งเรียกว่า State อันเป็นข้อมูลที่แสดงทุกๆ อย่างที่จะใช้สำหรับการ render หน้าจอบน React เมื่อใดก็ตามที่เราต้องการแก้ไขข้อมูลใน state เหล่านั้น เราจะต้องประกาศออกมา และทำการ assign ค่าต่างๆ ลงไปให้เห็นชัดเจน ดังตัวอย่างข้างต้น state ของ ui ตอนนี้มีอยู่สองตัวคือ highlight กับ buttonText ซึ่งหากเมื่อใดที่เราต้องการเปลี่ยนแปลงค่า จะต้องมีการเรียกใช้ฟังก์ชั่น setState ข้างต้นขึ้นมา

ใช้ JS 100%

ง่ายๆ เลยครับ เรียนแค่ภาษาเดียวก็พอ และใช้ทักษะของ JS ที่มีติดตัวสร้างระบบได้เลย

เนื้อหาหลักในหลักสูตร React fundamental

เมื่อคุณเรียนจนจบหลักสูตรนี้แล้ว คุณจะได้รับความรู้ต่างๆ ดังต่อไปนี้

  • React
  • React Router
  • Webpack
  • Babel

React router

จาก code ดังต่อไปนี้

ข้างต้นคือตัวอย่างของการทำ router ภายในระบบของ React ซึ่งมันคือการจับคู่กันระหว่าง url path กับ component (หรือ component ใหญ่ที่ครอบ component ย่อยๆ หลายๆ ตัวอีกทีหนึ่ง จนมันกลายเป็น composition component) โดย Code ข้างต้นจะทำการ map url กับ component ดังนี้

foobar.com :                   App->Home

foobar.com/about:           App->About

foobar.com/inbox:           App->Inbox

webpack

Webpack เป็น tools ยอดนิยมสำหรับคนทำ React แต่ปัญหาคือมันชวนงง และเอกสารก็ไม่ค่อยจะดีเท่าไหร่ แต่ก็ช่วยอำนวยความสะดวกให้เราในฐานของ React Dev. ได้หลายเรื่องเลยทีเดียว เช่นการ bundle code ให้เป็น js file ที่มีขนาดเล็ก, การทำ hot reload, การ set root path เป็นต้น

babel

เป็นเครื่องมือในการแปลง code JavaScript ตามรูปแบบที่เราต้องการได้ โดยในปัจจุบันนี้ Babel ถูกใช้เพื่อแปลง code ES6 (Javascript เวอร์ชั่นใหม่) ให้กลายเป็น code ที่ browser ทุกตัวสามารถเข้าใจได้ (browser ส่วนใหญ่ยังไม่รองรับ ES6 เต็มตัว)

หรือภาษาใหม่ๆ ที่ React สร้างขึ้นมาอย่าง JSX นั้น Babel ก็คือ tool หลักที่ช่วยแปลง code เหล่านั้นให้กลายมาเป็น javascript code ที่ browser ต่างๆ เข้าใจได้

สรุป

React เป็น Javascript Library ที่ใช้สำหรับสร้างระบบ front end โดยเน้นการเขียนให้มีความเป็น Declarative มากที่สุด ซึ่งเวลาเราเขียน React จะต้องมองทุกอย่างให้เป็น component แล้วเอามาผสมกันเป็นหนึ่งหน้าจอ (composition)

ข้อมูลทุกอย่างใน React จะเก็บอยู่ใน state ซึ่งหากเราต้องการจะแก้ไขข้อมูลดังกล่าว ให้ไปแก้ไขได้ที่ state ดังกล่าว และเราควรจะออกแบบโปรแกรมให้หน้าจอมีการเปลี่ยนแปลงผ่านการเปลี่ยน state ด้วยจะดีที่สุด นั่นเพราะเราจะไม่จำเป็นต้องไป access ที่หน้าจอโดยตรง แต่ให้จัดการที่ข้อมูลใน State แทน

เครื่องมือในโลกของ React อาจจะดูเยอะแยะไปหมด แต่ในคอร์สนี้เราจะพูดถึงแค่ 3 ตัวนั่นคือ React Router, Webpack และ Babel เท่านั้น ซึ่งรับรองว่าไม่ยาก และจะช่วยให้เราทำงานได้ง่ายขึ้นอย่างแน่นอน