EP.0 : Introduction
EP. 1 : ทบทวน Modern JavaScript (ES6/ES7/ES2017/ES2018)
EP. 2 : พื้นฐาน React
-
JSX พื้นฐาน และ เรียนรู้ Props เบื้องต้น (7:09)
-
การส่ง Props ระหว่าง Component (1:24)
-
รู้จักกับ Functional Component (4:37)
-
มารู้จักกับ State กัน (9:02)
-
Handling Events (11:43)
-
JSX เพิ่มเติม (เรียนรู้ Condition rendering) (10:34)
-
การ Render Data List ด้วย Array.map() (7:30)
-
ปรับแต่ง CSS ให้กับ React Component (4:01)
-
Source Code ของ react-101
EP. 2.1 - React Hooks API
-
Hook คืออะไร? (4:14)
-
ใช้ useState (Hook) สำหรับจัดการกับ state แบบเดิมๆ (7:25)
-
ใช้ useEffect (Hook) สำหรับจัดการ DOM (4:42)
-
ใช้ useEffect (Hook) สำหรับดึง APIs ด้วย axios (9:15)
-
การใช้ useReducer เพื่อจัดการ state แบบ Redux style (5:19)
-
การใช้งาน useRef (2:58)
-
การใช้งาน useContext เพื่อจัดการ Context (2:13)
EP.3 : รู้จักกับ React Router
Workshop 1: ด้วย React Router
EP.4 : เริ่มต้นเรียนรู้ Redux
-
พื้นฐาน Redux และหลักการ 3 ข้อของ Redux (10:35)
-
รู้จักกับ Action, Reducer และ Store (9:32)
-
Redux เบื้องต้น การใช้ getState() และ dispatch() (16:16)
-
การใช้งาน connect() และ Provider (11:24)
-
การใช้งาน mapStateToProps และ mapDispatchToProps (10:32)
-
combineReducers และ actionCreator (10:18)
-
React & Redux Devtools (7:20)
-
เริ่มต้นกับ Redux Thunk (13:05)
-
ดู log ง่ายๆด้วย Redux Logger (5:37)
-
ดึงข้อมูล API ด้วยการใช้ axios (7:27)
Workshop 2: การดึง Github API ด้วย React Redux
-
สร้างโปรเจ็ค และ Folder structure (7:21)
-
ทำส่วน AppHeader component (4:39)
-
Setup Redux และ Middleware (10:47)
-
กำหนด API Service (5:57)
-
ทำส่วน User Detail (เพิ่ม action และ reducers) (16:36)
-
ปรับหน้าตา UI ของ User Detail (8:26)
-
เพิ่มส่วน User Repository (action และ reducers) (11:55)
-
ทำส่วน Search Username และแสดงข้อมูล user list (15:44)
-
Source Code Workshop 2
-
[Update 2019] นำ Workshop 2 มาอัพเดทโค๊ด สำหรับคนติดปัญหา (5:50)
EP.5 : การส่งข้อมูล Form และ Redux Form
EP.6 : Advanced React
EP. 7 : React with Firebase
Workshop 3: ทำเว็บ CRUD : Shopping Website
-
Setup Project & Overview Project (14:30)
-
ทำหน้า Home ให้แสดง Product List (19:28)
-
ทำหน้า Product Detail (14:10)
-
ทำส่วน Header และ components (6:02)
-
ทำหน้า Login (15:11)
-
ทำหน้า Login ต่อกับ Firebase (14:25)
-
ทำหน้า Register (17:47)
-
ทำการ Handle Authentication (9:57)
-
ทำหน้า Product Management (10:48)
-
การทำ Authen Routing เพื่อจำกัดสิทธิ์การเข้า (9:31)
-
ทำหน้า Create New Product (19:57)
-
ทำส่วน Upload รูปไปที่ Firebase (15:45)
-
Preview Image หลังจาก Upload เสร็จ (5:26)
-
ทำส่วนสำหรับ Edit Product (18:25)
-
Handle Preview Image ตอน Create กับ Edit (6:33)
-
ทำส่วน Delete Product (7:59)
-
ใส่ Loading ให้กับเว็บไซต์ (7:24)
-
Deploy Production โชว์เว็บเราให้ทั้งโลกรู้ซะ (5:08)
-
Source Code ที่เสร็จแล้วของ Workshop 3
Bonus Track
