พัฒนาเว็บด้วย React 15 Workshop (Building 15 Projects)

Name: พัฒนาเว็บด้วย React 15 Workshop (Building 15 Projects)
Rating: 4.8 (376 reviews)

การพัฒนาเว็บฝั่ง Frontend ด้วย React เวอร์ชั่น 17 & React Hook แบบ Step by Step

Highest Rated

Created byKong Ruksiam

Last updated 8/2024

Thai

What you'll learn

เข้าใจการเขียน React ในการทำระบบจริง
ได้ Source Code และเอกสารประกอบการสอนในแต่ละหัวข้อ
เรียนรู้การใช้งาน React ร่วมกับ API
เรียนรู้การใช้งาน React ร่วมกับ Package ต่างๆ

Course content

16 sections • 152 lectures • 23h 54m total length

ตัวอย่าง Workshop26:49
ข้อกำหนดคอร์สเรียน0:31

ตอนที่ 1 - แนะนำ Workshop3:10
ตอนที่ 2 - สร้างโปรเจกต์6:24
ตอนที่ 3 - สร้างแบบฟอร์ม9:24
ตอนที่ 4 - ตกแต่งแบบฟอร์มด้วย CSS15:11
ตอนที่ 5 - สร้าง State9:09
ตอนที่ 6 - จัดการ Error Message9:10
ตอนที่ 7 - ตรวจสอบความถูกต้องของข้อมูล7:14
ตอนที่ 8 - กำหนดสีสถานะในฟอร์ม8:37
ตอนที่ 9 - การยืนยันรหัสผ่าน8:33

ตอนที่ 1 - แนะนำ Workshop4:28
ตอนที่ 2 - สร้างโปรเจกต์5:17
ตอนที่ 3 - สร้าง Component8:01
ตอนที่ 4 - จัดการ State5:30
ตอนที่ 5 - Context API12:24
ตอนที่ 6 - กำหนด Style CSS8: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

ตอนที่ 1 - แนะนำ Workshop1:10
ตอนที่ 2 - สร้างโปรเจกต์3:19
ตอนที่ 3 - การสร้าง Component13:12
ตอนที่ 4 - กำหนด Style5:41
ตอนที่ 5 - การใช้งาน react-switch12:21
ตอนที่ 6 - สร้าง Context API10:21
ตอนที่ 7 - การเปลี่ยน State แบบ Toggle7:45
ตอนที่ 8 - กำหนด Style Header5:29
ตอนที่ 9 - กำหนด Style Content3:51
ตอนที่ 10 - การเปลี่ยนรูปภาพด้วย State4:50

ตอนที่ 1 - แนะนำ Workshop10:19
ตอนที่ 2 - สร้างโปรเจกต์2:53
ตอนที่ 3 - สร้าง Component17:11
ตอนที่ 4 - กำหนด Style CSS11:51
ตอนที่ 5 - ดึงข้อมูลจาก API13:33
ตอนที่ 6 - แสดงตัวเลือกสกุลเงิน14:25
ตอนที่ 7 - กำหนดสกุลเงินใน State11:33
ตอนที่ 8 - เลือกสกุลเงิน7:56
ตอนที่ 9 - อัตราการแลกเปลี่ยน (rate)9:58
ตอนที่ 10 - คำนวณการแปลงสกุลเงิน17:06
ตอนที่ 11 - กำหนดจำนวนเงิน8:37

ตอนที่ 1 - แนะนำ Workshop3:57
ตอนที่ 2 - สร้างโปรเจกต์3:18
อัพเดต React-Router-DOM0:23
อัพเดต 12/11/2564
เนื้อหาในตอนถัดไป จะเป็นเรื่องการติดตั้ง React-Router-DOM
ปัจจุบัน react-router-dom อัพเดตเป็น version 6
แนะนำให้ติดตั้ง version 5 แทน โดยคำสั่งเดิมที่ใช้
npm install react-router-dom ❌
ให้เปลี่ยนเป็น
npm install react-router-dom@5.2.0 ✅
ตอนที่ 3 - React Router12:14
ตอนที่ 4 - React Icons7:54
ตอนที่ 5 - การสร้างเมนูย่อย5:40
ตอนที่ 6 - การกำหนด State9:16
ตอนที่ 7 - Active Style CSS5:35
ตอนที่ 8 - Toggle Menu3:02
ตอนที่ 9 - กำหนด Style CSS11:23
ตอนที่ 10 - Menu Data14:54
ตอนที่ 11 - แสดงข้อมูลใน Component16:31

ตอนที่ 1 - สร้างโปรเจกต์5:26
ตอนที่ 2 - สร้าง Component4:30
ตอนที่ 3 - จัดเตรียมข้อมูล5:52
ตอนที่ 4 - ทำงานกับข้อมูล10:36
ตอนที่ 5 - Slider5:02
ตอนที่ 6 - React Icons12:08
ตอนที่ 7 - สร้าง State21:34
ตอนที่ 8 - กำหนดขอบเขตการ Slide8:43
ตอนที่ 9 - แสดงผลภาพ Slide6:29

ตอนที่ 1 - แนะนำ Workshop4:33
ตอนที่ 2 - สร้างโปรเจกต์3:18
ตอนที่ 3 - สร้างแบบฟอร์ม4:53
ตอนที่ 4 - กำหนด Style CSS8:37
ตอนที่ 5 - สร้าง State9:06
ตอนที่ 6 - บันทึกข้อมูล13:20
ตอนที่ 7 - แสดงข้อมูล15:17
ตอนที่ 8 - กำหนด Style แสดงข้อมูล3:44
ตอนที่ 9 - Alert12:19
ตอนที่ 10 - Validate Data14:05
ตอนที่ 11 - ปิด Alert12:54
ตอนที่ 12 - ลบข้อมูล18:34
ตอนที่ 13 - แก้ไขข้อมูล15:21
ตอนที่ 14 - อัพเดตข้อมูล10:14
ตอนที่ 15 - React Icons7:10

Requirements

มีพื้นฐาน HTML5 , CSS3 , JavaScript และ JavaScript ES6
มีพื้นฐานการใช้งาน React 17

Description

หลักสูตรนี้คุณจะได้เรียนรู้การการประยุกต์ใช้งาน React 17 สำหรับการสร้างเว็บแอพพลิเคชั่นซึ่งมีทั้งหมด 15 แอพพลิเคชั่น

รวมอยู่ในคอร์สเดียว สามารถนำไปต่อยอดในการนำ React ไปใช้งานจริง

ในคอร์สนี้คุณจะได้เรียนรู้การใช้งาน React ร่วมกับ API ต่างๆ เช่น

API อัตราการแลกเปลี่ยนสกุลเงิน
API รายงานสภาพอากาศ
API ที่ให้บริการเกี่ยวกับข้อมูลประเทศ
การนำเอาไอคอนมาใช้งานโดยใช้ React-Icons เป็นต้น

หลักสูตรนี้จะเหมาะกับผู้ที่มีพื้นฐาน React 17 และ HTML5, CSS3 และ JavaScript รวมไปถึง JavaScript ES6 ด้วย

Who this course is for:

นักเรียน นักศึกษา
ผู้ที่สนใจในด้านการพัฒนาเว็บฝั่ง Frontend

พัฒนาเว็บด้วย React 15 Workshop (Building 15 Projects)

What you'll learn

Explore related topics

Course content

บทนำ2 lectures • 27min

Workshop 1 - Form Validation9 lectures • 1hr 17min

Workshop 2 - Quiz Application13 lectures • 1hr 42min

Workshop 3 - Light/Dark Mode10 lectures • 1hr 8min

Workshop 4 - Accordion6 lectures • 47min

Workshop 5 - แอพแปลงสกุลเงิน (Currency Converter)11 lectures • 2hr 5min

Workshop 6 - Navigation12 lectures • 1hr 34min

Workshop 7 - Image Carousel (ภาพสไลด์โชว์)9 lectures • 1hr 20min

Workshop 8 - TodoList App15 lectures • 2hr 33min

Workshop 9 - เครื่องคิดเลข (Calculator)5 lectures • 56min

Requirements

Description

Who this course is for: