Week 3 - Function components

1. Bài tập react viết lại caro bằng Function components

1.1 UI static

Các components gồm có:

• Game

  • Settings : số dòng, số cột, tùy chọn luật chơi (chặn 2 đầu, hay không)

  • Board:

    • Square : các ô cờ cần render

  • List Move:

    • List Move Item: từng bước duy chuyển cụ thể

1.2 Data

• Game

  • Settings :

    • n_col : số cột

    • n_row: số dòng

    • type: chế độ (chặn 2 đầu hay là không)

  • Board: square :

    • square -> Array(n_col, n_row) : mảng lưu lại các ô cờ

    • Square : các ô cờ cần render

      • value : giá trị "X", "O", null

      • IsCurrentValue: giá trị ô hiện tại đang đánh

      • IsHightLight: có high light ô win hay không

  • List Move:

    • historySquare: lưu lại lịch sử các bước đi

    • IsAscending: có đang phân loại sắp xếp hay không

    • List Move Item: từng bước duy chuyển cụ thể

Câu hỏi: có nên đưa data lên tâng cao hơn hay không ?

Để tra lời cho câu hỏi này chúng ta nên trả lời câu hỏi, tại sao chúng ta nên đưa data lên tầng cao hơn

• Các relative components share chung dữ liệu

• Data đưa lên để ancestor components tính toán dữ liệu cho dữ liệu cho các components con

• Data của components không thể tự có được, phải phụ thuộc vào parent render

Lưu ý : data đi từ chiều trên xuống dưới, handle thì đi theo chiều từ con lên cha

1.3 Business

• Game

  • Settings

    • onRowValueChange()

    • onColValueChange()

    • onTypeChange()

    • onSubmit()

  • Board:

    • Square :

      • onClick()

  • List Move:

    • handleSort()

    • List Move Item: handleClickMoveTo()