feat(i18n): translate src/content/learn/describing-the-ui.md from English to Vietnamese #475
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…lish to Vietnamese
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
chriskhoa
requested changes
Jun 4, 2025
There was a problem hiding this comment.
Hi, thanks for your contribution — great work! I’ve suggested a few edits to help improve the readability, conciseness, and overall flow of the translation in context. Would you mind taking a look?
Aside from the translations for “represent” and “mental model,” which I think might be a bit off, feel free to use your judgment — you don’t have to follow every suggestion exactly. Thanks again, and I’ll check out your other PRs later this week!
|
|
||
| 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. |
There was a problem hiding this comment.
Suggested change
| 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. |
|
|
||
| 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: |
There was a problem hiding this comment.
Suggested change
| 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: |
|
|
||
| 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: |
There was a problem hiding this comment.
Suggested change
| 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; } | |||
|
|
|||
| </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 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): | |||
There was a problem hiding this comment.
Suggested change
| 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): |
|
|
||
| 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: |
There was a problem hiding this comment.
Suggested change
| 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: |
| @@ -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, có thể dự đoán được. | |||
There was a problem hiding this comment.
Suggested change
| Đọ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. |
|
|
||
| </LearnMore> | ||
|
|
||
| ## 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*/} |
There was a problem hiding this comment.
Suggested change
| ## 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*/} |
|
|
||
| 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. |
There was a problem hiding this comment.
Suggested change
| 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ự biểu hiện của mối quan hệ cha và con giữa các component. |
|
|
||
| </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 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. |
There was a problem hiding this comment.
Suggested change
| 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. |
|
|
||
| <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 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. |
There was a problem hiding this comment.
Suggested change
| Đọ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 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 tư duy hữu ích để cải thiện trải nghiệm người dùng và hiệu suất. |
…lish to Vietnamese
…lish to Vietnamese
|
Thank you @chriskhoa! I think your suggestion is better for readability. Here is a summary of the translation changes I made based on your feedback. Ngôn ngữ tự nhiên: "file quá nhiều component có thể khó sử dụng" Thuật ngữ nhất quán: "hiển thị" thay vì "hiện thị" Cải thiện khác: "một loạt bug khó hiểu" |
chriskhoa
approved these changes
Jun 5, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🇻🇳 Vietnamese Translation: Describing the UI
Hi! I'm contributing as a volunteer translator for vi.react.dev, and this PR adds the Vietnamese translation for the "Describing the UI" chapter overview.
What's included
Changes
Looking forward to contributing more translations to the project! 🚀
Tóm tắt những gì đã được dịch:
Tiêu đề và phần Intro:
"Describing the UI" → "Mô tả UI"
Các phần chính:
YouWillLearn section:
Các LearnMore links: