รู้จักกับ React Hook และ Component

สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video

React คืออะไร

Ref: https://react.dev/ React คือ library สำหรับ web และ native user interfaces ที่ใช้สำหรับการพัฒนา web application ฝั่ง Frontend

• มอง web app ทั้งหมดเป็น component based
• ใช้ภาษา JSX เป็น based ในการจัดการ style และ component (เพิ่มความสามารถของ javascript ให้จัดการฝั่ง html ไปร่วมกันได้) = จริงๆแล้วมันคือ based javascript
• แถม support ทุก platform ด้วย
• ใครที่รู้จัก Vue มา มีสถานะที่คล้ายๆกัน คือเป็น library Frontend เหมือนกัน แต่ไอเดียการพัฒนาจะเป็นไปในคนละแบบกัน

Start project React

Ref: https://react.dev/learn/start-a-new-react-project

• จริงๆเราสามารถลงเพียงแค่ library React แล้วสามารถเริ่ม development ได้เลย
• แม้แต่ React เองก็แนะนำใช้ Next เลยสำหรับการทำงาน

แต่ทีนี้ เพื่อให้เข้าใจพื้นฐานของ React เราจะมาเริ่มเล่นจาก Vite กันก่อน จาก https://vitejs.dev/guide/

Start tutorial

เนื่องจากผมไปเจอว่า Document ของ https://react.dev/learn มันดีอยู่แล้ว ผมจะ follow หัวข้อตามนี้ โดยปรับโจทย์ของเราเป็น Todo list ออกมาแทน

โดยเนื้อหาลองไมค์สำหรับ React เราจะแบ่งออกเป็น 2 ตอนใหญ่ๆ

1. (ตอนนี้) สำหรับปูพื้นฐาน React
2. สำหรับลุยต่อกับ Next.js

เพื่อให้ตอนที่เราทำ Next.js จะได้ไม่สับสนกับพื้นฐานของ Component, Condition, State ของ React ด้วย

หัวข้อที่เราจะเรียนรู้กัน เราจะเรียนรู้ผ่าน 4 หัวข้อใหญ่ๆคือ

1. React Component / Props
2. Condition / Loop
3. React Hook สำหรับจัดการ state
4. React router (React router DOM)

ซึ่งผมมองว่า เนื้อหา 4 เรื่องนี้เป็นเนื้อหาที่ครอบคลุม เนื้อหาเกือบทั้งหมดโดยประมาณของ React และ

• พวกที่เป็น practice การพัฒนาว่าควรวาง project ยังไง เราจะไปคุยกันที่ Next.js อีกที

React Component / Props

• Component คืออะไร ? https://react.dev/learn/your-first-component

• แนะนำ JSX https://react.dev/learn/writing-markup-with-jsx

• Import / Export component (Image component / Header) https://react.dev/learn/importing-and-exporting-components

• การส่ง Props ผ่าน Component (Avatar) https://react.dev/learn/passing-props-to-a-component

• Context (สมมุติว่าเป็นข้อมูล darkmode ว่าเว็บเป็น darkmode หรือไม่) + children https://react.dev/learn/passing-data-deeply-with-context

• React กับ CSS https://www.w3schools.com/react/react_css.asp https://tailwindcss.com/docs/installation/framework-guides

Condition / Loop

• Condition (Checked เหมือน Todo list) https://react.dev/learn/conditional-rendering

• Loop https://react.dev/learn/rendering-lists

React Hook (จัดการ state)

Ref:

• https://react.dev/learn/managing-state
• https://react.dev/reference/react/hooks

React Hook คือ built-in API function ของ React ที่ทำให้สามารถจัดการ State โดยใช้ไอเดียของการ “Hook” React state และมาจัดการผ่าน Lifecycle ของ Hook แทน

• เป็น feature ที่เพิ่มมาหลัง React 16.8

• จุดประสงค์ของการเพิ่มเพื่อลดความยุ่งยากในการใช้การเขียน Component ที่ต้องผูกติดกับ class ของ React = ทำให้ React ไม่จำเป็นต้องมี state อย่าง lifecycle แต่จัดการ lifecycle ผ่าน Hook แทน

• ลองใช้ useState

• ใช้ useRef (เก็บข้อมูลด้านหลัง)

• ใช้ useEffect​ (Connect API)

• ใช้ useReducer (จัดการ state ที่ complex มากขึ้น)

React router dom

Ref: https://reactrouter.com/en/main/start/tutorial

** แต่จริงๆ ตัวนี้ถ้าใครใช้ next ก็จะจัดการ router ผ่าน app router ของ next แทน แต่เผื่อสำหรับใครที่จะใช้ React พัฒนาล้วนๆ

• จัดการ URL ผ่าน params (useParams)