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

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

4.70 (98 reviews)

Udemy

platform

ภาษาไทย

language

Web Development

What you will learn

เขียน React ในระดับพื้นฐานถึงระดับกลางได้

เข้าใจการใช้ Redux และ ReduxThunk

เข้าใจการใช้งาน ReactRouter v4 และทำ Private Router ในการตรวจสอบการทำ Authentication

ใช้ React + ReduxThunk + ReactRouter v4 มาสร้างโปรเจค fetch data จาก API ภายนอก

สามารถนำ BootStrap v4 + reactstrap มาใช้ปรับหน้าตาโปรแกรมให้สวยงามขึ้น

Why take this course?

คอร์สเรียน 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 มาใช้งานในโปรเจค
และอื่นๆ ที่คุณควรจะรู้

Content

ติดตั้งเครื่องมือสำหรับเขียน React

Visual Studio Code & Node.js

Extension สำหรับ VSCode ที่น่าติดตั้ง

คำสั่ง npm พื้นฐาน

พื้นฐาน React

สร้างโปรเจค React ด้วย Create React App และการรันโปรเจค

โครงสร้างโปรเจค

React JSX & Component

รู้จักและใช้งาน Props

พื้นฐาน ES6 part 1/2 ArrowFunction

พื้นฐาน ES6 part 2/2 Rest Parameter, Spread Operator และ Destructuring

รู้จักและใช้งาน State อย่างถูกวิธี

เทคนิคการจัดการ State ที่อยู่ต่าง Component โดยใช้ props

Component Lifecycle ต้องรู้ไม่งั้น...ไปต่อไม่ได้

สร้าง Component แบบ Stateless Functional Components

props.children มันคือ props ที่มากกว่า props

รู้จักและใช้งาน Context

เข้าถึง DOM element ได้ด้วย ref

Load Data จาก API ภายนอก และเทคนิคการจัดการ Error อย่างถูกต้อง

การใช้งาน Form

WorkShop เรียนรู้การใช้งาน Router & Redux

ภาพรวมของ WorkShop

เริ่มสร้าง Project (รวมการเคลียร์ไฟล์ต่างๆ)

ปูพื้นฐาน ReactRouter v.4 และการ Config เบื้องต้น

ปัญหาของการไม่ใช้ Redux

ปูพื้นฐาน Redux และการ Config เบื้องต้น

ทำให้ Component ใช้งาน Redux ได้ด้วย react-redux

วิธีการแยก Reducer ไปไว้อีกไฟล์

สร้างหน้าจอแสดงรายชื่อ USER

ปรับหน้าจอ USER ให้ใช้งาน Redux ในแบบที่ผิดๆ

ใช้งาน ReduxThunk แก้ปัญหา Redux เพียวๆ

เทคนิคการ Handle Error Fetch ใน ReduxThunk

สร้างหน้าจอแสดงรายชื่อ Album ตาม UserID

แก้ปัญหาแสดง Loading ไม่ถูกต้อง

แก้ไขจุดผิดพลาดอื่นๆ

สร้างหน้าจอแสดงภาพตาม AlbumID

PageNotFound โดยใช้ Switch ใน ReactRouter v.4

สร้างหน้าจอ Signin

เทคนิคสร้าง PrivateRoute สำหรับ Authentication

ใช้งาน withRouter เพื่อทำระบบการ Signout

ปรับการแสดงผลเมนู

แนะนำ CSS Framework สำหรับ React

ติดตั้ง ReactStrap และ Bootstrap v.4

ปรับ Header ไปใช้ Navbar ของ reactstrap

ปรับหน้าจอ อื่นๆ ตาม Style ของ bootstrap

ลิงค์ดาวน์โหลดไฟล์ WorkShop ที่เสร็จแล้ว

Screenshots

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

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

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

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

Reviews

Jatuporn

February 10, 2021

อยากให้มีการสอนแบบใช้ func Component ครับ เพราะการใช้ class Component มันไม่ค่อยมีคนใช้สอนแล้วในตอนนี้(เท่าที่ผมหา) ใช้ศึกษาต่อยากครับ ถ้ามีเพิ่ม หรือ แก้ไขจะดีมากครับ

Akrin

April 9, 2020

ดีครับ ง่ายต่อการเริ่มต้น ไม่เอา code พวก ui มาปนให้รกทำให้ศึกษาพวก front end ได้เพียวๆ แต่ไหนๆแล้วน่าจะสอนการทำพวก authentication กับ authorization ไปด้วยเลยเช่นใช้พวก token แบบทำจริงๆเค้าทำกันยังไงอะไรแบบนี้ครับ เพิ่มเติม ถ้ามีสอนใช้ติดต่อกับ firebase ให้สามารถทำ fullstack ได้นี่จะเยี่ยมเลยครับ แต่ถ้าแยกไปอีกคอสก็ยินดีลงเรียนต่อครับ

Sutthikiat

April 22, 2019

เนื้ิอหากระซับ เข้าใจง่าย เหมาะสำหรับผู้มีพื้นฐานอยู่แล้วเพื่อสำหรับเพิ่มทักษะเรียนรู้เทคนิคใหม่ๆ หรือ ทบทวนความรู้ ส่วนข้อแนะนำ อยากให้อธิบาย concept ต่างๆให้ละเอียดหรือลงลึกมากกว่านี้ ว่าทำไมต้องใช้ตัวนี้ๆ

Surachet

March 10, 2019

เรียนจบแล้ว มีประโยชน์มากครับ ชอบตรงการสร้างปัญหาให้ขบคิด พร้อมบอกวิธีการแก้ปัญหา ถ้าในอนาคตมีคอร์สใหม่ของ React พร้อมสนับสนุนครับ

Charts

Price

Rating

Enrollment distribution

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