Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React and Redux for Beginners
EP.0 : Introduction
คอร์สนี้เรียนอะไรบ้าง? (5:39)
Create React App มันทำอะไรบ้างนะ? (2:05)
เริ่มต้นโปรเจ็คด้วย Create React App (1:15)
React Starter Template
EP. 1 : ทบทวน Modern JavaScript (ES6/ES7/ES2017/ES2018)
รู้จักกับ ES6+ และที่มาเบื้องต้น (4:01)
let และ const (3:51)
Arrow function (4:40)
Export และ Import (5:18)
Destructuring (3:33)
Spread & Rest Operator (9:26)
map(), reduce(), find() และ filter() (16:10)
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
React Router คืออะไร? (2:31)
Setup React Router (4:54)
Router, Route และการ Navigation (9:36)
การใช้ Switch และ NavLink (3:55)
เสริมเรื่อง NavLink และการปรับ Style (2:41)
การรับ Params และ Query String (7:58)
Source Code EP.3 - React Router
Workshop 1: ด้วย React Router
Setup และ สร้างหน้า Home, About และ Portfolio Page (6:44)
ทำ Navigation Link, เพิ่ม Route Params (5:23)
ปรับแต่งหน้าเว็บ CSS ด้วย Bulma (18:33)
Source Code ของ Workshop 1
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
React Form เบื้องต้น (10:31)
ทดลองยิง Request API ด้วย Postman (11:11)
Redux Form คืออะไร? (8:33)
Basic Redux Form with Redux Template
Setup Redux Form และการใช้งาน Redux Form เบื้องต้น (21:27)
การใช้ initialValues เพื่อแสดงค่าสำหรับหน้า Edit (4:16)
EP.6 : Advanced React
Higher Order Component (HOC) คืออะไร (8:36)
พาไปรู้จักกับ Recompose และการใช้ withState(), withProps() (12:22)
การใช้งาน withHandlers() และ compose() (10:02)
รู้จักกับ lifecycle() (4:35)
Refactor โค๊ดจาก Workshop 2 ด้วย recompose (16:34)
Source Code ของ recompose
EP. 7 : React with Firebase
รู้จักกับ Firebase (8:33)
เชื่อมต่อ React กับ Firebase (11:20)
Query ข้อมูลจาก Firebase และแนะนำ function อื่นๆเพิ่มเติม (8:53)
รู้จักกับ Firebase Authentication และวิธีการทำ Authentication (20:45)
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
Setup React Project with React Starter (4:28)
Teach online with
React & Redux Devtools
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock