สร้างโครงแอพ

รายละเอียดสำหรับเรียนรู้ React ปี 2020-2023 โดยโค้ชพล ดูหลักสูตรได้ที่ https://www.nextflow.in.th/react-training

สร้างโครงแอพ

  1. สร้างโปรเจค และติดตั้ง package
  2. เคลียร์ UI
  3. สร้าง Main component
  4. สร้าง state เพื่อแสดงตัวโหลดตอนที่แอพยังไม่พร้อม

สร้างระบบ Navigation

  1. สร้าง Navigation ด้วย Router
  2. สร้าง Login Page
  3. เปิดไปหน้า Login ถ้ายังไม่ได้ลงชื่อเข้าใช้

แบบฟอร์ม UI

  1. สร้างแบบฟอร์ม ในหน้า Login
  2. สร้างหน้าลงทะเบียน และกำหนด Router path จากหน้า Login ไปหน้าลงทะเบียน

การจับข้อมูลจากแบบฟอร์มด้วย Formik

  1. เช็คความถูกต้องของข้อมูลด้วย yup
  2. กำหนดการทำงานของ Form ด้วย formik
  3. นำ formik มาใช้กับ JSX

การทำงานกับ Dialog

  1. สร้างกลไกการลงทะเบียน และแสดง pop up เมื่อเสร็จ
  2. แสดง dialog เมื่อการลงทะเบียนสมบูรณ์ ปุ่มปิดจะเป็นการเปิดไปที่หน้า Login

Redux Integration

  1. สร้าง action ใน redux
  2. สร้าง reducer ใน redux
  3. สร้าง store ใน redux
  4. ตั้งค่า Store ให้เชื่อมกับ Component ในระบบแอพ
  5. สร้างกลไกการ authen และแชร์ token ใน component ต่างๆ ผ่าน redux

เชื่อมต่อกับ Web API

  1. ลงทะเบียนกับ Web API
  2. Login เข้าใช้งานผ่าน Web API
  3. เรียกข้อมูลผู้ใช้