สรุปการแบ่งปันเรื่อง React in the RIGHT way ที่งาน ReactBKK 2.0.0

วันนี้มีโอกาสแบ่งปันเรื่อง React in the RIGHT way ที่งาน ReactBKK 2.0.0
น่าจะเป็นเรื่องพื้นฐานที่สุดในงานแล้ว
มีเป้าหมายเพื่อให้คำแนะนำสำหรับขั้นตอนการเรียนรู้เกี่ยวกับ React
เป็นการเรียนรู้แบบมีขั้นตอนดังนี้

เนื่องจากเอกสารและบทความเกี่ยวกับ React และ Ecosystem มันเยอะมาก
แน่นอนว่า มันยากสำหรับผู้เริ่มต้นอย่างมาก
ดังนั้นจึงขอนำเอาขั้นตอนการเรียนรู้จาก React Howto มาแบ่งปัน

เริ่มจากการทำความเข้าใจก่อนว่า React สร้างมาเพื่ออะไร ?

สร้างมาเพื่อแก้ไขปัญหาของระบบขนาดใหญ่
ที่มีการเปลี่ยนแปลงข้อมูลจำนวนมาก
ปัญหาที่ตามมาคือ ระบบทำงานช้า การ render ช้า
เมื่อข้อมูลมีการเปลี่ยนแปลง !!!

โดย React นั้นส่งผลต่อแนวคิดในการพัฒนาอย่างมาก
ทั้ง Virtual DOM และ Component-Driven Development

ยังไม่พอ React ถูกสร้างมาสำหรับ
นักพัฒนาที่ชอบลองของใหม่ ๆ และ ผู้เชี่ยวชาญ
ดังนั้นจึงไม่ใช่เรื่องแปลกที่มันจะยากสำหรับผู้เริ่มต้น !!

จากนั้นมาเริ่มต้นกับ React กัน

พื้นฐานที่จำเป็นอย่างมากสำหรับการเริ่มต้นคือ JavaScript
เนื่องจากเป็นการพัฒนาในส่วนของ Frontend
ต่อมาทำการอ่านและทำตาม Getting start React จาก Official website ซะ
แนะนำให้ทำตามจนจบ

จะสังเกตุได้ว่า ตัวอย่างนั้นไม่ต้องติดตั้งอะไรให้เสียเวลา
รวมทั้งไม่ต้องมาตั้ง project structure อะไรให้วุ่นวายอีกด้วย
เขียนเพียง HTML + CSS + JavaScript เท่านั้น
พร้อมด้วยภาษาใหม่ที่เรียกว่า JSX (JavaScript eXpression) ที่ต้องทำการศึกษาเพิ่ม
ในส่วนนี้ทำให้เราเข้าใจการใช้งาน React ได้ไม่ยาก

ตัวอย่าง code ของ Hello World React

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>Hello React</title>
<script src=https://unpkg.com/react@15.5.4/dist/react.js></script>
<script src=https://unpkg.com/react-dom@15.5.4/dist/react-dom.js></script>
<script src=https://unpkg.com/babel-core@5.8.38/browser.min.js></script>
</head>
<body>
<div id=content></div>
<script type=text/babel>
const element = <h1>Hello, world!</h1>;
ReactDOM.render(
element,
document.getElementById(content)
);
</script>
</body>
</html>
view rawhello.html hosted with ❤ by GitHub

ถ้าไม่ต้องการ download อะไรมากก็เขียน code ผ่าน CodePen ก็ได้

ปล. เอกสารต่าง ๆ เยอะมาก
ดังนั้นแนะนำให้ลองศึกษาและทำตามไปเรื่อย ๆ
ผลที่ได้รับกลับมามันคุ้มค่ามาก ๆ
ที่สำคัญยังไม่ต้องติดตั้งอะไรให้มากมาย

ต่อมาเรื่องที่สำคัญมาก ๆ คือ การออกแบบ Component

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

โดยแต่ละ component จะทำงานอย่างใดอย่างหนึ่ง
แต่ละ component ต้องเป็น dumb component หรือ component ที่ไม่รู้อะไรเลย
ส่วนพวก business logic อย่างนำมาใส่ใน component เด็ดขาด  !!

ส่งข้อมูลต่าง ๆ เข้ามายัง component ผ่านสิ่งที่เรียกว่า props
ส่วนสถานะต่าง ๆ จะผ่าน state

จะเห็นได้ว่า ถ้า component มีจำนวนมาก ๆ

มีการส่งข้อมูลและเปลี่ยน state จำนวนมาก ๆ หรือซับซ้อนแล้ว
จะเกิดความสับสนและวุ่นวายต่อการจัดการอย่างมาก
ถ้าเราอยู่ในระบบที่มีอาการแบบนี้
แนะนำให้แยกข้อมูลต่าง ๆ เหล่านี้ไปไว้ที่อื่น
ซึ่งเป็นที่มาของ Redux นั่นเอง

มีคำถามจากผู้ฟังว่า เรียนรู้เพิ่มเติมจากที่ได้ดี ?
ผมแนะนำให้ดู VDO เพิ่มเติ่มที่ EggHead.io :: Getting Start With Redux

การเรียนรู้ต่อจาก JSX คือ ES6 และ TypeScript

เนื่องจากเป็นมาตรฐานใหม่สำหรับภาษา JavaScript
แน่นอนว่า browser ยังไม่สนับสนุน
ดังนั้นจำเป็นต้องนำ JavaScript compiler มาใช้งานด้วย เช่น Babel
สำหรับการแปลง code ที่เขียนด้วย ES6 ไปเป็น code JavaScript
เพื่อให้สามารถทำงานได้บน browser นั่นเอง

มาถึงตรงนี้ จะเห็นได้ว่า มีหลายอย่างให้ศึกษากันเลยนะ !!

ยังไม่พอเรื่องของ Dependency Manager ก็สำคัญ

ซึ่งปัจจุบันมีทางเลือกให้ลองทางคือ NPM และ Yarn

ต่อมาเรื่องของ JavaScript Bundler

เมื่อมีการใช้งาน NPM/Yarn ในการพัฒนาแล้ว
นักพัฒนาจะเขียน component/module ต่าง ๆ ด้วย CommonJS
แน่นอนว่า code ต่าง ๆ เหล่านี้ไม่สามารถทำงานได้บน browser
ดังนั้นจึงต้องทำการแปลงและรวมไปอยู่ในไฟล์ JavaScript
รวมไปถึงพวก CSS อีกด้วย

โดยเครื่องมือที่ได้รับความนิยมสูงได้แก่ WebPack

ส่วนตัวอื่น ๆ ที่มีการนำมาใช้งานเช่น RollUp และ Browserify เป็นต้น

โดยขั้นตอนต่าง ๆ ที่ผ่านมานั้น
แนะนำให้เริ่มด้วยตนเองทั้งหมด
เพื่อให้เข้าใจว่าการทำงานของแต่ละอย่างเป็นอย่างไร
นี่คือ ความรู้พื้นฐานทั้งหมดที่ต้องมีและเข้าใจ

เมื่อเข้าใจแล้ว ก็สามารถใช้เครื่องมือทุ่นแรงอื่น ๆ ได้แล้ว

Create React App และ Next.js สำหรับการสร้าง project และส่วนการ build ต่าง ๆ

สุดท้ายลงมือทำเถอะนะ

ผมทำการแปลเป็นภาษาไทยไว้ที่ Up1 :: React Howto

Slide อยู่ที่นี่

ขอให้สนุกกับการ coding ครับ

 

ref: http://www.somkiat.cc/react-in-the-right-at-reactbkk/