☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @mikelopster
ลองไมค์ สัปดาห์นี้ เราจะมาพาเล่น "Library ที่มีคนขอเข้ามามากที่สุดในช่อง mikelopster" นั่นคือ "React" นั่นเองงง
ใน Session นี้เราจะพาทัวร์ feature ต่างๆของ React กันแบบรวดเร็ว ไม่ว่าจะเป็น
- React Component / Props ว่ามีหลักการใช้งานพื้นฐานยังไง (เล่นไปพร้อมกับ JSX)
- พื้นฐานการใช้ CSS กับ React
- Condition / Loop
- การจัดการ state ผ่าน React Hook (ในนี้เราจะพาลอง useState กับ useEffect ก่อน)
- จัดการ router ผ่าน react-router-dom
เพื่อให้ Session นี้ สามารถที่จะเป็น guideline ให้สำหรับคนที่กำลังจะเริ่มศึกษา React ได้ รวมถึง จะนำไปสู่หัวข้อลองไมค์ของสัปดาห์หน้า (สปอยเลย) นั่นคือ
Next.js "Library ที่มีคนขอเข้ามามากที่สุด'กว่า'ในช่อง mikelopster" (Mac มี m3 max แล้วยังมี m3 ultra ได้ เราก็มี มากที่สุด 'กว่า' ได้เช่นกัน) จริงๆ เหตุผลที่เราทำหัวข้อนี้ เพื่อปูพื้นฐานที่จะนำไปสู่ Next.js นี่แหละ เราจะใช้ Next.js โดยไม่รู้จัก React กันไม่ได้นะครับ 😏
document สำหรับ guildeline (เนื่องจาก React เขียน document ไว้อยู่ในระดับดี บทความนี้เราได้ทำเป็น checklist และ Ref บทความต้นฉบับของ React ไว้แทนนะครับ)
mikelopster.dev/posts/react-s...
(เห็นอกเห็นใจ Vue Firebase Masterclass ที่เราทำกันบ้าง ว่างๆก็แวะเวียนไปเที่ยวกันบ้างได้นะครับ 😂)
หัวข้อ
00:00 แนะนำ Session
04:10 แนะนำ React
06:06 Agenda React ที่เราจะมาลองกันวันนี้
08:22 Start project ด้วย Vite / แนะนำ Structure
10:57 แนะนำ React component / jsx
14:14 การ import / export component
18:35 การใช้ props กับ component
21:25 เพิ่ม type checker ให้กับ props ของ component
23:47 การทำ css ใน React component
28:08 แนะนำเบื้องต้นการใช้ Context ของ React (เพื่อส่งข้อมูลข้ามกัน)
30:22 การทำ Condition ใน component
34:24 การทำ Loop ใน component
38:04 แนะนำ React Hook
41:11 ใช้ useState กับ onClick button
44:22 แนะนำ useEffect (ของ Hook)
45:01 useEffect กับ video component
50:49 useEffect กับการดักเฉพาะตัวแปร
51:58 เริ่มทำ Todo List กัน
53:58 useEffect กับการ call API (ดึง Todo ผ่าน mockAPI)
56:41 เพิ่ม delete ให้ Todo List
59:16 เพิ่ม Loading และการใช้ condition กับ component ผ่าน state Loading
1:01:25 เพิ่ม React router สำหรับไปหน้า Edit
1:04:42 React router - ดึง param ผ่าน route ออกมา
1:05:24 React router - เพิ่ม Link จากหน้าหลักไปหน้า Edit
1:06:32 เพิ่ม call API หน้า Edit.jsx และ map data
1:09:11 เพิ่ม input ให้แก้ไข Todo และผูกกับ State
1:12:03 update todo ผ่าน API
1:13:03 สรุปทั้งหมดเราเรียนรู้อะไรกันไปบ้าง
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev กันได้เลย
พิกัดของด้านหลัง : shope.ee/8A54c8cfkf
Enjoy ครับ 😘
Негізгі бет Ғылым және технология มาเรียน React 18 ฉบับ Guideline แบบด่วนจี๋กัน
Пікірлер: 96