Natcha Luang - Aroonchai

Trust me I'm Petdo

Bangkok, Thailand

[React] เริ่มต้นกับ React แบบเร่งด่วน

React เป็น JavaScript framework ตัวหนึ่งที่เพิ่งเปิดตัวไป โดยสร้างอยู่บนแนวคิดของ MVC pattern เพียงแต่ตัดทอนส่วนที่ไม่จำเป็นทิ้ง และเน้นที่การเขียนด้วย JSX เพื่อให้การ code ทั้งหมดอยู่บน JavaScript แทนที่จะต้องเขียนข้ามไป ๆ มา ๆ ระหว่าง JavaScript และ HTML

โดยปกติแล้ว React ถูกออกแบบมาให้ส่งข้อมูลแบบไหลเป็นทางเดียว (Unidirectional) แต่ในความเป็นแล้วไม่มีแอพพลิเคชันตัวไหนที่จะทำงานลักษณะนั้น และผู้สร้างเองก็ทราบถึงตรงนี้ดี จึงได้สร้างแนวทางการออกแบบที่เรียกว่า Flux ซึ่งมีลักษณะตามแผนภาพนี้

Flux simple diagram

ซึ่งจะเห็นว่ามันเป็น Bidirectional แล้วโดยการกระตุ้น event จากฝั่ง user กลับมาได้ (เช่น ผู้ใช้งานกดปุ่มส่งคำสั่ง, การป้อนข้อความลง form, ฯลฯ)

หลังจากที่บทความนี้ถูกเขียนและเผยแพร่ ณ ปัจจุบันนี้ (Dec 13, 2015) การใช้แนวทางของ Flux ไม่เป็นที่นิยมอีกต่อไปแล้ว แต่เป็นแนวทางที่ implement ต่อจาก Flux อีกทีหนึ่ง ซึ่งมีชื่อว่า Redux ไว้จะมาเขียนแนะนำในภายหลังครับ

Hello, world!

เราจะมาทดลองสร้างแอพพลิเคชันแบบง่าย ๆ กัน แต่ก่อนอื่นแล้วตามธรรมเนียมปฏิบัติเราต้อง Hello, world! กันเสียก่อน

สร้าง folder คือว่า react-hello-world เอาไว้ที่ document root จากนั้นดาวน์โหลดไฟล์ที่ต้องใช้งานได้จาก ที่นี่ extract ออกมามองหาไฟล์ใน folder build copy ออกมาวางไว้ที่ project ของเรา

  • JSXTransformer.js
  • react.min.js

เสร็จแล้วสร้างไฟล์​ index.html เพื่อที่จะบรรเลงกันเลย

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app"></div>

  <script src="react.min.js"></script>
  <script src="JSXTransformer.js"></script>
  <script type="text/jsx">
    React.render(<div>Hello, world!</div>,
      document.getElementById('app'));
  </script>
</body>
</html>

สิ่งที่ต้องสังเกตคือ tag <script type="text/jsx"> ตรงนี้จำเป็นต้องระบุว่าเป็น text/jsx ไม่อย่างนั้นจะเกิดข้อผิดพลาดในการแปลง syntax (บราวเซอร์ยังไม่รู้จัก JSX syntax ในตอนนี้)

จากตัวอย่างข้างต้นคือการสร้าง <div> ขึ้นมาข้างในมีข้อความ Hello, world! อยู่ เมื่อสั่ง React.render ก็จะนำเอา element ใน parameter ตัวแรกไปใส่ใน container ที่ระบุไว้ใน parameter ตัวที่สองซึ่งก็คือ <div id="app"> นั่นเอง

ตัวอย่างแอพ TODO list

ถ้าตัวอย่างข้างต้นมันง่ายไป เรามาลองสร้างอะไรที่มัน advance ขึ้นไปอีกนิดกันดีกว่า โดนผมจะสร้างเป็นแอพฯ TODO list ที่มี textbox สำหรับป้อนรายการที่จะทำ จากนั้นถ้าผู้ใช้งานกดคลิกที่รายการแสดงว่ารายการนั้นเสร็จสิ้นแล้ว และจะมีเส้นขีดคร่อม เอาล่ะลองมาดูตัวอย่างที่เสร็จแล้วกันก่อนดีกว่า

See the Pen React TODO List by Nomkhonwaan (@nomkhonwaan) on CodePen.

อัพเดท (Dec 13, 2015) ผมจัดการเขียนใหม่ทั้งหมดด้วย ES6 ใครที่เพิ่งเข้ามาอ่านก็ไม่ต้องงงน่ะครับ ในช่วงเริ่มเขียนบทความนี้ React เพิ่งเปิดตัวซึ่งยังใช้ ES5 เป็นหลักก่อนที่จะ support ES6 ตามมาทีหลัง

หลักการคือสร้างคลาสขึ้นมา 2 คลาสคือ App เป็นคลาสหลักสำหรับ render HTML รวมไปถึง form ของ TODO List ด้วย ส่วนอีกคลาสคือ Item เป็นคลาสย่อยที่ทำหน้าที่ render แต่ละ item ที่ป้อนเข้าไป

และถ้าสังเกตจะเห็นว่าฟังก์ชันสำหรับจัดการกับ event จะอยู่ที่คลาส App ทั้งหมดเนื่องจากเราต้องการทำงานกับ todos ที่อยู่ใน App ซึ่งจำเป็นต้อง bind ฟังก์ชันของ App เข้าไปที่ element item เพื่อให้ item เรียกใช้และทำงานกับ todos ได้นั่นเอง


สำหรับบทความ React ถ้าเป็นไปได้ผมจะพยายามเข้ามาอัพเดทอยู่ตลอด เนื่องจากเทคโนโลยียังใหม่และมีการเปลี่ยนแปลงที่ค่อนข้างเร็วมาก สำหรับตอนนี้ยังไม่แนะนำให้เอาไปใช้กับงาน production นอกเสียจากว่างานนั้นพร้อมที่จะรับกับการเปลี่ยนแปลงได้ครับ

Comments