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 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)
ดึงข้อมูล API ด้วยการใช้ axios
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock