คอร์สออนไลน์ React Fundamentals สอนการใช้งาน React Redux และ Material UI อย่างมืออาชีพ

สอนการใช้งาน React และ Redux ตั้งแต่เริ่มต้นจนสามารถสร้างแอพเองได้ พร้อม Shopping Online Workshop

5,950
3,500 บาท
8.98
ชั่วโมงเรียน
67
วิดีโอ
8
บทเรียน
Beginner
ระดับ
รายละเอียด
ความคิดเห็น

รายละเอียดคอร์ส

React เป็นไลบรารี่ที่มีบทบาทสำคัญต่อการพัฒนาเว็บในปัจจุบัน ดังจะเห็นได้จากเว็บไซต์ขนาดใหญ่ทั้ง Facebook Airbnb หรือ Netflix ต่างก็ใช้ React นั่นเป็นเพราะ React นั้นออกแบบมาเพื่อง่ายต่อการพัฒนาเว็บที่ซับซ้อน ทั้งมีประสิทธิภาพสูง และสามารถต่อยอดเพื่อพัฒนาแอปพลิเคชันบนมือด้วย React Native ได้

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

ตลอดทั้งคอร์สผู้เรียนจะได้รับการทบทวนการใช้งาน JavaScript สมัยใหม่ พร้อมทั้งเรียนรู้หลักการของการออกแบบแอพพลิเคชันฝั่ง client เช่น การออกแบบด้วยเทคนิค Component-Based การประสานการทำงานของ React และ RESTful API อย่างไร้รอยต่อ การออกแบบเพื่อใช้ซ้ำผ่าน React Hooks นั่นรวมถึงขั้นตอนออกแบบและการวางโครงสร้างโปรเจคที่ดี นอกจากนี้เนื้อหาคอร์สยังรวมถึงการจัดรูปแบบ Stylesheet ด้วย CSS ผ่านไลบรารี่ยอดนิยมอย่าง Material UI การจัดการเส้นทางในหน้าเพจด้วย React Router การทำงานกับฟอร์มผ่าน React Hook Form โดยอาศัย Yup เป็นเครื่องมือตรวจสอบความถูกต้องของข้อมูลในฟอร์ม การจัดการข้อมูลในแอปพลิเคชันด้วย Redux ซึ่งเป็นเครื่องมือจัดการข้อมูล (state management) ยอมนิยมในโลกของ Redux สุดท้ายเมื่อการเรียนรู้หลักการต่าง ๆ เสร็จสิ้น เราจะสอนถึงวิธีการ Build และ Deploy โปรเจ็กต์สู่ Production โดยสาธิตการใช้งานผ่าน Vercel ที่เป็นบริการฟรีและสามารถใช้งานร่วมกับ React ได้

เนื้อหาบทเรียน

Unit
1
แนะนำ React
React คืออะไร รู้จักคุณสมบัติและการใช้งาน React เบื้องต้นพร้อมสร้างมินิโปรเจคคือแอพใบ้หวย ในบทเรียนผู้เรียนจะได้เห็นภาพรวมของการใช้งาน React โดยยังไม่จำเป็นต้องจดจำ syntax ใด ๆ
0. วิดีโอแนะนำคอร์ส
6.58
0.5. แนะนำการใช้งานคอร์ส
1.38
1. React คืออะไร มีรูปแบบการเขียนอย่างไร
9.16
2. สร้างโปรเจค React ด้วย create-react-app
9.13
3. เข้าใจการใช้งาน JSX
9.27
4. สร้างแอพลอตเตอรี่ด้วย React
5.23
5. การจัดการ state และ event ใน React
7.52
6. การแบ่งแยกคอมโพแนนท์ และการใช้งาน props
8.07
7. การจัดการ Dynamic List ใน React
7.48
8. ความหมายของ Reconciliation
7.13
Unit
2
ทบทวนการใช้งาน JavaScript สมัยใหม่
เพื่อให้การเรียน React เป็นไปอย่างราบลื่น บทเรียนนี้จะทำการทบทวนการใช้งาน Node.js พร้อมทั้งไวยากรณ์ของ JavaScript สมัยใหม่ รวมถึงการวางโครงสร้างโปรเจคเพื่อให้พร้อมต่อการทำงานแบบ Client-Server
1. ทบทวนการใช้งาน Node.js เบื้องต้น
11.23
2. การประกาศตัวแปรด้วย let และ const
3.5
3. การใช้งาน Template Literals
2.12
4. ทบทวนการใช้งานออบเจ็กต์และอาร์เรย์
8.42
5. Destructuring Assignment
9.28
6. Optional Chaining
3.02
7. การกระจายข้อมูลด้วย Spread Operator
4.31
8. Arrow Functions
5.31
9. การใช้งาน map และ filter กับอาร์เรย์
4.15
10. Short-Circuit Evaluation
2.04
11. การจัดการโมดูลด้วย ES Module
9.37
12. จัดการ Asynchronous ด้วย async/await
9.56
13. การเข้าถึง API ด้วย axios
4.56
14. การใช้งานร่วมกันของโปรเจค API และ UI
8.29
15. การติดตั้งและใช้งาน Eslint และ Prettier
4.37
Unit
3
การใช้งาน React Hooks
กลุ่มของฟังก์ชันที่สำคัญต่อการจัดการ state และช่วงชีวิตของคอมโพแนนท์ใน React หรือที่เราเรียกว่า React Hooks คือสิ่งที่เราจะได้เรียนรู้ในบทเรียนนี้ ทั้ง useState, useEffect และ useRef นอกจากนี้ผู้เรียนยังจะได้เรียนรู้การสร้าง Hooks ด้วยตนเองอีกด้วย
1. จัดการ state ในคอมโพแนนท์ด้วย useState
8.18
2. ควบคุม Life Cycle ของคอมโพแนนท์ด้วย useEffect
9.16
3. การใช้ useEffect และ useState เพื่อดึงข้อมูลจาก API
8.12
4. การกำหนดค่า Environment Variables
3.3
5. การเข้าถึงอีลีเมนต์ด้วย useRef
3.08
6. การสร้างและใช้งาน Custom Hooks
8.48
7. ทบทวนหลักการของ RESTful API
5.1
8. Parent-Child Communication
16.37
9. หลักการและการใช้งาน CSS Modules
4
10. Children และ Spread Attributes
2.44
Unit
4
ตกแต่ง CSS และจัดหน้าเพจด้วย Material UI
บทเรียนนี้ผู้เรียนจะได้เรียนรู้การใช้งาน CSS ใน React พร้อมกับใช้ CSS Framework ยอดนิยมของ React อย่าง Material UI ด้วยเช่นกัน
1. ภาพรวมของ Workshop ร้านค้าออนไลน์
2.42
2. เปรียบเทียบ Material UI, Reactstrap และ Ant Design
8.2
3. การติดตั้งและใช้งาน Material UI
8.26
4. การใช้งานคอมโพแนนท์ที่สำคัญของ Material UI
9.28
5. การใช้งาน CSS ผ่าน makeStyles
7.37
6. Nested Selectors
1.27
7. การทำงานกับ breakpoints ผ่าน useMediaQuery
3.22
8. รู้จัก Container และ Grid ใน Material UI
10.06
9. การวางโครงสร้างโปรเจคให้เหมาะสมและยืดหยุ่น
2.47
10. Workshop การออกแบบ UI เพื่อการวางเลย์เอาท์บนหน้าเพจ
18.41
11. Workshop การพัฒนาส่วนแสดงสินค้าในระบบขายสินค้าออนไลน์
23.18
12. Workshop การสร้างส่วนแสดงตะกร้าสินค้า
7.43
13. การสร้าง Theme และใช้งาน Dark Mode
4.37
14. Material UI และปัญหาของ Strict Mode
1.16
Unit
5
จัดการเส้นทางในหน้าเพจด้วย React Router
เว็บแอพหนึ่ง ๆ สามารถมีได้หลายหน้าเพจ เราจึงต้องเรียนรู้การเปลี่ยนหน้าเพจด้วยหลักการของการสร้าง Route และ Router ผ่านแพคเกจยอดนิยมอย่าง React Router
1. การประกาศ Route และการใช้ Switch
16.42
2. การเข้าถึงข้อมูล path ด้วย useRouteMatch
3.43
3. การเปลี่ยนหน้าเพจด้วย Link
3.12
4. การเรียกใช้งาน history ด้วย useHistory
6.35
5. การดึงค่า Dynamic Segments ด้วย useParams
2.19
6. การดึงค่า Query String ผ่าน useLocation
8.51
7. Redirect ใน React Router
2.16
Unit
6
การจัดการฟอร์มด้วย React Hook Form
การทำงานกับฟอร์มนั้นสำคัญ โดยเฉพาะจะทำอย่างไรถึงดึงข้อมูลออกจากฟอร์มได้ นั่นรวมถึงการตรวจสอบข้อมูลในฟอร์มด้วยเช่นกัน บทเรียนนี้เราจะทำงานกับฟอร์มโดยอาศัย React Hook Form และ Yup
1. เปรียบเทียบ Formik กับ React Hook Form
1.15
2. การสร้างฟอร์มด้วย React Hook Form ผ่าน useForm
5.06
3. ตรวจสอบความถูกต้องของฟอร์มด้วย Yup
9.36
4. การใช้งาน React Hook Form ร่วมกับ Material UI
7.59
Unit
7
บริหาร state ในแอพพลิเคชันด้วย Redux
เว็บแอพทั่วไปมีการส่งต่อหรือใช้งาน state ร่วมกันในหลาย ๆ คอมโพแนนท์ เราจึงต้องการเครื่องมือที่ทำให้การใช้งานร่วมกันของ state นั้นง่ายและคาดเดาได้ บทเรียนนี้เราจะเรียนรู้การใช้ Redux ซึ่งเป็น State Management ยอดนิยม
1. Redux คืออะไร ทำไมจึงสำคัญ
13.4
2. Store และ Reducers
20.32
3. Actions และ Action Creators
21.2
4. การทำงานของ Async Actions และการใช้งาน Redux Thunk
65.54
5. จัดการสถานะของ Route ด้วย connected-react-router
7.34
Unit
8
Deployment
เมื่อการพัฒนาโปรเจคเสร็จสิ้นก็ถึงกระบวนการ Build และ Deployment นั่นคือหัวใจสำคัญของบทเรียนนี้
1. การเตรียมการสำหรับ Production
4.02
2. Build และ Deploment
4.02
3. การ Deploy แอปพลิเคชันสู่ Vercel
5.51
Unit
9
คอร์สอัพเดท
คอร์สอัพเดท
ข้อมูลการใช้งาน
Workshop Overview
4.02
การสร้างโปรเจค React ด้วย Vite
5.51
React Components
5.51
Reconciliation
5.51
Prettier และ ESLint
5.51
การใช้งาน Thunder Client
5.51
การจัดการ Local State ด้วย useState
5.51
Parent-Child Communication
5.51
การจัดการ Life Cycle ของคอมโพแนนท์ด้วย useEffect
5.51
Data Fetching
5.51
การสร้าง Custom Hooks
5.51
การแชร์ส่วนแสดงผลด้วยพร็อพเพอร์ตี้ children
5.51
Router และ Routes ใน React Router
5.51
การใช้งานคอมโพแนนท์ Navigate
5.51
Outlet
5.51
การเปลี่ยน Route ด้วยคอมโพแนนท์ Link
5.51
การเปลี่ยนเส้นทางด้วย useNavigate
5.51
การเข้าถึงพารามิเตอร์บนพาธด้วย useParams
5.51
การเรียกใช้ออบเจ็กต์ location ด้วย useLocation
5.51
การเข้าถึง Query String ด้วย useSearchParams
5.51
useMatch
5.51
การสร้าง Path Alias
5.51
การประกาศชนิดข้อมูลแทน Model
5.51
การสร้าง Instance ของ Axios และการใช้งาน Env
5.51
การใช้งาน React Query
5.51
การดึงข้อมูลด้วย useQuery
5.51
React Query DevTools
5.51
การสร้าง Custom API Hooks
5.51

