สอน React ร่วมกับ ReduxThunk และ ReactRouter v.4

Name: สอน React ร่วมกับ ReduxThunk และ ReactRouter v.4
Rating: 4.4 (98 reviews)

เหมาะกับผู้ที่สนใจศึกษา React แต่ไม่รู้จะเริ่มยังไงหรือผู้ที่เขียน React มานานแล้วแต่ก็ยังไม่เข้าใจ React ซักที

Created bySuwijak Kongtaworn

Last updated 10/2018

Thai

What you'll learn

เขียน React ในระดับพื้นฐานถึงระดับกลางได้
เข้าใจการใช้ Redux และ ReduxThunk
เข้าใจการใช้งาน ReactRouter v4 และทำ Private Router ในการตรวจสอบการทำ Authentication
ใช้ React + ReduxThunk + ReactRouter v4 มาสร้างโปรเจค fetch data จาก API ภายนอก
สามารถนำ BootStrap v4 + reactstrap มาใช้ปรับหน้าตาโปรแกรมให้สวยงามขึ้น

Course content

3 sections • 43 lectures • 4h 55m total length

Visual Studio Code & Node.js2:31
ติดตั้ง Visiaul Studio Code
Extension สำหรับ VSCode ที่น่าติดตั้ง2:33
Extension สำหรับ VSCode ที่น่าติดตั้ง
คำสั่ง npm พื้นฐาน6:19
คำสั่งพื้นฐานต่างๆ ของ npm ที่ได้ใช้บ่อยๆ

สร้างโปรเจค React ด้วย Create React App และการรันโปรเจค3:52
ใช้คำสัง create-react-app ในการสร้างโปรเจค
โครงสร้างโปรเจค1:06
โครงสร้างโปรแจคที่สร้างจาก create-react-app
React JSX & Component5:50
รู้จักและใช้งาน Props3:33
พื้นฐาน ES6 part 1/2 ArrowFunction6:49
พื้นฐาน ES6 part 2/2 Rest Parameter, Spread Operator และ Destructuring7:43
รู้จักและใช้งาน State อย่างถูกวิธี5:19
เทคนิคการจัดการ State ที่อยู่ต่าง Component โดยใช้ props9:23
Component Lifecycle ต้องรู้ไม่งั้น...ไปต่อไม่ได้23:46
สร้าง Component แบบ Stateless Functional Components3:41
props.children มันคือ props ที่มากกว่า props2:58
รู้จักและใช้งาน Context10:33
เข้าถึง DOM element ได้ด้วย ref3:04
Load Data จาก API ภายนอก และเทคนิคการจัดการ Error อย่างถูกต้อง8:11
การใช้งาน Form9:14

ภาพรวมของ WorkShop1:49
เริ่มสร้าง Project (รวมการเคลียร์ไฟล์ต่างๆ)1:45
ปูพื้นฐาน ReactRouter v.4 และการ Config เบื้องต้น9:45
ปัญหาของการไม่ใช้ Redux2:16
ปูพื้นฐาน Redux และการ Config เบื้องต้น7:21
ทำให้ Component ใช้งาน Redux ได้ด้วย react-redux9:27
วิธีการแยก Reducer ไปไว้อีกไฟล์5:17
สร้างหน้าจอแสดงรายชื่อ USER8:46
ปรับหน้าจอ USER ให้ใช้งาน Redux ในแบบที่ผิดๆ8:30
ใช้งาน ReduxThunk แก้ปัญหา Redux เพียวๆ8:00
เทคนิคการ Handle Error Fetch ใน ReduxThunk11:40
สร้างหน้าจอแสดงรายชื่อ Album ตาม UserID21:11
แก้ปัญหาแสดง Loading ไม่ถูกต้อง6:46
แก้ไขจุดผิดพลาดอื่นๆ3:25
สร้างหน้าจอแสดงภาพตาม AlbumID14:41
PageNotFound โดยใช้ Switch ใน ReactRouter v.43:39
สร้างหน้าจอ Signin7:20
เทคนิคสร้าง PrivateRoute สำหรับ Authentication6:49
ใช้งาน withRouter เพื่อทำระบบการ Signout5:05
ปรับการแสดงผลเมนู2:19
แนะนำ CSS Framework สำหรับ React6:29
ติดตั้ง ReactStrap และ Bootstrap v.48:02
ปรับ Header ไปใช้ Navbar ของ reactstrap8:39
ปรับหน้าจอ อื่นๆ ตาม Style ของ bootstrap9:43
ลิงค์ดาวน์โหลดไฟล์ WorkShop ที่เสร็จแล้ว0:02
#ก่อนใช้งานให้พิมพ์คำสั่งด้านล่างนี้ที่ Terminal (command) เพื่อติดตั้ง package ต่างๆ ก่อนนะครับ

