Roadmap

Frontend Developer | React

เรียนรู้การใช้ React ฉบับพื้นฐาน

หลังจากที่ได้เรียนพื้นฐานของการทำ Frontend Development กันไปแล้ว ขั้นตอนต่อไปก็คือการใช้ UI Library ในการช่วยเราพัฒนาเว็บไซต์ ซึ่งเราจะมาเรียนรู้เกี่ยวกับ Library ยอดฮิตอย่าง React กัน

โดยในบทความนี้จะมีลิงก์ไปยังเว็บไซต์อื่น ๆ ซึ่งจะส่วนใหญ่จะเป็นลิงก์ไปที่ Documentation ของ React ซึ่งเขียนดีมาก ๆ แล้ว หากใครอยากดูคอนเทนต๋์ที่เป็นภาษาไทย หรืออยากเรียนจากในคลิป เราจะมีลิงก์คลิปที่แนะนำให้ดังต่อไปนี้

แนะนำ Course สอน React

หากใครมีเวลาประมาณ 1-2 ชั่วโมง แล้วอยากเรียน React เป็นตั้งแต่ต้นจนจบภายในรวดเดียว แนะนำให้เข้าไปดู Resources เหล่านี้เลย

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 ไม่อัปเดตตามล่ะ ? หาคำตอบได้ที่นี่

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

Effects

React มี Hook ที่ชื่อว่า useEffect ที่สามารถทำให้เราจัดการกับ Side Effects ใน Component ของเราได้

“Side Effect” หมายถึงการเปลี่ยนแปลงหรือการกระทำใด ๆ ที่เกิดขึ้นใน Component นอก Scope ของ React เช่นการดึงข้อมูลจาก API, การเปลี่ยน DOM หรือการตั้ง Timer เป็นต้น (เพิ่มเติม : What is a React Side-Effect?)

Further Reading

สุดท้ายนี้่ การจะเขียน React หากใครอยากเขียน React ให้คล่อง แนะนำให้ลองสร้าง Project แล้วลองเขียนดูเลย โดยจะต้องอาศัยความเข้าใจใน JavaScript (และ HTML) ประมาณหนึ่ง หากใครยังไม่แม่นคอนเซปต์สามารถกลับไปอ่านอีกรอบได้ที่ Roadmap พื้นฐานของ Frontend Developer - Thinc.

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

Build Tools

Router (For Client Side Rendering - CSR)

State Management

Styling

Web Frameworks (Server Side Rendering, Static Site Generation)

UI Libraries

Testing

useMemo and useCallback

Thinc Logo

© THINC. 2023