ตัวอย่าง Workshop

คอร์สของเรานอกจากจะสอนทฤษฎีและตัวอย่างการใช้งานทั่วไปแล้ว ยังมี Workshop เป็นระบบขายสินค้าออนไลน์อีกด้วย สามารถดูตัวอย่าง Workshop จริงได้จาก ที่นี่

Shopping Online

โดยระบบนี้ผู้เรียนจะได้ทราบถึงการออกแบบและใช้คอมโพแนนท์ของ Material UI ที่มีพื้นฐานดีไซน์มาจาก Material Design ของ Google ซึ่งสนับสนุนการทำงานแบบ Responsive สามารถเปิดเว็บเพื่อชมได้จากทั้งเดสก์ทอปหรือมือถือ โดยหน้าจอไม่เสียเลย์เอาต์

Shopping Online

ระบบขายสินค้าออนไลน์ไม่ได้มีหน้าเดียว ต้องมีหน้าแสดงสินค้าและหน้าตะกร้าสินค้าเป็นอย่างน้อย Workshop นี้จะได้แสดงถึงการใช้ React Router เพื่อจัดการเกี่ยวกับการเปลี่ยนหน้าเพจ

Shopping Online

การทำงานกับฟอร์มก็เป็นส่วนสำคัญ Workshop นี้ได้แสดงถึงการสร้างฟอร์มเพื่อกรอกข้อมูลลูกค้าก่อนเตรียมจัดส่ง พร้อมสาธิตวิธีการตรวจสอบข้อมูลภายในฟอร์ม