npm install

Requirements

เคยเขียนโปรแกรมมาบ้าง
พื้นฐาน HTML, CSS, Javascript
Window , Mac OSX

Description

คอร์สเรียน React สำหรับผู้ที่เริ่มต้น จนถึงระดับกลาง

อธิบายด้วยการพาทำผ่านตัวอย่างต่างๆ ด้วยภาษาง่ายๆ ไม่วิชาการ
เนื้อหากระชับไม่กินเวลามาก ทำให้ใช้เวลาเพียงสั้นๆ ก็จะศึกษาได้

คุณคิดว่าคุณอยู่ระดับไหน ถ้าคุณยังอธิบายไม่ได้ว่า

React มี LifeCycle อะไรบ้าง
State และ Prop คืออะไร ? และใช้ยังไง
ทำไมต้องใช้ Redux, ReduxThunk
ReactRouter4 ใช้ยังไง จะกำหนด Authentication แต่ละ Router ยังไง
จะใช้ CSS Framework เช่น Bootstrap 4 กับ โปรเจคยังไง, หรือ Load Data จาก API ภายนอกยังไง

...นั่นหมายถึงคุณอยู่ในระดับผู้เริ่มต้น จนถึงระดับกลาง ดังนั้นคอร์สสอน React ชุดนี้คือคำตอบ

การเริ่มเขียน React นั้นเป็นเรื่องยาก...แต่คอร์สสอนชุดนี้จะทำให้คุณเริ่มต้นเขียน React ได้ง่ายขึ้น
สอนด้วยตัวอย่างแบบกระชับจากโปรแกรมเมอร์ตัวจริง
ปูพื้นฐาน React ที่จำเป็นที่คุณต้องรู้ (อะไรไม่จำเป็นอย่างพึ่งไปรู้มัน)
สอนการใช้งาน Redux ว่าทำไมต้องใช้ Redux และทำไมต้องเอา ReduxThunk มาใช้งาน
WorkShop สอนการใช้ ReduxThunk และ ReactRouter v.4 ในรูปแบบที่ใครๆ ก็ทำได้
สอนการ LoadData จาก API ภายนอก รวมถึงการนำ Bootstrap v.4 และ ReactStrap มาใช้งานในโปรเจค
และอื่นๆ ที่คุณควรจะรู้

Who this course is for:

ผู้ที่สนใจจะเขียน React ให้เป็นเร็วที่สุด
ผู้ที่เขียน React อยู่แล้วและไม่เข้าใจการใช้ Redux และ Router
ผู้ที่ต้องการปรับพื้นฐาน React ให้แน่นขึ้นกว่าเดิม
สอนแบบลงมือทำให้ดู จนประกอบเป็นโปรเจ็ค

สอน React ร่วมกับ ReduxThunk และ ReactRouter v.4

What you'll learn

Explore related topics

Course content

ติดตั้งเครื่องมือสำหรับเขียน React3 lectures • 11min

พื้นฐาน React15 lectures • 1hr 45min

WorkShop เรียนรู้การใช้งาน Router & Redux25 lectures • 2hr 59min

Requirements

Description

Who this course is for: