พัฒนาเว็บด้วย React 17 | สำหรับผู้เริ่มต้น [Phase1]

💪 สนับสนุนช่องด้วยการสมัครสมาชิก (Membership):
/ @kongruksiamofficial
⏰ อัพเดตเนื้อหา React เบื้องต้น Phase 2 :
• พัฒนาเว็บด้วย React 17...
🔥 คอร์สพัฒนาเว็บแอพพลิเคชั่นด้วย React (Real-World Projects):
www.udemy.com/course/react-re...
🛒ซื้อของผ่าน Shopee :
shope.ee/3plB9kVnPd
🗒️ เอกสารประกอบการสอน :
github.com/kongruksiamza/prog...
➤ ดาวน์โหลด Nodejs :
nodejs.org/en/
➤ ดาวน์โหลด Visual Studio Code :
code.visualstudio.com/
➤ Source Code :
github.com/kongruksiamza/reac...
👉 เนื้อหาใน Phase 1 ประกอบด้วยหัวข้อดังนี้
🎯 แนะนำเนื้อหา
0:00 - React คืออะไร
21:04 - ติดตั้งเครื่องมือพื้นฐาน
🎯 ทบทวน JavaScript ES6
32:40 - Block Scope
47:00 - Arrow Function
52:47 - Object
59:31 - String
01:05:35 - Spread Operator
01:18:24 - Rest Parameter
01:31:20 - Destructuring
01:47:56 - Default Parameter
01:53:49 - ทำงานกับ Array
02:00:56 - เพิ่มและลบสมาชิกใน Array
02:10:57 - Array Splice & Slice
02:23:42 - การ Loop ข้อมูลใน Array
02:35:02 - ค้นหาข้อมูลใน Array
02:42:42 - Array Map
02:59:54 - Array Filter
03:13:09 - Array Reduce
🎯 การใช้งาน React เบื้องต้น
03:35:23 - สร้างโปรเจค React
03:43:47 - โครงสร้างโปรเจค
03:56:49 - ReactDOM
04:05:06 - Virtual DOM
04:09:34 - การสร้าง Component
04:24:20 - React JSX
04:41:45 - Nested Component
04:57:24 - JSX Dynamic Data
05:03:41 - JSX Style & ClassName
05:14:23 - เขียน Style และกำหนด Font
05:29:05 - การสร้าง Props
05:41:16 - Props Data
05:47:27 - Props Destructuring
05:50:53 - Props & Array Map
05:57:22 - Props & Spread Operator
06:00:12 - Key Props
06:05:44 - Key Props UUID
06:11:02 - Props Types
📢 ติดตามข่าวสารของเราได้ที่ :
➤ Facebook : / kongruksiamtutorial
➤ TikTok : / kongruksiamstudio
➤ Instagram : / kongruksiamstudio
➤ Medium : / kongruksiam
#React #JavaScript #webdevelopment

[@FozeNFloweR]

ให้ทุกคนเปลี่ยน code ตรง hello เป็น
class HelloComponent extends React.Component{
render(){
return Hello react
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(); นะครับ
เพราะตอนนี้ react อัพเวอชั่นใหม่ครับ

[@subsinboriboon450]

เนื้อหาตรงส่วนอื่นยังเหมือนเดิมอยู่ไหมครับ

[@boombump]

นาทีไหนครับ

[@catorangefat]

ขอบคุณมากครับบ ก็งงว่าทำไมแจ้ง error

[@prosperpy2191]

สอนดี&ละเอียด เข้าใจง่ายมากเลยครับ ขอบคุณมากครับ :) :) :)

[@onizushi]

ดี !! สอนเข้าใจดีมากครับ รอ Phase2 เลยครับ ขอบคุณมากครับ

[@chaloemeasyplan7629]

อธิบายได้เข้าใจง่ายเป็นลำดับ ทุกคำมีความหมาย เป็นกำลังใจให้ครับ ดูคลิปนี้มาเกือบ5ชม.แล้วครับ กำลังศึกษาด้านนี้ครับ
...กดติดตามแล้วครับ🙂🙂🙂

[@Guitar-wh5pu]

สอนเข้าใจง่ายที่สุดครับ ละเอียดทุกเม็ดเลย ขอบคุณมากๆนะครับ

[@kamolkhampibool559]

ขอบคุณมากครับ สอนได้อย่างละเอียดมาก ขอบคุณๆ

[@hptimef4]

ขอบคุณมากๆคะ สอนดีมาก อธิบายได้ละเอียด ฟังเพลินเลยคะ

[@nanthaistudio3338]

อยากให้อธิบาย react เกี่ยวกับการนำฐานข้อมูลเวลาขึ้นโฮมจริง การดีพลอย การนำไฟล์ไปไว้ที่ต่างๆ
ตอนนี้งงมากครับ ถ้าแบบปกติใช้ html php พอเข้าใจว่าเราเอาไฟล์ทั้งหมดขึ้นเลย

