Skip to content

Commit 7675c5c

Browse files
committed
fix typo
1 parent 2efa427 commit 7675c5c

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

content/docs/thinking-in-react.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Một trong những điểm tuyệt vời của React là nó giúp bạn phát
1414

1515
## Bắt đầu với Mock {#start-with-a-mock}
1616

17-
Tưởng tượng rằng chúng ta có một API và một bản mock từ người thiết kế. Bản mock trông như sau:
17+
Tưởng tượng rằng chúng ta có một JSON API và một bản mock từ người thiết kế. Bản mock trông như sau:
1818

1919
![Mockup](../images/blog/thinking-in-react-mock.png)
2020

@@ -41,15 +41,15 @@ Vì mô hình dữ liệu thường hiển thị dưới dạng chuỗi JSON, n
4141

4242
![Sơ đồ Component](../images/blog/thinking-in-react-components.png)
4343

44-
Có năm component trong ứng dựng, dữ liệu mà component hiển thị sẽ được in nghiêng
44+
Trong ứng dụng đơn giản dưới đây, bạn sẽ thấy chúng ta có 5 component, dữ liệu mà mỗi component hiển thị sẽ được in nghiêng
4545

4646
1. **`FilterableProductTable` (orange):** chứa toàn bộ cả ứng dụng
4747
2. **`SearchBar` (blue):** nơi *người dùng nhập dữ liệu*
4848
3. **`ProductTable` (green):** lọc và hiển thị *kết quả* dựa trên *dữ liệu đầu vào*
4949
4. **`ProductCategoryRow` (turquoise):** hiển thị trương mục theo *thể loại*
5050
5. **`ProductRow` (red):** hiển thị *sản phẩm* theo từng dòng
5151

52-
Nhìn vào `ProductTable`, bạn sẽ thấy rằng tiêu đề cuả bảng (bao gồm những tiêu đề như "Name" và "Price") không được chia nhỏ thành các component. Đây là một tuỳ chọn mang tính cá nhânnhân, đã có những cuộc thảo luận về vấn đề này. Trong ví dụ, chúng ta để nó như là một phần của `ProductTable` bởi vì nó là một phần khi hiển thị *bảng dữ liệu* thuộc về `ProductTable`. Tuy nhiên, nếu như phần tiêu đề trở nên phức tạp (ví dụ nếu chúng ta thêm chức năng sắp xếp phân loại), thì tất nhiên sẽ hơp lí hơn khi có component `ProductTableHeader` cho phần tiêu đề.
52+
Nhìn vào `ProductTable`, bạn sẽ thấy rằng tiêu đề cuả bảng (bao gồm những tiêu đề như "Name" và "Price") không được chia nhỏ thành các component. Đây là một tuỳ chọn mang tính cá nhân, đã có những cuộc thảo luận về vấn đề này. Trong ví dụ, chúng ta để nó như là một phần của `ProductTable` bởi vì nó là một phần khi hiển thị *bảng dữ liệu* thuộc về `ProductTable`. Tuy nhiên, nếu như phần tiêu đề trở nên phức tạp (ví dụ nếu chúng ta thêm chức năng sắp xếp phân loại), thì tất nhiên sẽ hơp lí hơn khi có component `ProductTableHeader` cho phần tiêu đề.
5353

5454
Bây giờ khi xác định các component trong bản mock, hãy sắp xếp nó theo một hệ thống phân chia cấp bậc. Những component cùng nằm bên trong một component trong bản mock thì nó nên là component con trong hệ thống cấp bậc:
5555

0 commit comments

Comments
 (0)