readme.md

Practice: Note App

React Setup & Ant Design Theme

1. สร้างโปรเจค และติดตั้ง module
2. ใช้งาน Ant Design สร้างหน้า App สร้าง Header Menu

React Component

3. สร้าง HomePage Component สำหรับจัดเก็บหน้า UI ของ HomePage
4. สร้างกล่องกรอกข้อความสำหรับหน้า HomePage
5. สร้าง List ไว้แสดง Note message สำหรับหน้า HomePage

React + Redux

6. ติดตั้ง Redux เข้ากับโปรเจค
7. เชื่อม NoteList Component เข้า Redux Store
8. เชื่อม NoteInputBox Component เข้า Redux Store
9. แก้ไข Reducer เพื่อตอบรับ Action ที่ชื่อ SAVE_NEW_NOTE

React Router

หากโปรเจคเก่าหายไปแล้ว ให้ดาวน์โหลดไฟล์โปรเจคจากที่นี่

10. สร้างระบบ Navigation ด้วย React Router
11. ใช้งาน Push module ในการ redirect
12. ส่ง SignIn Action เข้า Redux Store

Redux Saga

13. ติดตั้ง และลองใช้งาน Redux Saga
14. สร้าง Saga เพิ่มเติม และรวมเข้าเป็น root saga
15. จัดกลุ่ม Saga เพื่อให้ดูแลได้ง่ายขึ้น
16. ทดสอบใช้งาน saga ผ่าน Action
17. สร้าง Saga สำหรับ Sign In Operation

Test React

18. ติดตั้ง Module และ Extension เพ่ิมเติม
19. เตรียมเขียน Test UI ตัวแรก
20. ทดสอบว่ามี Spin Component อยู่ใน App Component ไหม
21. test ค่า App.props.loading และ implement
22. test initial state ของแอพต้อง return false

Test Saga

23. ติดตั้ง redux-saga-test-plan
24. สร้าง Unit Test ของ Saga
25. test การทำงานของ doSignIn Saga
26. เขียน test unit ตอน signin failed
27. เขียนโค้ด saga ให้ผ่าน
28. ทดลองเขียน Integration Test