Shopping Online

แอปพลิเคชันทั่วไปมันมีการส่งข้อมูลข้ามหน้าเพจไปมา เช่น ข้อมูลของสินค้าที่ถูกเลือกจากหน้าแสดงสินค้าทั้งหมด ต้องนำมาแสดงผลในหน้าตะกร้าสินค้า คอร์สของเราได้แสดงวิธีการใช้ Redux เพื่อการแชร์ข้อมูลร่วมกันในหลาย ๆ คอมโพแนนท์ พร้อมแสดงวิธีการ Debug ข้อมูลที่เกิดขึ้นในแอปพลิเคชันด้วย

Shopping Online

คอร์สนี้เหมาะกับใคร

  • ผู้เรียนที่มีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว โดยในคอร์สจะมีการทบทวน JavaScript สมัยใหม่ที่จำเป็นต่อการใช้งาน React
  • ผู้เรียนที่ไม่เคยเขียน React มาก่อน และต้องการสร้างเว็บด้วย React
  • ผู้เรียนที่เคยเขียน React อยู่ก่อนแล้ว แต่ต้องการอัพเดทความรู้ React สมัยใหม่ เช่น การใช้งาน React Hooks
  • ผู้เรียนที่ต้องการเรียนรู้ไลบรารี่สมัยใหม่ในการใช้งานกับ React เช่น React Hook Form, Yup และ Material UI

ผู้สอน

Nuttavut Thongjor

นักพัฒนาซอฟต์แวร์ประสบการณ์กว่า 10 ปี ผู้ก่อตั้ง Babel Coder วิทยากรอบรมการพัฒนาซอฟต์แวร์และผู้ให้คำปรึกษาในบริษัทชั้นนำ

คำถามพบบ่อย

คำถาม: จำเป็นต้องมีพื้นฐานอะไรบ้าง
คำตอบ: ผู้เรียนจำเป็นต้องมีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว

คำถาม: มีจำกัดเวลาเข้าชมหรือไม่
คำตอบ: ผู้เรียนสามารถเข้าชมคอร์สได้ทุกเวลาตลอดอายุการใช้งาน

คำถาม: ผู้เรียนจะได้รับการอัพเดทเนื้อหาตลอดเวลาหรือไม่
คำตอบ: ผู้เรียนจะได้รับการอัพเดทเนื้อหาเป็นเวลา 1 ปีนับจากวันที่ทำการซื้อคอร์ส หลังพ้นกำหนดผู้เรียนยังคงเข้าชมคอร์สได้ตามปกติ แต่จะไม่ได้รับการอัพเดทเนื้อหาอีกต่อไป

คำถาม: บริการหลังการขายมีอะไรบ้าง
คำตอบ: การถาม-ตอบ เนื้อหาที่เกี่ยวกับบทเรียน

คำถาม: จะสามารถสั่งซื้อคอร์สนี้ในนามบริษัทได้อย่างไร
คำตอบ: คุณลูกค้าสามารถติดต่อเพจ Babel Coder เพื่อขอใบเสนอราคา
ได้ครับ โดยราคาสำหรับองค์กรจะเป็นราคาจำหน่ายเต็มจากราคาที่ระบุครับ

สอบถามเพิ่มเติมโปรดติดต่อ เพจ Babel Coder

เว็บไซต์นี้มีการจัดเก็บข้อมูล

เราจัดเก็บข้อมูลเพื่อเพิ่มประสิทธิภาพและประสบการณ์ที่ดีในการใช้งานเว็บไซต์ เราสามารถนำเสนอสิ่งที่คุณสนใจเป็นพิเศษเมื่อคุณกด "ยอมรับทั้งหมด" ทั้งนี้คุณสามารถเลือกตั้งค่าความยินยอมในการใช้งานผ่าน "การตั้งค่า" หากคุณไม่ปรับเปลี่ยนการตั้งค่าเราเข้าใจว่าคุณให้ความยินยอมในการจัดเก็บข้อมูลทั้งหมดแล้ว อ่านนโยบายความเป็นส่วนตัว