Turn what you know into an opportunity and reach millions around the world.

Your cart is empty.

พัฒนาเว็บแอพพลิเคชั่นด้วย React (Real-World Projects)

เรียนรู้การพัฒนาเว็บแอพพลิเคชั่นด้วย React 18 , React Router V6 , React Hook ตั้งแต่เริ่มต้นจนใช้งานจริงแบบ Step by Step

Created byKong Ruksiam

Last updated 9/2025

Thai

What you'll learn

เรียนรู้พื้นฐานการใช้งาน React 18
เรียนรู้การใช้งาน JSX & Component
เรียนรู้การใช้งาน States & Props ใน React
จัดการ URL ด้วย React Router V6 (Routing)
เข้าใจหลักการแชร์ข้อมูล ใน React ด้วย Context & Reducer
การเผยแพร่เว็บแอพพลิเคชั่น (Build & Deployment)

Course content

14 sections • 152 lectures • 24h 18m total length

แนะนำคอร์สเรียน4:30
ข้อกำหนดคอร์สเรียน0:28
รู้จักกับ React3:51
แนวคิดของ React6:15

ตัวอย่างโปรเจกต์2:56
สร้างโปรเจกต์3:11
สร้าง Components9:04
กำหนด Component Style14:30
สร้าง State (Tasks)3:25
แสดงข้อมูลใน State9:07
ลบข้อมูล7:08
Form & State4:55
บันทึกข้อมูล8:41
แก้ไขข้อมูล12:16
อัพเดตข้อมูล12:11
รู้จักกับ useEffect13:24
Local Storage9:52
สร้าง State (Theme)3:47
สลับโหมด (Toggle)2:11
กำหนด Theme Style5:14
กำหนดไอคอน (Item)7:50
กำหนดไอคอน (Header)6:20
เผยแพร่เว็บแอพพลิเคชั่น9:38

ตัวอย่างโปรเจกต์2:46
สร้างโปรเจกต์4:35
สร้าง Component10:28
รู้จัก React Router (V6)4:40
ใช้งาน React Router8:20
สร้างเมนู (Navbar)6:55
กำหนด Navbar Style6:03
Not Found Page4:51
นำรูปภาพเข้ามาทำงาน6:10
กำหนด Global Style4:09
Navigate3:12
แสดงข้อมูลบทความ13:56
useParam10:56
ดึงข้อมูลบทความ7:46
สร้าง State เก็บข้อมูล4:42
แสดงรายละเอียดบทความ6:09
ช่องค้นหาข้อมูล6:18
แสดงผลการค้นหาข้อมูล7:27

ตัวอย่างโปรเจกต์2:46
สร้างโปรเจกต์3:27
สร้าง Component (Header)5:15
ข้อมูลสินค้า (Product)5:41
รู้จักกับ Context & Reducer7:32
สร้าง Context (useContext)2:37
สร้าง Reducer2:05
กำหนด State (Context)3:54
สร้าง Provider10:31
สร้าง Component ตะกร้าสินค้า2:44
แสดงข้อมูลสินค้าในตะกร้า13:02
กำหนด Style ข้อมูลสินค้า8:26
จัดรูปแบบการแสดงผลตัวเลข5:45
คำนวณยอดรวม (Reducer)19:33
แสดงยอดรวม & จำนวนสินค้ารวม5:05
ลบสินค้าจากตะกร้า10:14
เพิ่มปริมาณสินค้า9:39
ลดปริมาณสินค้า5:58

Requirements

ผู้เรียนต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript และ JavaScript ES6

Description

คอร์สนี้ผู้เรียนจะได้เรียนรู้การพัฒนาเว็บแอพพลิเคชั่นด้วย React ตั้งแต่เริ่มต้นจนใช้งานได้จริงแบบ Step by Step

โดยเนื้อหาในคอร์สจะแบ่งออกเป็น 4 ส่วนหลักๆ ดังนี้

ส่วนที่ 1 : เรียนรู้พื้นฐานการใช้งาน React 18

ส่วนที่ 2 : แอพบริหารจัดการงาน (useEffect & Local Storage)

ส่วนที่ 3 : Blog Application (React Router V6)

ส่วนที่ 4 : ระบบตะกร้าสินค้า (Context & Reducers)

ส่วนที่ 5 : ระบบค้นหารูปภาพด้วย API (Update)

*หมายเหตุ : Section "หัวข้อเสริม" เป็นหัวข้อที่ไม่เกี่ยวข้องกับเนื้อหาหลักในคอร์สเรียนท่านสามารถเรียนหรือไม่เรียนก็ได้

Who this course is for:

ผู้สนใจเรียนรู้การพัฒนาเว็บแอพพลิเคชั่นด้วย React