This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
พัฒนาเว็บด้วย React 15 Workshop (Building 15 Projects)
Workshop 1 - Form Validation
ตอนที่ 1 - แนะนำ Workshop (3:10)
ตอนที่ 2 - สร้างโปรเจกต์ (6:24)
ตอนที่ 3 - สร้างแบบฟอร์ม (9:24)
ตอนที่ 4 - ตกแต่งแบบฟอร์มด้วย CSS (15:11)
ตอนที่ 5 - สร้าง State (9:09)
ตอนที่ 6 - จัดการ Error Message (9:10)
ตอนที่ 7 - ตรวจสอบความถูกต้องของข้อมูล (7:14)
ตอนที่ 8 - กำหนดสีสถานะในฟอร์ม (8:37)
ตอนที่ 9 - การยืนยันรหัสผ่าน (8:33)
Workshop 2 - Quiz Application (ข้อสอบออนไลน์)
ตอนที่ 1 - แนะนำ Workshop (4:28)
ตอนที่ 2 - สร้างโปรเจกต์ (5:17)
ตอนที่ 3 - สร้าง Component (8:01)
ตอนที่ 4 - จัดการ State (5:30)
ตอนที่ 5 - Context API (12:24)
ตอนที่ 6 - กำหนด Style CSS (8:22)
ตอนที่ 7 - นำข้อมูลมาใช้งาน (16:22)
ตอนที่ 8 - การกำหนดตัวเลือก (Choice) (6:42)
ตอนที่ 9 - ตรวจสอบตัวเลือก (6:02)
ตอนที่ 10 - ระบบคะแนน (3:39)
ตอนที่ 11 - แสดงคำถามถัดไป (13:28)
ตอนที่ 12 - สรุปผลคะแนน (9:02)
ตอนที่ 13 - useEffect Warning (Fixed) (2:22)
Workshop 3 - Light/Dark Mode
ตอนที่ 1 - แนะนำ Workshop (1:10)
ตอนที่ 2 - สร้างโปรเจกต์ (3:19)
ตอนที่ 3 - การสร้าง Component (13:12)
ตอนที่ 4 - กำหนด Style (5:41)
ตอนที่ 5 - การใช้งาน react-switch (12:21)
ตอนที่ 6 - สร้าง Context API (10:21)
ตอนที่ 7 - การเปลี่ยน State แบบ Toggle (7:45)
ตอนที่ 8 - กำหนด Style Header (5:29)
ตอนที่ 9 - กำหนด Style Content (3:51)
ตอนที่ 10 - การเปลี่ยนรูปภาพด้วย State (4:50)
Workshop 4 - Accordion
ตอนที่ 1 - แนะนำ Workshop (1:28)
ตอนที่ 2 - สร้างโปรเจกต์ (4:04)
ตอนที่ 3 - การสร้าง Component (21:26)
ตอนที่ 4 - แสดงข้อมูลด้วย State (3:15)
ตอนที่ 5 - กำหนด Style CSS (9:43)
ตอนที่ 6 - React Icons (7:32)
Workshop 5 - แอพแปลงสกุลเงิน (Currency Converter)
ตอนที่ 1 - แนะนำ Workshop (10:19)
ตอนที่ 2 - สร้างโปรเจกต์ (2:53)
ตอนที่ 3 - สร้าง Component (17:11)
ตอนที่ 4 - กำหนด Style CSS (11:51)
ตอนที่ 5 - ดึงข้อมูลจาก API (13:33)
ตอนที่ 6 - แสดงตัวเลือกสกุลเงิน (14:25)
ตอนที่ 7 - กำหนดสกุลเงินใน State (11:33)
ตอนที่ 8 - เลือกสกุลเงิน (7:55)
ตอนที่ 9 - อัตราการแลกเปลี่ยน (rate) (9:58)
ตอนที่ 10 - คำนวณการแปลงสกุลเงิน (17:06)
ตอนที่ 11 - กำหนดจำนวนเงิน (8:37)
Workshop 6 - Navigation
ตอนที่ 1 - แนะนำ Workshop (3:57)
ตอนที่ 2 - สร้างโปรเจกต์ (3:18)
อัพเดต React-Router-DOM
ตอนที่ 3 - React Router (12:14)
ตอนที่ 4 - React Icons (7:54)
ตอนที่ 5 - การสร้างเมนูย่อย (5:40)
ตอนที่ 6 - การกำหนด State (9:16)
ตอนที่ 7 - Active Style CSS (5:35)
ตอนที่ 8 - Toggle Menu (3:02)
ตอนที่ 9 - กำหนด Style CSS (11:23)
ตอนที่ 10 - Menu Data (14:54)
ตอนที่ 11 - แสดงข้อมูลใน Component (16:31)
Workshop 7 - Image Carousel(ภาพสไลด์โชว์)
ตอนที่ 1 - สร้างโปรเจกต์ (5:26)
ตอนที่ 2 - สร้าง Component (4:30)
ตอนที่ 3 - จัดเตรียมข้อมูล (5:52)
ตอนที่ 4 - ทำงานกับข้อมูล (10:36)
ตอนที่ 5 - Slider (5:02)
ตอนที่ 6 - React Icons (12:08)
ตอนที่ 7 - สร้าง State (21:33)
ตอนที่ 8 - กำหนดขอบเขตการ Slide (8:43)
ตอนที่ 9 - แสดงผลภาพ Slide (6:29)
Workshop 8 - TodoList App
ตอนที่ 1 - แนะนำ Workshop (4:33)
ตอนที่ 2 - สร้างโปรเจกต์ (3:18)
ตอนที่ 3 - สร้างแบบฟอร์ม (4:52)
ตอนที่ 4 - กำหนด Style CSS (8:36)
ตอนที่ 5 - สร้าง State (9:06)
ตอนที่ 6 - บันทึกข้อมูล (13:20)
ตอนที่ 7 - แสดงข้อมูล (15:17)
ตอนที่ 8 - กำหนด Style แสดงข้อมูล (3:44)
ตอนที่ 9 - Alert (12:19)
ตอนที่ 10 - Validate Data (14:05)
ตอนที่ 11 - ปิด Alert (12:54)
ตอนที่ 12 - ลบข้อมูล (18:34)
ตอนที่ 13 - แก้ไขข้อมูล (15:21)
ตอนที่ 14 - อัพเดตข้อมูล (10:14)
ตอนที่ 15 - React Icons (7:10)
Workshop 9 - เครื่องคิดเลขอย่างง่าย (Calculator)
ตอนที่ 1 - สร้างโปรเจกต์ (5:49)
ตอนที่ 2 - สร้าง Component (12:14)
ตอนที่ 3 - กำหนด Style CSS (17:45)
ตอนที่ 4 - สร้าง State (14:01)
ตอนที่ 5 - คำนวณตัวเลข (6:03)
Workshop 10 - ระบบค้นหาข้อมูล (Search Filter)
ตอนที่ 1 - แนะนำ Workshop (2:36)
ตอนที่ 2 - สร้างโปรเจกต์ (2:28)
ตอนที่ 3 - สร้าง State (11:41)
ตอนที่ 4 - ดึงข้อมูลจาก API (13:29)
ตอนที่ 5 - กำหนด Style CSS (19:22)
ตอนที่ 6 - ช่องค้นหาข้อมูล (4:55)
ตอนที่ 7 - ระบบค้นหาข้อมูล (17:43)
ตอนที่ 8 - Format Number (3:02)
ตอนที่ 9 - แก้ปัญหาใช้งาน API ไม่ได้ (3:42)
Workshop 11 - Dynamic Dropdown
ตอนที่ 1 - แนะนำ Workshop (2:35)
ตอนที่ 2 - สร้างโปรเจกต์ (3:43)
ตอนที่ 3 - สร้าง Component (6:26)
ตอนที่ 4 - Dropdown Component (6:10)
ตอนที่ 5 - กำหนด Style Menu (8:16)
ตอนที่ 6 - สร้าง State (8:15)
ตอนที่ 7 - แสดงผลข้อมูล (13:10)
ตอนที่ 8 - กำหนด Style เนื้อหา (6:28)
ตอนที่ 9 - Menu Event (13:30)
ตอนที่ 10 - แสดงเนื้อหาตามหมวดหมู่ (12:39)
Workshop 12 - Infinite Scroll Photo
ตอนที่ 1 - แนะนำ Workshop (5:26)
ตอนที่ 2 - สมัคร Unsplash Image API (5:57)
ตอนที่ 3 - สร้างโปรเจกต์ (3:11)
ตอนที่ 4 - สร้าง Component (4:16)
ตอนที่ 5 - ดึงข้อมูลจาก API (20:56)
ตอนที่ 6 - แสดงรูปภาพ (8:26)
ตอนที่ 7 - กำหนด Style CSS (2:57)
ตอนที่ 8 - Scroll Event (10:03)
ตอนที่ 9 - แสดงข้อมูลด้วย State (18:15)
Workshop 13 - ระบบหมายเลขหน้า (Pagination)
ตอนที่ 1 - แนะนำ Workshop (3:49)
ตอนที่ 2 - สร้างโปรเจกต์ (2:39)
ตอนที่ 3 - สร้าง Component (4:47)
ตอนที่ 4 - สร้าง State (5:36)
ตอนที่ 5 - แสดงผลข้อมูล (11:12)
ตอนที่ 6 - กำหนด Style CSS (11:35)
ตอนที่ 7 - คำนวณหมายเลขหน้า (14:00)
ตอนที่ 8 - กำหนดจำนวนรายการข้อมูล (10:42)
ตอนที่ 9 - แสดงหมายเลขหน้า (7:51)
ตอนที่ 10 - Page State (5:05)
ตอนที่ 11 - แสดงข้อมูลตามหมายเลขหน้า (7:12)
ตอนที่ 12 - เขียน Style ปุ่มหมายเลขหน้า (5:01)
Workshop 14 - รายงานสภาพอากาศ (Weather API)
ตอนที่ 1 - สร้างโปรเจกต์ (2:09)
ตอนที่ 2 - ออกแบบโครงสร้างหน้าเว็บ (6:14)
ตอนที่ 3 - กำหนด Style CSS (11:34)
ตอนที่ 4 - ดึงข้อมูลจาก API (23:56)
ตอนที่ 5 - แก้ปัญหาการแสดงผลข้อมูล (6:30)
Workshop 15 - ระบบตะกร้าสินค้า (Shopping Cart)
ตอนที่ 1 - แนะนำ Workshop (4:54)
ตอนที่ 2 - สร้างโปรเจกต์ (3:26)
ตอนที่ 3 - Header Component (10:40)
ตอนที่ 4 - Style CSS Header (12:34)
ตอนที่ 5 - สร้างตะกร้าสินค้า (18:07)
ตอนที่ 6 - แสดงข้อมูลด้วย Prop (17:37)
ตอนที่ 7 - ทำงานกับไอคอน (12:10)
ตอนที่ 8 - Style CSS ข้อมูลในตะกร้าสินค้า (17:24)
ตอนที่ 9 - Context & Reducer (33:06)
ตอนที่ 10 - ลบสินค้าจากตะกร้า (22:18)
ตอนที่ 11 - Empty Cart (7:40)
ตอนที่ 12 - เพิ่มและลดปริมาณสินค้า (13:32)
ตอนที่ 13 - ToggleQuantity (22:45)
ตอนที่ 14 - คำนวณยอดรวม (Total) (20:44)
ตอนที่ 15 - แสดงรูปแบบตัวเลข (7:25)
ตอนที่ 13 - แก้ไขข้อมูล
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock