From 34bd06940a095d0fd1182b21b51fb8fbd2cb7cf7 Mon Sep 17 00:00:00 2001
From: KotonoSora <26807417+KotonoSora@users.noreply.github.com>
Date: Wed, 4 Jun 2025 09:21:00 +0700
Subject: [PATCH 1/3] feat(i18n): translate
src/content/learn/describing-the-ui.md from English to Vietnamese
---
src/content/learn/describing-the-ui.md | 112 ++++++++++++-------------
1 file changed, 56 insertions(+), 56 deletions(-)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 34ee0c01a..72ce3cf97 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -1,30 +1,30 @@
---
-title: Describing the UI
+title: Mô tả UI
---
-React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components.
+React là một thư viện JavaScript để render giao diện người dùng (UI). UI được xây dựng từ những đơn vị nhỏ như nút bấm, văn bản và hình ảnh. React cho phép bạn kết hợp chúng thành những *component* có thể tái sử dụng và lồng ghép. Từ trang web đến ứng dụng điện thoại, mọi thứ trên màn hình đều có thể được chia nhỏ thành component. Trong chương này, bạn sẽ học cách tạo, tùy chỉnh và hiển thị React component theo điều kiện.
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
-* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
+* [Cách viết React component đầu tiên của bạn](/learn/your-first-component)
+* [Khi nào và cách tạo file multi-component](/learn/importing-and-exporting-components)
+* [Cách thêm markup vào JavaScript với JSX](/learn/writing-markup-with-jsx)
+* [Cách sử dụng dấu ngoặc nhọn với JSX để truy cập chức năng JavaScript từ component của bạn](/learn/javascript-in-jsx-with-curly-braces)
+* [Cách cấu hình component với props](/learn/passing-props-to-a-component)
+* [Cách render component theo điều kiện](/learn/conditional-rendering)
+* [Cách render nhiều component cùng lúc](/learn/rendering-lists)
+* [Cách tránh bug khó hiểu bằng cách giữ component thuần khiết](/learn/keeping-components-pure)
+* [Tại sao hiểu UI của bạn như cây cấu trúc lại hữu ích](/learn/understanding-your-ui-as-a-tree)
-## Your first component {/*your-first-component*/}
+## Component đầu tiên của bạn {/*your-first-component*/}
-React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components:
+Ứng dụng React được xây dựng từ những phần UI tách biệt gọi là *component*. Một React component là một JavaScript function mà bạn có thể rắc thêm markup. Component có thể nhỏ như một nút bấm, hoặc lớn như toàn bộ trang. Đây là một component `Gallery` render ba component `Profile`:
@@ -58,13 +58,13 @@ img { margin: 0 10px 10px 0; height: 90px; }
-Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components.
+Đọc **[Component Đầu Tiên Của Bạn](/learn/your-first-component)** để học cách khai báo và sử dụng React component.
-## Importing and exporting components {/*importing-and-exporting-components*/}
+## Import và export component {/*importing-and-exporting-components*/}
-You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file:
+Bạn có thể khai báo nhiều component trong một file, nhưng file lớn có thể khó điều hướng. Để giải quyết điều này, bạn có thể *export* một component vào file riêng của nó, và sau đó *import* component đó từ file khác:
@@ -113,15 +113,15 @@ img { margin: 0 10px 10px 0; }
-Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files.
+Đọc **[Import và Export Component](/learn/importing-and-exporting-components)** để học cách tách component vào file riêng của chúng.
-## Writing markup with JSX {/*writing-markup-with-jsx*/}
+## Viết markup với JSX {/*writing-markup-with-jsx*/}
-Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.
+Mỗi React component là một JavaScript function có thể chứa một số markup mà React render vào trình duyệt. React component sử dụng phần mở rộng cú pháp được gọi là JSX để biểu diễn markup đó. JSX trông rất giống HTML, nhưng nó nghiêm ngặt hơn một chút và có thể hiển thị thông tin động.
-If we paste existing HTML markup into a React component, it won't always work:
+Nếu chúng ta dán markup HTML hiện có vào một React component, nó sẽ không phải lúc nào cũng hoạt động:
@@ -150,7 +150,7 @@ img { height: 90px; }
-If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx):
+Nếu bạn có HTML hiện có như thế này, bạn có thể sửa nó bằng cách sử dụng [trình chuyển đổi](https://transform.tools/html-to-jsx):
@@ -182,13 +182,13 @@ img { height: 90px; }
-Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX.
+Đọc **[Viết Markup với JSX](/learn/writing-markup-with-jsx)** để học cách viết JSX hợp lệ.
-## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/}
+## JavaScript trong JSX với dấu ngoặc nhọn {/*javascript-in-jsx-with-curly-braces*/}
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript:
+JSX cho phép bạn viết markup giống HTML bên trong file JavaScript, giữ logic render và nội dung ở cùng một nơi. Đôi khi bạn sẽ muốn thêm một chút logic JavaScript hoặc tham chiếu đến một thuộc tính động bên trong markup đó. Trong tình huống này, bạn có thể sử dụng dấu ngoặc nhọn trong JSX để "mở cửa sổ" đến JavaScript:
@@ -230,13 +230,13 @@ body > div > div { padding: 20px; }
-Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX.
+Đọc **[JavaScript trong JSX với Dấu Ngoặc Nhọn](/learn/javascript-in-jsx-with-curly-braces)** để học cách truy cập dữ liệu JavaScript từ JSX.
-## Passing props to a component {/*passing-props-to-a-component*/}
+## Truyền props cho component {/*passing-props-to-a-component*/}
-React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX!
+React component sử dụng *props* để giao tiếp với nhau. Mọi component cha có thể truyền một số thông tin cho component con của nó bằng cách cung cấp props cho chúng. Props có thể khiến bạn nhớ đến thuộc tính HTML, nhưng bạn có thể truyền bất kỳ giá trị JavaScript nào qua chúng, bao gồm object, array, function và thậm chí cả JSX!
@@ -311,15 +311,15 @@ export function getImageUrl(person, size = 's') {
-Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props.
+Đọc **[Truyền Props cho Component](/learn/passing-props-to-a-component)** để học cách truyền và đọc props.
-## Conditional rendering {/*conditional-rendering*/}
+## Render theo điều kiện {/*conditional-rendering*/}
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+Component của bạn thường sẽ cần hiển thị những thứ khác nhau tùy thuộc vào các điều kiện khác nhau. Trong React, bạn có thể render JSX theo điều kiện bằng cách sử dụng cú pháp JavaScript như câu lệnh `if`, toán tử `&&` và `? :`.
-In this example, the JavaScript `&&` operator is used to conditionally render a checkmark:
+Trong ví dụ này, toán tử `&&` JavaScript được sử dụng để render dấu kiểm theo điều kiện:
@@ -359,15 +359,15 @@ export default function PackingList() {
-Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally.
+Đọc **[Render Theo Điều Kiện](/learn/conditional-rendering)** để học các cách khác nhau để render nội dung theo điều kiện.
-## Rendering lists {/*rendering-lists*/}
+## Render danh sách {/*rendering-lists*/}
-You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components.
+Bạn sẽ thường muốn hiển thị nhiều component tương tự từ một tập hợp dữ liệu. Bạn có thể sử dụng `filter()` và `map()` của JavaScript với React để lọc và chuyển đổi mảng dữ liệu của bạn thành mảng component.
-For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes.
+Đối với mỗi item trong mảng, bạn sẽ cần chỉ định một `key`. Thông thường, bạn sẽ muốn sử dụng ID từ cơ sở dữ liệu làm `key`. Key cho phép React theo dõi vị trí của từng item trong danh sách ngay cả khi danh sách thay đổi.
@@ -459,18 +459,18 @@ h2 { font-size: 20px; }
-Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key.
+Đọc **[Render Danh Sách](/learn/rendering-lists)** để học cách render danh sách component và cách chọn key.
-## Keeping components pure {/*keeping-components-pure*/}
+## Giữ component thuần khiết {/*keeping-components-pure*/}
-Some JavaScript functions are *pure.* A pure function:
+Một số JavaScript function là *thuần khiết.* Một function thuần khiết:
-* **Minds its own business.** It does not change any objects or variables that existed before it was called.
-* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
+* **Chỉ quan tâm đến công việc của mình.** Nó không thay đổi bất kỳ object hoặc biến nào đã tồn tại trước khi nó được gọi.
+* **Cùng đầu vào, cùng đầu ra.** Với cùng đầu vào, một function thuần khiết luôn trả về cùng kết quả.
-By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
+Bằng cách chỉ viết component của bạn như các function thuần khiết một cách nghiêm ngặt, bạn có thể tránh được cả một loại bug khó hiểu và hành vi không thể dự đoán khi codebase của bạn phát triển. Đây là một ví dụ về component không thuần khiết:
@@ -496,7 +496,7 @@ export default function TeaSet() {
-You can make this component pure by passing a prop instead of modifying a preexisting variable:
+Bạn có thể làm cho component này thuần khiết bằng cách truyền prop thay vì thay đổi biến đã tồn tại trước:
@@ -520,43 +520,43 @@ export default function TeaSet() {
-Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions.
+Đọc **[Giữ Component Thuần Khiết](/learn/keeping-components-pure)** để học cách viết component như những function thuần khiết, có thể dự đoán được.
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## UI của bạn như một cây cấu trúc {/*your-ui-as-a-tree*/}
-React uses trees to model the relationships between components and modules.
+React sử dụng cây để mô hình hóa các mối quan hệ giữa component và module.
-A React render tree is a representation of the parent and child relationship between components.
+Một React render tree là sự biểu diễn của mối quan hệ cha và con giữa các component.
-An example React render tree.
+Một ví dụ về React render tree.
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Component gần đỉnh của cây, gần root component, được coi là component cấp cao nhất. Component không có component con là leaf component. Việc phân loại component này hữu ích để hiểu luồng dữ liệu và hiệu suất render.
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
+Mô hình hóa mối quan hệ giữa các JavaScript module là một cách hữu ích khác để hiểu ứng dụng của bạn. Chúng ta gọi nó là module dependency tree.
-
+
-An example module dependency tree.
+Một ví dụ về module dependency tree.
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
+Một dependency tree thường được sử dụng bởi các công cụ build để đóng gói tất cả code JavaScript liên quan cho client tải xuống và render. Kích thước bundle lớn làm giảm trải nghiệm người dùng cho ứng dụng React. Hiểu module dependency tree sẽ giúp debug những vấn đề như vậy.
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+Đọc **[UI Của Bạn Như Một Cây](/learn/understanding-your-ui-as-a-tree)** để học cách tạo render tree và module dependency tree cho ứng dụng React và cách chúng là những mô hình tinh thần hữu ích để cải thiện trải nghiệm người dùng và hiệu suất.
-## What's next? {/*whats-next*/}
+## Tiếp theo là gì? {/*whats-next*/}
-Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
+Hãy chuyển đến [Component Đầu Tiên Của Bạn](/learn/your-first-component) để bắt đầu đọc chương này từng trang một!
-Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)?
+Hoặc, nếu bạn đã quen thuộc với những chủ đề này, tại sao không đọc về [Thêm Tương Tác](/learn/adding-interactivity)?
From a354e79f7f10c27474fc72b04f97ba9097a08b36 Mon Sep 17 00:00:00 2001
From: KotonoSora <26807417+KotonoSora@users.noreply.github.com>
Date: Thu, 5 Jun 2025 09:09:04 +0700
Subject: [PATCH 2/3] feat(i18n): translate
src/content/learn/describing-the-ui.md from English to Vietnamese
---
src/content/learn/describing-the-ui.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 72ce3cf97..70dd66a0c 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -119,7 +119,7 @@ img { margin: 0 10px 10px 0; }
## Viết markup với JSX {/*writing-markup-with-jsx*/}
-Mỗi React component là một JavaScript function có thể chứa một số markup mà React render vào trình duyệt. React component sử dụng phần mở rộng cú pháp được gọi là JSX để biểu diễn markup đó. JSX trông rất giống HTML, nhưng nó nghiêm ngặt hơn một chút và có thể hiển thị thông tin động.
+Mỗi React component là một JavaScript function có thể chứa một số markup mà React render vào trình duyệt. React component sử dụng phần mở rộng cú pháp được gọi là JSX để hiện thị markup đó. JSX trông rất giống HTML, nhưng nó nghiêm ngặt hơn một chút và có thể hiển thị thông tin một cách linh động.
Nếu chúng ta dán markup HTML hiện có vào một React component, nó sẽ không phải lúc nào cũng hoạt động:
@@ -528,7 +528,7 @@ export default function TeaSet() {
React sử dụng cây để mô hình hóa các mối quan hệ giữa component và module.
-Một React render tree là sự biểu diễn của mối quan hệ cha và con giữa các component.
+Một React render tree là sự hiển thị của mối quan hệ cha và con giữa các component.
From aeb80145aa4e66eab52b805b41211dad15112f93 Mon Sep 17 00:00:00 2001
From: KotonoSora <26807417+KotonoSora@users.noreply.github.com>
Date: Thu, 5 Jun 2025 09:47:33 +0700
Subject: [PATCH 3/3] feat(i18n): translate
src/content/learn/describing-the-ui.md from English to Vietnamese
---
src/content/learn/describing-the-ui.md | 38 +++++++++++++-------------
1 file changed, 19 insertions(+), 19 deletions(-)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 70dd66a0c..157996ea0 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -11,20 +11,20 @@ React là một thư viện JavaScript để render giao diện người dùng (
* [Cách viết React component đầu tiên của bạn](/learn/your-first-component)
-* [Khi nào và cách tạo file multi-component](/learn/importing-and-exporting-components)
+* [Khi nào và cách tạo file với nhiều component](/learn/importing-and-exporting-components)
* [Cách thêm markup vào JavaScript với JSX](/learn/writing-markup-with-jsx)
* [Cách sử dụng dấu ngoặc nhọn với JSX để truy cập chức năng JavaScript từ component của bạn](/learn/javascript-in-jsx-with-curly-braces)
* [Cách cấu hình component với props](/learn/passing-props-to-a-component)
* [Cách render component theo điều kiện](/learn/conditional-rendering)
* [Cách render nhiều component cùng lúc](/learn/rendering-lists)
* [Cách tránh bug khó hiểu bằng cách giữ component thuần khiết](/learn/keeping-components-pure)
-* [Tại sao hiểu UI của bạn như cây cấu trúc lại hữu ích](/learn/understanding-your-ui-as-a-tree)
+* [Tại sao hiểu UI của bạn theo cấu trúc cây lại hữu ích](/learn/understanding-your-ui-as-a-tree)
## Component đầu tiên của bạn {/*your-first-component*/}
-Ứng dụng React được xây dựng từ những phần UI tách biệt gọi là *component*. Một React component là một JavaScript function mà bạn có thể rắc thêm markup. Component có thể nhỏ như một nút bấm, hoặc lớn như toàn bộ trang. Đây là một component `Gallery` render ba component `Profile`:
+Ứng dụng React được xây dựng từ những phần UI độc lập gọi là *component*. Một React component là một JavaScript function mà bạn có thể thêm markup vào. Component có thể nhỏ như một nút bấm, hoặc lớn như toàn bộ trang. Đây là một component `Gallery` render ba component `Profile`:
@@ -64,7 +64,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
## Import và export component {/*importing-and-exporting-components*/}
-Bạn có thể khai báo nhiều component trong một file, nhưng file lớn có thể khó điều hướng. Để giải quyết điều này, bạn có thể *export* một component vào file riêng của nó, và sau đó *import* component đó từ file khác:
+Bạn có thể khai báo nhiều component trong một file, nhưng file quá nhiều component có thể khó sử dụng. Để giải quyết điều này, bạn có thể *export* một component vào file riêng của nó, và sau đó *import* component đó từ file khác:
@@ -119,9 +119,9 @@ img { margin: 0 10px 10px 0; }
## Viết markup với JSX {/*writing-markup-with-jsx*/}
-Mỗi React component là một JavaScript function có thể chứa một số markup mà React render vào trình duyệt. React component sử dụng phần mở rộng cú pháp được gọi là JSX để hiện thị markup đó. JSX trông rất giống HTML, nhưng nó nghiêm ngặt hơn một chút và có thể hiển thị thông tin một cách linh động.
+Mỗi React component là một JavaScript function có thể chứa một số markup mà React render vào trình duyệt. React component sử dụng phần mở rộng cú pháp được gọi là JSX để hiển thị markup đó. JSX trông rất giống HTML, nhưng nó nghiêm ngặt hơn một chút và có thể hiển thị thông tin một cách linh động.
-Nếu chúng ta dán markup HTML hiện có vào một React component, nó sẽ không phải lúc nào cũng hoạt động:
+Nếu chúng ta dùng y hệt markup HTML vào một React component, nó chưa chắc sẽ hoạt động:
@@ -150,7 +150,7 @@ img { height: 90px; }
-Nếu bạn có HTML hiện có như thế này, bạn có thể sửa nó bằng cách sử dụng [trình chuyển đổi](https://transform.tools/html-to-jsx):
+Nếu bạn hiện có HTML như thế này, bạn có thể sửa nó bằng cách sử dụng [trình chuyển đổi](https://transform.tools/html-to-jsx):
@@ -188,7 +188,7 @@ img { height: 90px; }
## JavaScript trong JSX với dấu ngoặc nhọn {/*javascript-in-jsx-with-curly-braces*/}
-JSX cho phép bạn viết markup giống HTML bên trong file JavaScript, giữ logic render và nội dung ở cùng một nơi. Đôi khi bạn sẽ muốn thêm một chút logic JavaScript hoặc tham chiếu đến một thuộc tính động bên trong markup đó. Trong tình huống này, bạn có thể sử dụng dấu ngoặc nhọn trong JSX để "mở cửa sổ" đến JavaScript:
+JSX cho phép bạn viết markup giống HTML bên trong file JavaScript, để giữ logic render và nội dung ở cùng một nơi. Đôi khi bạn sẽ muốn thêm một chút logic JavaScript hoặc tham chiếu đến một thuộc tính động bên trong markup đó. Trong tình huống này, bạn có thể sử dụng dấu ngoặc nhọn trong JSX để "mở cửa sổ" đến JavaScript:
@@ -367,7 +367,7 @@ export default function PackingList() {
Bạn sẽ thường muốn hiển thị nhiều component tương tự từ một tập hợp dữ liệu. Bạn có thể sử dụng `filter()` và `map()` của JavaScript với React để lọc và chuyển đổi mảng dữ liệu của bạn thành mảng component.
-Đối với mỗi item trong mảng, bạn sẽ cần chỉ định một `key`. Thông thường, bạn sẽ muốn sử dụng ID từ cơ sở dữ liệu làm `key`. Key cho phép React theo dõi vị trí của từng item trong danh sách ngay cả khi danh sách thay đổi.
+Đối với mỗi item trong mảng, bạn sẽ cần chỉ định một `key`. Thông thường, bạn sẽ muốn sử dụng ID từ cơ sở dữ liệu làm `key`. Key cho phép React xác định từng item trong danh sách ngay cả khi danh sách thay đổi.
@@ -467,10 +467,10 @@ h2 { font-size: 20px; }
Một số JavaScript function là *thuần khiết.* Một function thuần khiết:
-* **Chỉ quan tâm đến công việc của mình.** Nó không thay đổi bất kỳ object hoặc biến nào đã tồn tại trước khi nó được gọi.
+* **Chỉ quan tâm đến công việc của nó.** Nó không thay đổi bất kỳ object hoặc biến nào đã tồn tại trước khi nó được gọi.
* **Cùng đầu vào, cùng đầu ra.** Với cùng đầu vào, một function thuần khiết luôn trả về cùng kết quả.
-Bằng cách chỉ viết component của bạn như các function thuần khiết một cách nghiêm ngặt, bạn có thể tránh được cả một loại bug khó hiểu và hành vi không thể dự đoán khi codebase của bạn phát triển. Đây là một ví dụ về component không thuần khiết:
+Bằng cách chỉ viết component của bạn như các function thuần khiết một cách nghiêm ngặt, bạn có thể tránh được một loạt bug khó hiểu và hành vi khó đoán khi codebase của bạn ngày càng lớn. Đây là một ví dụ về component không thuần khiết:
@@ -520,15 +520,15 @@ export default function TeaSet() {
-Đọc **[Giữ Component Thuần Khiết](/learn/keeping-components-pure)** để học cách viết component như những function thuần khiết, có thể dự đoán được.
+Đọc **[Giữ Component Thuần Khiết](/learn/keeping-components-pure)** để học cách viết component như những function thuần khiết, dễ dự đoán.
-## UI của bạn như một cây cấu trúc {/*your-ui-as-a-tree*/}
+## UI của bạn theo cấu trúc cây {/*your-ui-as-a-tree*/}
-React sử dụng cây để mô hình hóa các mối quan hệ giữa component và module.
+React sử dụng cây để biểu diễn các mối quan hệ giữa component và module.
-Một React render tree là sự hiển thị của mối quan hệ cha và con giữa các component.
+Một React render tree là sự biểu hiện của mối quan hệ cha và con giữa các component.
@@ -536,9 +536,9 @@ Một ví dụ về React render tree.
-Component gần đỉnh của cây, gần root component, được coi là component cấp cao nhất. Component không có component con là leaf component. Việc phân loại component này hữu ích để hiểu luồng dữ liệu và hiệu suất render.
+Component gần đỉnh của cây, gần root component, được coi là component cấp cao nhất. Component không có component con là leaf (lá) component. Việc phân loại các component này hữu ích để hiểu luồng dữ liệu và hiệu suất render.
-Mô hình hóa mối quan hệ giữa các JavaScript module là một cách hữu ích khác để hiểu ứng dụng của bạn. Chúng ta gọi nó là module dependency tree.
+Biểu diễn mối quan hệ giữa các JavaScript module là một cách hữu ích khác để hiểu ứng dụng của bạn. Chúng ta gọi nó là module dependency tree.
@@ -546,11 +546,11 @@ Một ví dụ về module dependency tree.
-Một dependency tree thường được sử dụng bởi các công cụ build để đóng gói tất cả code JavaScript liên quan cho client tải xuống và render. Kích thước bundle lớn làm giảm trải nghiệm người dùng cho ứng dụng React. Hiểu module dependency tree sẽ giúp debug những vấn đề như vậy.
+Một dependency tree thường được sử dụng bởi các công cụ build để đóng gói tất cả code JavaScript liên quan cho client tải xuống và render. Bundle có kích thước lớn sẽ làm giảm trải nghiệm người dùng của ứng dụng React. Hiểu được module dependency tree sẽ giúp khắc phục những vấn đề như vậy.
-Đọc **[UI Của Bạn Như Một Cây](/learn/understanding-your-ui-as-a-tree)** để học cách tạo render tree và module dependency tree cho ứng dụng React và cách chúng là những mô hình tinh thần hữu ích để cải thiện trải nghiệm người dùng và hiệu suất.
+Đọc **[UI Của Bạn Theo Cấu Trúc Cây](/learn/understanding-your-ui-as-a-tree)** để học cách tạo render tree và module dependency tree cho ứng dụng React và cách chúng là những mô hình tư duy hữu ích để cải thiện trải nghiệm người dùng và hiệu suất.