พัฒนาเว็บด้วย React 17 | สำหรับผู้เริ่มต้น [Phase2]
HTML-код
- Опубликовано: 2 июл 2024
- 💪 สนับสนุนช่องด้วยการสมัครสมาชิก (Membership):
/ @kongruksiamofficial
🔥 คอร์สพัฒนาเว็บแอพพลิเคชั่นด้วย React (Real-World Projects):
www.udemy.com/course/react-re...
🛒ซื้อของผ่าน Shopee :
shope.ee/3plB9kVnPd
👉 ผู้เรียนต้องเรียน React Phase 1 มาก่อน
สามารถเข้าเรียนได้ที่ : • พัฒนาเว็บด้วย React 17...
✅Source Code :
github.com/kongruksiamza/reac...
➤ ดาวน์โหลด Nodejs :
nodejs.org/en/
➤ ดาวน์โหลด Visual Studio Code :
code.visualstudio.com/
➤ โค้ด Format Number :
codepen.io/kongruksiamza/pen/...
🗒️ เอกสารประกอบการสอน :
github.com/kongruksiamza/prog...
ประกอบด้วยเนื้อหา
0:00 - สร้างแบบฟอร์ม
06:40 - Form Component Style
14:10 - Event
21:39 - React Hook คืออะไร
29:01 - useState
42:13 - Children to Parent (Bottom-Up)
49:10 - บันทึกข้อมูล (Insert Data)
01:11:37 - Item Style
01:26:38 - useEffect
01:48:41 - Context API (Global State)
02:06:55 - useContext
02:14:20 - Context API (Multiple Value)
02:26:21 - คำนวณรายรับ - รายจ่ายในแอพ
02:49:30 - ReportComponent
03:01:50 - useReducer
03:26:45 - React Router
03:52:46 - Format Number
03:57:33 - Deploy Project
📢 ติดตามข่าวสารของเราได้ที่ :
➤ Facebook : / kongruksiamtutorial
➤ TikTok : / kongruksiamstudio
➤ Instagram : / kongruksiamstudio
➤ Medium : / kongruksiam
#React #JavaScript #KongRuksiam
สำหรับคนที่ Error ช่วง Router เปลี่ยนCode ส่วน Switch แบบนี้ครับ
เหตุผลเพราะว่า React update Version ใหม่ Syntax ปรับตามจาก Switch เปลี่ยนมาใช้ Routes แทนครับ
ขอบคุณครับ
03:44:12
React v6 Router
Switch เปลี่ยนเป็น Routes
=====
ใน element มันไม่สามารถใส่ 2 elements ได้ ต้องทำอย่างไรหรือคะ
@@sasipraphasaisaen8099 เพิ่ม ลงใน element ของ route ครับผม
@@kkpvb ใน element เพิ่ม เป็น 2 ชุดแล้ว แต่เกิด error ... ต้องคั่นด้วยเครื่องหมายอะไรหรือไม่คะ
@@citizens4971 แบบนี้
@@artittilit9968 ทำได้แล้วค่ะ ขอบคุณมากๆๆค่ะ
ขอบคุณค่ะ เป็นการสอนที่ดีมากเลยทีเดียว น้ำเสียงน่าฟัง และเข้าใจง่าย เพราะ เริ่มสอนเป็นจุดๆ ไป พร้อมเสริมวิธีการปรับปรุงตัวเดิมไปด้วย เวลาการสอนพอดี ไม่ช้า หรือเร็วเกินไป ทำให้ผู้เรียนทำ และพิมพ์ตามพร้อมไปด้วยทัน (ส่วนตัว ทำตามทัน 😅 )
และ ส่วนตัวคิดว่า การสอน แบบ มี error เกินขึ้น ไปด้วย (แบบที่ทำอยู่นี้) ดีกว่า การสอนแบบไม่มี error น่าจะทำให้ผู้เรียน รู้จักวิธีการ ค้นหาจุดบกพร่องของโค้ดไปด้วย 👍👍👍
เรียนมา 2 อาทิตย์วันละ 1 ชม.บ้าง 2 ชมบ้างไม่ได้เรียนบ้างเพราะขี้เกียจในที่สุดวันนี้ก็ดูจบจนได้และเขียน React เป็นกับเค้าสักทีน้ำตาจิไหลแต่ก็คงต้องเรียนอย่างอื่นเพิ่มเติมอีก เฮ้อชีวิตที่จะเป็นโปรแกรมเมอร์ที่รอบรู้นี้มันลำบากจัง ยากแค่ไหนก็ต้องอดทน ขอบคุณครับ
มุมานะมากครับ จบภายใน 2 สัปดาห์
เพราะผม 1 เดือนครึ่งแล้ว เพิ่งจบ .. ติดเกม + ติดอนิเมะ + ขี้เกียจ .. อิอิ
Section React Router. - > React v.6 เหมือนจะมีการเปลี่ยนแปลงตรง Switch เปลี่ยนเป็น Routes จะครับ สำหรับบางคนที่ทำแล้วเกิด Error
ชอบที่มีการแบ่งเนื้อหาออกเป็นส่วนย่อยๆ ทำให้เข้าใจง่ายมากๆครับ ขอบคุณคลิปสอนดีๆแบบนี้ครับ
ติดตรง useState ครับ
เวลาป้อนค่าใน input หน้า console แสดง
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
ครับ
สนับสนุนเรียบร้อย ครับ สอนดีมาก เจาะลึกสุดๆ ครับ สุดยอดมาก ครับ
สอนดีและเอียดมากครับ ขอบคุณมากครับ
ยอดเยี่มมากครับ ละเอียดชัด เรียงลำดับ
ขอบคุณมากๆครับ
สอนดีมากเลยครับ
อาจารย์พี่ก้องครับ อยากให้ อ.พี่ก้อง สอน React เชื่อมต่อฐานข้อมูล PHP MySqli ให้ผมหน่อยครับ
ผมยินดีสนับสนุนพี่ทุกเดือนเลยครับ ขอบพระคุณมากครับ
ขอบคุณครับ
สอนดีมากๆค่ะ ขอบคุณนะคะ ละเอียดมาก
ขอบคุณครับสอนดี และสามารถเข้าใจได้ไม่ยากเลยครับ
ช่วง react router หากบางคนที่ยัง Error ให้ลองลดเวอร์ชั่นของ router dom เป็นเวอร์ชั่น 5.2.0 ดูนะครับ
คำสั่ง npm install react-router-dom@5.2.0
ดูๆแล้ว state ก็มีหน้าที่แค่เป็นทางผ่านข้อมูลใช่ไหมครับ รับข้อมูลมาแล้วส่งต่อ เคลียร์ค่าตัวเอง
รับข้อมูลมาใหม่ แล้วส่งต่อ แล้วก็เคลียร์ค่าตัวเอง วนซ้ำอย่างนี้ไปเรื่อยๆ ผมเข้าใจถูกไหมครับ
ขอบคุณมากๆนะครับ
สวัสดีครับขอบคุณสำกรับบทเรียนที่ยอดเยี่ยมครับ ผมขอถามข้อมูลเพิ่มหน่อยครับถ้าต้องการการเก็บค่าไฟล์รูปมันจะเก็บค่ายังไงแล้วจะส่งค่าแบบไหนครับ
ขอขอบคุณ
แรกๆเข้าใจ หลังๆเริ่มมึน
เรียนถึงแค่ useState แล้วไปต่อไม่ได้ครับ มัน งง อ่ะ
มี Code ของตัวอย่างไหมครับ
ที่นาทีที่ 36:05 ตอนที่สร้าง Method itemData
ความหมายของ
title:title,
amount:amount
คือยังไงนะครับผมแค่อยากรู้ว่าเมื่อกด onSubmit ไปแล้วมันจะทราบได้ไงว่าจะเก็บ title ไว้ในไหน
พอจะมี วิธีสอน ใช้react ใช้ร่วมกับ sqlไหมครับ
ทำไมถึง import {BrowserRouter} ไม่ได้คะ
ผมมีปัญหา กับการใช้ replace ในถือมือ คือ ถ้าใช้คำสั่งนี้มีบ้างเครื่องที่ไม่สามารถเข้าใช้งานได้
ผมแก้ไปแล้ว แต่อยากรู้ ว่าถ้าผมจะใช้ มีวิธีแก้ไขไหม
สนุกดี แแต่ทำเเล้วติดเอ่อเรอ 55555
ขอสอบถามหน่อยนะครับ ตรงหัวข้อบันทึกข้อมูล (Insert Data) ครับ
อยากทราบว่า initdata หรือข้อมูลก่อนๆ มันเข้ามาที่ parameter prevItem ได้ยังไงครับ มันทำงานอย่างไรครับ
ไม่ทราบว่ายังทันอยู่รึเปล่านะครับ แต่ว่าที่ข้อมูลinitDataเข้ามาได้เพราะว่า ตอนเราตั้ง state items เราตั้งไว้ว่าให้ค่าเริ่มต้นของitemsเป็น initDataครับ พอเรามาเพิ่มข้อมูลใหม่เราเอาข้อมูลเก่าเป็นฐานในฟังก์ชันคือ(prevItem)ก็จะเอาค่าเดิมของitemsที่ถูกตั้งไว้ก่อนหน้านั้นก็คือinitDataนั่นเองครับ แล้วเอาค่านั้นมาใช้spread operatorเพื่อเอาค่าทุกค่าที่อยู่ในarrayของinitDataเข้ามาต่อท้ายnewItemที่เราเพิ่มเข้ามาใหม่
@@ablaze7013 ขอบคุณมากๆครับ
@@ablaze7013 ขอบคุณครับ ผมก็หาอยู่ว่า เอ๋ มันรู้ได้อย่างไรว่า prev มันคือตัวไหน ประกาศตอนไหนหว่า ขอบคุณครับ งงตั้งนาน จนลองมาหาในคอมเมนต์ดู เลยถึงบางอ้อ 55555
เรียนทั้งสองเฟสจบแล้วครับ แต่จำอะไรได้เลย ต้องเรียนอย่างไรถึงจะจำได้? 😢 แต่อจก้องสอนดีมาก ขอบคุณครับ
เพิ่งจะมาตามครับ 🤣🤣
32:42 ได้ยินเสียงท้องร้อง 🤣🤣
สอนภาษาCหน่อยครับ Pls
Node v20.9.0 มี Error ตรงการทำ Link ครับ ไม่รู้ว่าต้องแก้ไขอย่างไรได้ครับ
40:18 หลังผมกดปุ่ม Submit มันไม่ Clear State ให้ผมพลาดตรงไหนกันนะ
Thank..@k
3:02:55 redux
console.log("ข้อมูลจาก Form : ", newItem); กับ console.log("ข้อมูลจาก Form : "+ newItem); เครื่องหมาย "," กับ "+" มีผลด้วยหรอครับ
+ คือการต่อ string ครับตัวแปรที่นำมาใช้ต้องมีชนิดข้อมูลเป็น string ส่วน , คือนำตัวแปรมาใช้งานโดยมาต่อกับข้อความซึ่งเป็นชนิดข้อมูลที่ไม่ใช่ string ก็ได้ครับผม
สามารถเรียนพื้นฐาน string
ได้ที่ ruclips.net/video/AbjY-ajKgSI/видео.html
และ ruclips.net/video/ReGM0zubxfI/видео.html
@@KongRuksiamOfficial ขอบคุณครับบ
t 35:36
เรียนจนจบคลิป 11.10.2023
จะใส่รูปภาพหรือจะใส่ลิงค์ไปอีกหน้าทำไงครับ ใส่keyword _top,blankในลิงค์ก็ไม่ได้ครับ
ขอบคุณครับ