skip to content

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

/ 2 min read

Share on social media

react-start สามารถดู 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

Condition / Loop

React Hook (จัดการ state)

Ref:

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)
Related Post

Share on social media