feat(i18n): translate src/content/learn/describing-the-ui.md from English to Vietnamese

src/content/learn/describing-the-ui.md

@@ -1,30 +1,30 @@
 ---
-title: Describing the UI
+title: Mô tả UI
 ---
 
 <Intro>
 
-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.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [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 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 theo cấu trúc cây lại hữu ích](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
-## 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 độ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`:
 
 <Sandpack>
 
@@ -58,13 +58,13 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 <LearnMore path="/learn/your-first-component">
 
-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.
 
 </LearnMore>
 
-## 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 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:
 
 
 <Sandpack>
@@ -113,15 +113,15 @@ img { margin: 0 10px 10px 0; }
 
 <LearnMore path="/learn/importing-and-exporting-components">
 
-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.
 
 </LearnMore>
 
-## 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 để 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.
 
-If we paste existing HTML markup into a React component, it won't always work:
+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:
 
 <Sandpack>
 
@@ -150,7 +150,7 @@ img { height: 90px; }
 
 </Sandpack>
 
-If you have existing HTML like this, you can fix it using a [converter](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):
 
 <Sandpack>
 
@@ -182,13 +182,13 @@ img { height: 90px; }
 
 <LearnMore path="/learn/writing-markup-with-jsx">
 
-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ệ.
 
 </LearnMore>
 
-## 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:
 
 <Sandpack>
 
@@ -230,13 +230,13 @@ body > div > div { padding: 20px; }
 
 <LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
 
-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.
 
 </LearnMore>
 
-## 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!
 
 <Sandpack>
 
@@ -311,15 +311,15 @@ export function getImageUrl(person, size = 's') {
 
 <LearnMore path="/learn/passing-props-to-a-component">
 
-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.
 
 </LearnMore>
 
-## 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:
 
 <Sandpack>
 
@@ -359,15 +359,15 @@ export default function PackingList() {
 
 <LearnMore path="/learn/conditional-rendering">
 
-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.
 
 </LearnMore>
 
-## 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 xác định từng item trong danh sách ngay cả khi danh sách thay đổi.
 
 <Sandpack>
 
@@ -459,18 +459,18 @@ h2 { font-size: 20px; }
 
 <LearnMore path="/learn/rendering-lists">
 
-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.
 
 </LearnMore>
 
-## 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 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ả.
 
-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 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:
 
 <Sandpack>
 
@@ -496,7 +496,7 @@ export default function TeaSet() {
 
 </Sandpack>
 
-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:
 
 <Sandpack>
 
@@ -520,43 +520,43 @@ export default function TeaSet() {
 
 <LearnMore path="/learn/keeping-components-pure">
 
-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, dễ dự đoán.
 
 </LearnMore>
 
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## UI của bạn theo cấu trúc cây {/*your-ui-as-a-tree*/}
 
-React uses trees to model the relationships between components and modules. 
+React sử dụng cây để biểu diễn 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 hiện của mối quan hệ cha và con giữa các component.
 
 <Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
 
-An example React render tree.
+Một ví dụ về React render tree.
 
 </Diagram>
 
-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 (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.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a 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.
 
-<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="Một đồ thị cây với năm node. Mỗi node đại diện cho một JavaScript module. Node cao nhất được gắn nhãn 'RootModule.js'. Nó có ba mũi tên kéo dài đến các node: 'ModuleA.js', 'ModuleB.js', và 'ModuleC.js'. Mỗi mũi tên được gắn nhãn 'imports'. Node 'ModuleC.js' có một mũi tên 'imports' duy nhất trỏ đến node được gắn nhãn 'ModuleD.js'.">
 
-An example module dependency tree.
+Một ví dụ về module dependency tree.
 
 </Diagram>
 
-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. 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.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-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 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.
 
 </LearnMore>
 
 
-## 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)?