Practice: Note App

React Setup & Ant Design Theme

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

React Component

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

React + Redux

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

React Router

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

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

Redux Saga

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

Test React

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

Test Saga

1. ติดตั้ง redux-saga-test-plan
2. สร้าง Unit Test ของ Saga
3. test การทำงานของ doSignIn Saga
4. เขียน test unit ตอน signin failed
5. เขียนโค้ด saga ให้ผ่าน
6. ทดลองเขียน Integration Test