มาเรียน React 18 ฉบับ Guideline แบบด่วนจี๋กัน
Вставка
- Опубліковано 15 лип 2024
- ☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @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 ครับ 😘 - Наука та технологія
ขอบคุณมากค้าบบ
เข้าใจได้มากขึ้นเพราะคลิปพี่เลย ขอบคุณมากค่ะ
อธิบายให้เข้าใจง่าย สอนดีมากครับ
สวยงามครับ
สอนดีมากครับ ได้ช่องเทพเพิ่มอีกช่องแล้ว
ขอบคุณมากครัฟ คอนเท้น ซิ่งๆ ตอบโจทย์คนยุคใหม่
คอนเท้น เหมาะกับการฟังเพื่อทบทวนความเข้าใจของตัว Tools มากคับ
เนื้อหาดีมากครับ
สอนดีมากค่ะ ขอบคุณค่ะ
ขอบคุณณครับ
คลิปสอนดีมากเลยครับ เหมาะสำหรับคนที่ต้องการแต่เนื้อๆเลย สามารถเห็นภาพการทำงานได้จริง ติดตามต่อไปครับ เป็นกำลังใจให้ครับ💖💖
ทั้งเนื้อหาดี ทั้งฮา เยี่ยมเลย
ขอบคุณครับ
สอนดี เข้าใจง่ายมากครับ ผมมาจาก Vue ดูแล้วแทบจะไม่หลุดเนื้อหา
กด ซับละครับ คอนเท้นดี
สุดยอดมากครับ
ขอบคุณมากครับ
ดี ดี มากๆ FC ตลอดไปปปป
รอ next เลยครับ
สอนดีมากเลยครับ ขอบคุณมากครับ
ขอบคุณอย่างสูง คุณเป็นพลังงานให้กับเราได้ 😘
พี่เขาพูดประมาณว่า ไหนเมื่อชวนคนเข้า vue ไม่ได้ นั้นผมก็เข้าร่วม react ไปเลยละกานนนน 555
ข้าบอกให้เจ้าต่อต้าน ไม่ใช่เข้าร่วม 5555 (react มันยังมีความนิยมสูงเมื่อเทียบกับ Vue ด้วยเรื่องของความน่าเชื่อถือของผู้พัฒนา react มีภาษีมากกว่า)
หากไม่ต้องต้านก็จงเข้าร่วม 5555
แน่นอน ตอนนี้ความทรงจำของ vue ผมเริ่มจะลืมเลือนเรื่อยๆและ 😂
@@mikelopsterพี่เป็นเหมือนดังอนาคินที่กลายเป็น dark vader อะครับ 555
@@nuthaponax7122 เรียกข้าว่าอนาคิน ตอนนี้ข้าลืม vue ไปหมดแล้ว 😂
ที่รอคอย
เห็นไวมากกก 😂
react มาแล้ววววววววววว
Excellent course. Your explanation while coding along is easy to follow. Thank you and keep it up!
ช่องคุณภาพครับ ตามดูมาตั้งแต่คลิปแรกๆ เป็นช่องเดียวที่ผมว้าวมาก เปิดมุมมองให้กว้างขึ้นมากๆครับ
ขอบคุณมากเลยนะครับ 🙏
อยากได้แบบนี้แต่เป็น next typeScript ครับ🎉
react ครับ หางานง่ายดี
ส่วนตัวชอบ vue มากกว่าจากที่ได้ลอง ปล. คอนเทนต์ดีครับติดตามมาสักพักล่ะ อธิบายเข้าใจง่าย ซึ่งบ่งบอกว่าเข้าใจสิ่งนั้นจริงๆ
ขอบคุณมากสำหรับการสนับสนุนเราเช่นกันนะครับ 😁
ต่อ่ next เลยค้าบบ
soon 😆
รอแบบ MERN Stack นะครับจารย์ 😊
ผมก็ชอบ vue มากกว่า แต่งานประจำเป็น react หนีไม่ได้ 555
ไม่ต่างจากผมเท่าไหร่ 😂
สอนดีเข้าใจง่ายแต่พูดเร็วและติดกันไปหน่อยครับ ดูหายใจไม่ทันเลยครับ
Dotnet webapi หน่อยงับบบบบบบบ😊😊😊
ขอ svelte
❤
Angular หน่อยครับ
น่าสนใจ
อยากให้พี่อธิบาย Microservices ครับ ผมดูหลายๆที ผมยังไม่ค่อยเข้าใจ
เรื่องนี้เดี๋ยวผมขอเก็บไว้ใน checklist ก่อนน้า 😁
รีวิว :
ไกด์ไลน์นี้ดีมากๆ เหมือนเอาไปใช้งานจริงสุดๆ แต่ว่า ไม่ค่อยเหมาะสมกับมือใหม่ ที่ไม่รู้จัก การเขียนโปรแกรมเลย เพราะฟังก์ชั่นบางอย่างที่ไม่รู้จัก ต้องไปทำความเข้าใจกันหลังไมค์ แต่ๆๆ มองเป็นมุมมอง ภาพรวมดีมากๆ ทำให้เห็นภาพการทำงาน หรือความสามารถของโปรแกรม ดูจบแล้วครับ รอพาร์ท 2ครับบ
ขอบคุณสำหรับคำแนะนำมากๆนะครับ จริงๆผมก็อยากทำเป็น Course นะ แต่ผมพึ่งทำ Vue ไปเองงง 😂
@@mikelopster รอแบบ MERN Stack นะครับบ
+++@@icejmmm
อธิบายดีมากค่าา แต่หนูต้องกดแบบ 0.75 😂😂😂😂 สมองช้าฟังไม่ทัน
อยากได้ vue work shop อีกครับ ชอบvue มากกว่า 55
น่ารักมาก เดี๋ยวผมหาจัดมาอีกแน่นอน ใครขอ framework นี้มา ok เสมอ 😆
มีสมัครสมาชิกยังครับ
เป็นคลิปสอนที่ผมดูแล้วไม่ง่วงเลยครับ5555
สอนโคตรดีเลยครับ5555
ขอฝากน้อน Svelte หน้าใหม่ไฟแรง โดยเฉพาะกับสายชอบทำ Side-Project อย่างผม อันนี้ไว้ในอ้อมอกอ้อมใจด้วยนะงับ 🥺
ว่าแล้ว ว่าน้อนคนนี้ต้องมีคนพูดถึงแน่😂
กำลังคิดคอมเม้นอยากให้สอน react เลยครับ 555
คอนเทนท์ เนื้อๆ สำหรับคนมีพื้นฐาน programing structural หรือ OOP มาก่อนประมาณนึง จะเข้าใจได้ ไวมาก
เนื้อหาดีครับ แต่พูดเร็ว มือใหม่ฟังและคิดตามไม่ทัน
ลองปรับ speed ลงเป็น 0.75x ดูครับเผื่อจะช่วยได้ ขอบคุณครับผม 🙏🏻
สวัสดีครับ ผมคนนึงที่ใช้ vuejs มาสักพักแล้ว เริ่มจาก vuejs nuxtjs quasar จนถึงเวลาที่ต้องทำแอปก็ได้นำ capacitorjs มาใช้งานร่วมกับ vuesjs ด้วย พอมาถึงตอนนี้ พวก react วนเวียนมาในชีวิตบ่อยมากๆ จนต้องลองศึกษาไว้บ้าง ผมมีความเห็นว่า vuejs ใช้งานดี ใช้งานง่าย ถ้าอยากจะใช้ vuejs ทำแอป มีเครื่องมือตัวไหนอีกบ้างครับ ? ขอบคุณครับ
จริงๆ นอกจาก pinia (state management), nuxtjs (ตัวทำ SSR) ตัวอื่นๆก็แล้วแต่โจทย์แล้วนะครับ ไม่มีตัวไหนเป็นพิเศษเลย
ส่วนพวก style ปกติทางผมก็ใช้ tailwind เป็น base ในการจัดการครับ 😁
น้องครับ พี่รบกวนถามหน่อยครับ พี่เคยเรียน JavaScript มา พื้นฐานไม่แน่นเลย ทิ้งนานไปหลายเดือน ทำงไงดีครับ จะมาเรียน React คับ
สำหรับช่องผมเอง ผมแนะนำทบทวนผ่านหัวข้อนี้ของช่องผมได้น้า
ua-cam.com/video/XQdyV_x4UKA/v-deo.html
แล้วลองวนกลับมาดู React อีกทีหนึ่งก็ได้นะครับ กับอีกวิธีแนะนำ ฝึกฝนผ่าน leetcode.com/ ได้เช่นกันนะครับ จะสามารถฝึก programming skill คู่กับ javascript ไปด้วยได้นะครับ 😁
ไม่รู้มีคนถามไปยัง แต่อยากรู้ชื่อ theme คับ สีสวยมาก
ใช้ theme Dracula ครับ สีได้ตามนี้แน่นอล 😁
0:55 555555
รอแอสโตรฉบับฟังไมค์อยู่น๊ะคร๊าบบบบบ
พี่ครับตัวที่คล้ายกับตัวนี้ ''' แต่หันไปอีกด้านกดยังงัยครับ
มันคือตัว backquote อยู่ตำแหน่งเดียวกันกับตรงเปลี่ยนภาษาซ้ายบน ถ้าใช้เป็นจุดเดียวกับเปลี่ยนภาษาลอง search วิธีดูเพิ่มเติมได้น้า มันจะมีวิธีกดอยู่ครับ
ในเมื่อ ต่อต้าน ไม่ได้ ก็ต้องเข้าร่วม
ตอนนี้ vue นี่ก็จะเริ่มเบลอๆหน่อย 😂
สงสัยครับ ทำไม ตอนท้าย แก้ ข้อมูลด้วย axios แล้ว ส่งเป็น put มันถึง work ครับ ไม่จำเป็นต้องส่งเป็น patch เหรอครับ เพราะว่าเราแก้ แค่ name
จริงๆ มันควรเป็นอย่างนั้นครับ ตามหลักของ HTTP Verb put คือแก้ทั้งหมด, patch คือแก้บาง field
แต่ทีนี้มันขึ้นอยู่กับวิธี implement ของแต่ละที่ด้วยน้า บางที่อาจจะมองว่าใช้ patch, put สามารถแก้ไขราย field ได้เหมือนกัน (อย่าง mockapi ก็เป็นที่หนึ่งที่สามารถทำได้)
HTTP Verb มันเป็นเพียงข้อตกลง ขึ้นอยู่กับคน implement service ครับ จริงๆของ mockapi ทั้ง put, patch จะให้ผลลัพธ์ที่เหมือนกันนะครับ (จริงๆ ผมก็พึ่งรู้ตัวเหมือนกันว่าใช้ put ไป 😂)
กระจ่าง ขอบคุณครับ😁@@mikelopster
เพื่อนผมบอกเทพ react พอให้เปิดดู Highlight components render เท่านั้นแหละหุหุ ผมไม่เทพนะ แต่จะพยายาม 555
go go krub 😆
อธิบายดีครับ แต่ส่วนตัวผมว่าพูดเร็วไปนิดหน่อย ผมลูกครึ่งบางทีฟังไม่ชัดหรือไม่ทัน ปรับ 0.75 ก็ยานอีก ชีวิต 😵💫
ขออนุญาตสอบถามเป็นข้อมูลครับ ปกติ ถ้าคลิปมีพวก subtitle สามารถช่วยได้เยอะไหมครับ 🙏
@@mikelopster สำหรับผมจะซับไทยหรืออังกฤษช่วยได้มากขึ้น 70% เลยครับ
@@Kaxion_Complexขอบคุณสำหรับข้อมูลมากนะครับ เพราะจริงๆผมก็อยากทำซับเหมือนกัน เผื่อเป็น improvement ของช่องเราได้ครับ 😁
VUE NUXT ดีกว่าครับ ไปล่ะ 5555
ผมเป็นคนหนึ่งที่ชอบ Vue แต่ React พรากสิ่งนั้นไปจากผม
หัวใจคนเราย่อมเปลี่ยนได้เสมอครับ 😏
ผมจะย้อนไปดูvueพี่ครับ 5555555555
เยี่ยม เอาหมดเลยนะทั้ง 2 framework 👍
ขอบคุณครับ
ขอบคุณครับ