รู้จักกับ React Hook และ Component
/ 2 min read
สามารถดู 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 ตอนใหญ่ๆ
- (ตอนนี้) สำหรับปูพื้นฐาน React
- สำหรับลุยต่อกับ Next.js
เพื่อให้ตอนที่เราทำ Next.js จะได้ไม่สับสนกับพื้นฐานของ Component, Condition, State ของ React ด้วย
หัวข้อที่เราจะเรียนรู้กัน เราจะเรียนรู้ผ่าน 4 หัวข้อใหญ่ๆคือ
- React Component / Props
- Condition / Loop
- React Hook สำหรับจัดการ state
- React router (React router DOM)
ซึ่งผมมองว่า เนื้อหา 4 เรื่องนี้เป็นเนื้อหาที่ครอบคลุม เนื้อหาเกือบทั้งหมดโดยประมาณของ React และ
- พวกที่เป็น practice การพัฒนาว่าควรวาง project ยังไง เราจะไปคุยกันที่ Next.js อีกที
React Component / Props
-
Component คืออะไร ? https://react.dev/learn/your-first-component
-
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
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)
-
-
- ลองเล่น Stripe payment gateway กันมี Video มี Github
แนะนำ Stripe payment gateway ที่สามารถทำให้เราทำเว็บชำระเงินออกมาได้
- แนะนำ Dynamic programming แบบนิ่มนวลที่สุดมี Video
บทความนี้จะแนะนำเบื้องต้นเกี่ยวกับ Dynamic programming เทคนิคหนึ่งที่ใช้สำหรับแก้ปัญหาที่ ปัญหาย่อยที่ทับซ้อนกัน (overlapping subproblem)