[@mubmibmommam684]

ผมชอบที่พี่ย้ำมากครับ บางทีกำลังจะกดย้อนพี่ก็พูดดักไว้เลย

[@pornoanarak]

สอนละเอียดมากๆเลยค่ะ ขอบคุณมากค่ะจารย์ก้อง

[@nattchaiyawan35]

สอนดี เข้าใจง่าย ขอบคุณที่แบ่งปันความรู้ดีๆเช่นนี้ครับ

[@Surasilpa]

ชอบสไตล์การสอนนะครับ ชอบที่มีการอธิบายอย่างละเอียดทีละขั้นตอน มันทำให้ผมสามารถฟังไปเรื่อยๆได้ถึงแม้ว่าจะไม่ได้อยู่หน้าคอมก็ยังสามารถเข้าใจในทุกขั้นตอน ขอบคุณครับ

[@chinnaratthuengklin2179]

ขอบคุณมากครับ ชอบเทคนิคการสอนอาจารย์ครับ ไม่เร็ว ไม่ช้าไป มีเรื่องสอบถามครับ ผมเทสการใช้งาน propTypes แล้ว ไม่มี warning ที่ console เลยครับ รันผ่านตลอดแม้จะทดสอบแบบผิด format หรือข้อมูลไม่ครบ ได้ลองรัน npm ใหม่หลายรอบแล้วก็ยังไม่ขึ้น error มี proptypes package ครบถ้วนทุกอย่างครับ

[@joemamahoe291]

ผมกำลังเริ่มเรียนครับ ขอขอบคุณล่วงหน้าสำหรับเนื้อหาดีๆ ครับ

[@allstackdeveloper6359]

ขอบคุณมากครับสอนดีจริงๆ

[@hardcorediving821]

เรียนจบแล้ว Phase 1 ขอบคุณครับ

[@bbchanel9081]

เข้าใจมากกว่าที่สอนในห้องเรียนเลยค่ะ ย้ำดีมากเลย ขอบคุณค่ะ

[@annclick877]

มีสอน react native ไม๊คะ อยากเรียนด้วยค่ะ อธิบายให้เข้าใจดีค่ะ^^

[@anastik9624]

ขอบคุณมากๆครับ

[@user-qk2vo3zr3l]

ผมขอถามเพิ่มเติมครับ Props Type กับ TypeScript แตกต่างกันอย่างไรครับ

[@user-nc2hh4nn5d]

ต้องยกให้อาจารก้องคือผู้สร้างโปแกรมเมอร์หลายคนจริงๆ สุดยอดเลียนัลถือออาจารกล้องมาก

[@karasun26]

ใช้ Extension ตัวไหนหรอครับที่แยกสี number กับ string ครับของผมมาสีขาวหมดแยกไม่ออกครับ

[@generalkazuoka]

ขอบคุณครับ

[@ploycoolable]

ขอบคุณค่า

[@makotomiya7172]

สอนดีมากครับผมเข้าใจ react ก็เพราะพี่เลย ว่าแต่พี่อัดคลิปดึกมากครับตี 1 ตี 2 เลยขอคารวะ

[@watcharaponchaisiri9718]

ขอบคุณค้าบพี่

[@excludeugk8965]

ขอบคุณครับบบบ

[@user-nj1jl2lj8r]

พี่ครับสอน React + Ant design และให้มันสามาด Responesive. thank you so much

[@unchaleeanujornpun6162]

สอนดีมากค่ะ

[@anajajkkkk8490]

ดือ มว้ากก

[@anajajkkkk8490]

ดีครับบบบบบ

[@besmiledream812]

ขอสอบถามหน่อยค่ะ ระหว่างการ map data แบบ element.title , element.amount และ แบบ ...element มันมีข้อดีและข้อเสียต่างกันยังไงคะ

[@programmingwithnit5308]

Thank you so much

[@IamI16]

มี plan จะสอน svelte/sveltekit มั้ยครับ?

[@naphatyawilerng2488]

อยากทราบว่าถ้าอยาก run ให้มันออกใน terminal ควรเช็ตค่ายังไง พอดี run แล้วมันแสดงผลออกที่ output ค่ะ

[@sundev2572]

ตั้งค่า Code -runner : Run in Terminal ครับ

[@wayowindy]

เลิฟๆ แต้งกิ้วค้าบบ

[@blpw7540]

อยากทราบว่า Run `npm audit` for details.
Git commit not created Error: Command failed
เป็นปัญหาเพราะอะไรแก้ยังไงครับ

[@nonnoihoikom]

ปี 2023 React ยังน่าใช้อยู่ไหมครับ หรือมีตัวไหนแนะนำมากกว่า

[@chengxiong5892]

สวัสดีค่ะ ฉันไม่สามารถลงทะเบียนเป็นสมาชิกได้ค่ะ

[@okzowarz2275]

