# Week 3 - Function components

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



### 1.1 UI static

![](https://2152464872-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjE1Y7UScIVoSOhLGSH%2F-Ml5Kq-lwCjTiHdLWuUV%2F-Ml5LHO8p57ErCOwPKTn%2Fimage.png?alt=media\&token=612b9fd4-2cee-4202-abef-77f87ae9bf8d)

Các components gồm có:&#x20;

* **Game**
  * **Settings** : số dòng, số cột, tùy chọn luật chơi (chặn 2 đầu, hay không)
  * **Board**:&#x20;
    * **Square** : các ô cờ cần render
  * **List Move**:&#x20;
    * **List Move Item**: từng bước duy chuyển cụ thể



### 1.2 Data

![](https://2152464872-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjE1Y7UScIVoSOhLGSH%2F-Ml5LxyeaOB7G3WTokYU%2F-Ml5MJ6zhkVTradQLCkv%2Fimage.png?alt=media\&token=f476bb41-4549-4a4a-8015-5008988850ad)



* Game
  * Settings :&#x20;
    * **n\_col** : số cột
    * **n\_row**: số dòng
    * **type**: chế độ (chặn 2 đầu hay là không)
  * Board: square :&#x20;
    * **square** -> Array(n\__col, n\_row_) : mảng lưu lại các ô cờ&#x20;
    * Square : các ô cờ cần render
      * **value** : giá trị "X", "O", null
      * **IsCurrentValu**e: giá trị ô hiện tại đang đánh
      * **IsHightLight**: có high light ô win hay không&#x20;
  * List Move:&#x20;
    * **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ể

{% hint style="danger" %}
Câu hỏi: có nên đưa data lên tâng cao hơn hay không ?&#x20;

Để 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
{% endhint %}

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

![](https://2152464872-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjE1Y7UScIVoSOhLGSH%2F-Ml5NWVvXdfMbI10MOol%2F-Ml5NiIiI4eGP8ym7LHy%2Fimage.png?alt=media\&token=20f5cacf-cb14-446f-8412-0fa3b299c23b)



* Game
  * Settings&#x20;
    * onRowValueChange()
    * onColValueChange()
    * onTypeChange()
    * **onSubmit**()
  * Board:&#x20;
    * Square :
      * **onClick**()
  * List Move:&#x20;
    * handleSort()
    * List Move Item: **handleClickMoveTo**()





