Frontend Developer | React
เรียนรู้การใช้ React ฉบับพื้นฐาน
หลังจากที่ได้เรียนพื้นฐานของการทำ Frontend Development กันไปแล้ว ขั้นตอนต่อไปก็คือการใช้ UI Library ในการช่วยเราพัฒนาเว็บไซต์ ซึ่งเราจะมาเรียนรู้เกี่ยวกับ Library ยอดฮิตอย่าง React กัน
โดยในบทความนี้จะมีลิงก์ไปยังเว็บไซต์อื่น ๆ ซึ่งจะส่วนใหญ่จะเป็นลิงก์ไปที่ Documentation ของ React ซึ่งเขียนดีมาก ๆ แล้ว หากใครอยากดูคอนเทนต๋์ที่เป็นภาษาไทย หรืออยากเรียนจากในคลิป เราจะมีลิงก์คลิปที่แนะนำให้ดังต่อไปนี้
แนะนำ Course สอน React
หากใครมีเวลาประมาณ 1-2 ชั่วโมง แล้วอยากเรียน React เป็นตั้งแต่ต้นจนจบภายในรวดเดียว แนะนำให้เข้าไปดู Resources เหล่านี้เลย
- Quick Start - React Docs
- React Tutorial for Beginners
- React for Everyone | สอน React ตั้งแต่เริ่มจนเขียนแอปได้ | Crash Course Series
What is React?
React คืออะไร ? ทำไมถึงเป็น Library ที่ทุกคนพูดถึงในทุกวันนี้ได้ ? หาคำตอบได้จากคลิปเหล่านี้
Installation
ก่อนจะติดตั้ง React ได้ เราจะต้องติดตั้ง Node.js กันก่อน - วิธีติดตั้ง Node.js และ NPM ในทุก Platform
วิธีการติดตั้ง React - Start a new React Project - React Docs
Describing UI in React - Components
React มีวิธีการจัดการกับพัฒนา User Interface (UI) ด้วยการแยกของแต่ละส่วนใน UI อออกมาเป็นชิ้นเล็ก ๆ (เช่น buttons, cards) โดยแต่ละชิ้นเล็ก ๆ นั้นเราจะเรียกว่า Component
๋JSX (JavaScript Syntax Extension) เป็น Syntax Extension ของ React ที่ทำให้เรา จะทำให้เราสามารถผสม Logic ของ JavaScript ไปพร้อมกับการเขียน Markup ที่คล้ายกับ HTML ได้
Declaring Components
วิธีการสร้าง Component ใน React
JSX
Syntax เบื้องต้นของ JSX - เครื่องมือที่สามารถทำให้เราใช้ Logic เหมือน JavaScript ได้ในตัว UI ของเรา
Props & Children
วิธีการส่งข้อมูลของ Component
Conditional Rendering
JSX ทำให้เราสามารถใส่ Logic ของ React ข้างในตัว UI ของเราได้ เราจึงสามารถใช้ logic เหล่านั้นเพื่อเลือกที่จะแสดงข้อมูลบางส่วนหรือไม่ได้
Rendering Lists
เราสามารถ Render ตัว List ข้อมูลจาก JavaScript มาเป็น UI ได้ ซึ่งเป็นหนึ่งเครื่องมือที่สำคัญที่สุดในการสร้าง UI ได้ React
Interactivity - การตอบสนองกับ User
จุดเด่นของ React คือการที่ User Interface (UI) สามารถ render ใหม่ได้เรื่อย ๆ ตามค่าตัวแปรที่เปลี่ยนไป (เรียกได้ว่าตัว UI จะ ‘React’ ต่อการเปลี่ยนค่าของตัวแปร) ซึ่งเราสามารถ declare และแก้ตัวแปรเหล่าได้โดยการสร้าง ‘state’ ใน Component ของเรา
โดย State จะทำให้ Component นั้นสามารถเก็บค่าตัวแปรได้ เหมือนเป็นความทรงจำของ Component นั้น ๆ และสามารถส่งต่อค่าเหล่านั้นเป็น Props ได้ ซึ่งคอนเซปต์ของการสร้าง State จะเป็นรากฐานของการสร้าง Web Application ใน React ที่สามารถตอบสนองกับ User Input ได้
Responding to Events
เราสามารถเขียน Logic ด้วย JavaScript เพื่อรองรับ Event ที่เกิดขั้นใน UI ได้ ซึ่งใน React จะมีวิธีการส่ง Event Handlers ที่แตกต่างจากการใช้ Vanilla JavaScript นิดหน่อย
Declaring States - ควาทรงจำของ Component
วิธีการประกาศ State - ควาทรงจำของ Component
UI Rendering in React
เมื่อมีการ Update State แล้ว React จะมีการ Re-render ยังไงบ้าง ? ทำไมบางทีเราลอง setState หลายรอบแล้ว State ไม่อัปเดตตามล่ะ ? หาคำตอบได้ที่นี่
- Render and Commit - React Docs
- State as a Snapshot - React Docs
- Queueing a Series of State Updates - React Docs
Updating State
States ใน React สามารถเป็น Object และ Array ได้ ซึ่งเราจะได้ใช้ State ที่เป็น Type เหล่านี้ใน UI ของเราบ่อยครั้ง มาเรียนรู้วิธีการอัปเดต State ประเภทเหล่านี้กัน (ระวังเรื่อง mutation นะ !)
Keeping Components Pure
คอนเซปต์สำคัญที่สุดของการสร้าง UI ใน React คือการที่ทุก Component เป้น pure function ซึ่งแปลว่าทุก function จะไม่มีการแก้ค่าของตัวแปรนอก scope ของตัวเอง โดยการแก้ตัวแปรที่ประกาศด้วย let ใน scope ข้างนอก Component ใน React เป็นสิ่งที่ไม่ควรทำ เนื่องจากจะทำให้เกิด mutation ซึ่งจะทำให้เกิด side effect ที่ตามหาที่มาของ Bug ได้ยาก
Syncing with External Systems and Data
อีกหนึ่งคอนเซปต์ที่สำคัญของ React คือการดึงและ Synchronize ข้อมูลจากนอกระบบนอก React (เช่น การดักฟัง Input จาก Browser, หรือการดึงข้อมูลด้วยการ Fetch) โดย React จะมีวิธีการจัดการกับข้อมูลเหล่านี้หลัก ๆ คือด้วยการใช้ Effect, Ref หรือการสร้าง Custom Hooks
Refs
Ref เป็นการเก็บข้อมูลแบบหนึ่งของ React (คล้ายกับ State) ที่จะไม่ทำให้ Component Re-render เมื่อค่าเปลี่ยนไป โดย ref จะใช้บ่อยในการจัดการกับ API ที่เกี่ยวกับ Browser เช่น การดึงข้อมูลจาก Element
- Referencing Values with Refs - React Docs
- Manipulating the DOM with Refs - React Docs
- useRef - React Docs
Effects
React มี Hook ที่ชื่อว่า useEffect ที่สามารถทำให้เราจัดการกับ Side Effects ใน Component ของเราได้
“Side Effect” หมายถึงการเปลี่ยนแปลงหรือการกระทำใด ๆ ที่เกิดขึ้นใน Component นอก Scope ของ React เช่นการดึงข้อมูลจาก API, การเปลี่ยน DOM หรือการตั้ง Timer เป็นต้น (เพิ่มเติม : What is a React Side-Effect?)
- Synchronizing with Effects - React Docs
- You Might Not Need an Effect - React Docs
- Lifecycle of Reactive Effects - React Docs
- Separating Events from Effects - React Docs
- Removing Effect Dependencies - React Docs
- Reusing Logic with Custom Hooks - React Docs
- useEffect - React Docs
- useRef - React Docs
Further Reading
สุดท้ายนี้่ การจะเขียน React หากใครอยากเขียน React ให้คล่อง แนะนำให้ลองสร้าง Project แล้วลองเขียนดูเลย โดยจะต้องอาศัยความเข้าใจใน JavaScript (และ HTML) ประมาณหนึ่ง หากใครยังไม่แม่นคอนเซปต์สามารถกลับไปอ่านอีกรอบได้ที่ Roadmap พื้นฐานของ Frontend Developer - Thinc.
ทั้งนี้ ข้อดีของ React หนึ่งคือการมี Ecosystem ของเครื่องมือที่ผู้พัฒนาสามารถนำไปใช้ได้อย่างกว้างขวาง หัวข้อดังกล่าวจะพาทุกคนไปรู้จักกับ Library ที่จะทำให้การเขียน React ของเราง่ายยิ่งขึ้น