อยากให้สอน socket io ด้วยครับ รบกวนหน่อยนะครับ

[@Surasilpa]

บอกเลยว่าสอนดีสอนละเอียดกว่าคอร์สราคาเป็นหมื่นบางคอร์สอีกครับ

[@corazon.2524]

ทำไมของผมสร้าง component มาแล้วสร้าง tag h1 มาใส่ข้อความแล้ว มันไม่แสดงในหน้าเว็บหรอครับ

[@happygaming8985]

ตรง Array Refuce ผมสงสัยว่าตัว Parameter e มีหน้าที่อะไรหรอครับในเมื่อ value คือการวนลูป สมาชิกใน Array แล้วเอามาบวกกันอยู่แล้ว

[@sittichaipichaichanlert]

e ทำหน้่าที่ในการวนลูปครับ ส่วน value คือค่าที่ได้จากการประมวลผลแล้ว ซึ่งก่อนประมวลผล เรากำหนดค่าให้มันก่อน เช่น 0

[@Emajansi]

className ไม่ทำงานในItem.js ค่ะ ควรทำอย่างไรดี

[@thitapas.7655]

ลองติดตั้ง uuid ตามแล้วไม่สามารถ run ได้ค่ะ ขึ้น not found ใน chorme ค่ะ ต้องทำยังไงหรอคะ

[@peakchl3590]

create react-app แล้วมัน ขึ้น err อะครับ ต้องทำยังไงหรอครับ

[@kookkikphoumivong3572]

สวัสดีค่ะพี่หนูอยากให้พี่สอนวิธีเขียนโปรแกรมของอพาร์ตเมนต์อยากให้มันรายงานอยู่4อย่าง 1 ข้อมูลลูกค้า 2 ข้อมูลห้องพัก 3 ข้อมูลพนักงาน 4 รายรับแต่ละเดือน พี่ช่วยสอนหนูเขียนได้ไหมคะ

[@kookkikphoumivong3572]

ระบบจัดการฐานข้อมูลอพาร์ตเม้นต์เขียนด้วยภาษา Java ช่วยสอนหนูด้วย

[@user-nj1jl2lj8r]

พี่ครับสอน react ant design ได้มั้ย

[@nicknick4900]

thank you from Namac star

[@sololife9235]

สอนดีมากเลยครับมือใหม่ดูได้คนที่มาทบทวนก็ดูดี 💕💕😺😺

[@sj4dome]

เขียน function ตรงตามทุกตัวอักษรแต่ก็ยัง error ไม่แสดงผล แง อะไรครับเนี่ยะ ทำไมยากจังเลย ไปต่อไม่เป็นเลย ไม่รู้ว่าผิดตรงไหน T T

[@namtoklek5770]

พี่คะ ทำไมตอนกดรันแล้วมันขึ้นแบบนี้เหรอคะ 'node' is not recognized as an internal or external command,
operable program or batch file.
สามารถแก้ไขยังไงได้บ้างคะ เพราะ node ก็โหลดและตรวจสอบตามที่พี่ว่าเลยค่ะ

[@supalucksingjan5599]

ใช้เป็น windows รึเปล่าคะ ถ้าใช้ก็เปลี่ยนไป run บน command prompt ลองดูค่ะ

[@namtoklek5770]

@@supalucksingjan5599 ลองดูแล้วค่ะ แต่ก็ไม่ได้อยู่ดี ขึ้นเหมือนเดิมเลยค่ะ

[@failogy]

10.10.2023 เรียนจนคลิป ขอบคุณมากครับ

[@themystry5742]

ສອນເຂົ້າໃຈງ່າຍຫລາຍ

[@user-hv7kc5zy6f]

3:35:41 สร้างโปรเจค react

[@worawut317]

ep. JavaScript ES6 มีโค้ดไหมครับ

[@okzowarz2275]

พี่ครับช่วยสอน socket io ด้วยได้ใหมครับ

[@cwdev2545]

ตอนนี้ยังเรียน ตามคลิปนี้ได้ไหมครับ 2022

[@teerawatchuaphanngam7997]

ตามด้วยครับ

[@pomarpeggio]

ได้ครับ บาง code เปลี่ยนแปลงนิดหน่อย

[@jinnee370]

4:20:00
เขียนเอาไว้มาเรียนต่อครับ

[@panachaiboonyoo1553]

3:35:24

[@panachaiboonyoo1553]

4:24:22

[@panachaiboonyoo1553]

5:28:16

[@sychanarry6078]

ใครกด dislike วะขวย

[@user-st8so5ne3u]

สอนดีมากครับ สอนดีกว่าบางที่ ที่มีการเสียตังอีก ขอบคุณมากๆนะครับที่ทำคลิปสอนดีๆแบบนี้

[@kaewmungmuang]

ขอบคุณครับ

[@yodyiam]

ขอบคุณครับ

[@kazubit]

ขอบคุณครับ