สรุปการแบ่งปันเรื่อง 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 [gist id="ad1eb29408829d3ed688c5b54a218e83" file="hello.html"] ถ้าไม่ต้องการ 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 อยู่ที่นี่ https://www.slideshare.net/up1/react-in-the-right-way

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