Merge pull request #199 from fozg/master

Translate Navigation & Profiler API
reactjs · Sep 16, 2021 · ada3dd8 · ada3dd8
2 parents e1f3047 + 774c825
commit ada3dd8
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 87 deletions.
diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
@@ -1,6 +1,6 @@
 ---
 id: add-react-to-a-website
-title: Add React to a Website
+title: Thêm React vào một Website
 permalink: docs/add-react-to-a-website.html
 redirect_from:
   - "docs/add-react-to-an-existing-app.html"

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
@@ -7,26 +7,26 @@
     - id: create-a-new-react-app
       title: Tạo một App React mới
     - id: cdn-links
-      title: CDN Links
+      title: Các liên kết CDN 
     - id: release-channels
-      title: Release Channels
+      title: Các kênh phát hành
 - title: Khái niệm chính
   isOrdered: true
   items:
     - id: hello-world
       title: Hello World
     - id: introducing-jsx
-      title: Introducing JSX
+      title: Giới thiệu JSX
     - id: rendering-elements
       title: Rendering Elements
     - id: components-and-props
       title: Components and Props
     - id: state-and-lifecycle
       title: State and Lifecycle
     - id: handling-events
-      title: Handling Events
+      title: Xử lý Events
     - id: conditional-rendering
-      title: Conditional Rendering
+      title: Rendering có điều kiện
     - id: lists-and-keys
       title: Lists and Keys
     - id: forms
@@ -36,37 +36,37 @@
     - id: composition-vs-inheritance
       title: Composition vs Inheritance
     - id: thinking-in-react
-      title: Thinking In React
+      title: Tư duy trong React
 - title: Hướng dẫn nâng cao
   items:
     - id: accessibility
-      title: Accessibility
+      title: Khả năng tiếp cận
     - id: code-splitting
       title: Code-Splitting
     - id: context
       title: Context
     - id: error-boundaries
       title: Error Boundaries
     - id: forwarding-refs
-      title: Forwarding Refs
+      title: Chuyển tiếp Refs
     - id: fragments
       title: Fragments
     - id: higher-order-components
       title: Higher-Order Components
     - id: integrating-with-other-libraries
-      title: Integrating with Other Libraries
+      title: Tích hợp với các thư viện khác
     - id: jsx-in-depth
       title: JSX In Depth
     - id: optimizing-performance
-      title: Optimizing Performance
+      title: Tối ưu hiệu năng
     - id: portals
       title: Portals
     - id: profiler
-      title: Profiler
+      title: Phân tích (Profiler)
     - id: react-without-es6
-      title: React Without ES6
+      title: React nhưng không sử dụng ES6
     - id: react-without-jsx
-      title: React Without JSX
+      title: React nhưng không sử dụng JSX
     - id: reconciliation
       title: Reconciliation
     - id: refs-and-the-dom
@@ -78,7 +78,7 @@
     - id: strict-mode
       title: Strict Mode
     - id: typechecking-with-proptypes
-      title: Typechecking With PropTypes
+      title: Kiểm tra kiểu với PropTypes
     - id: uncontrolled-components
       title: Uncontrolled Components
     - id: web-components
@@ -103,9 +103,9 @@
     - id: test-renderer
       title: Test Renderer
     - id: javascript-environment-requirements
-      title: JS Environment Requirements
+      title: Môi trường JS yêu cầu
     - id: glossary
-      title: Glossary
+      title: Bảng chú giải
 - title: Hooks
   isOrdered: true
   items:
@@ -124,26 +124,26 @@
       - id: hooks-reference
         title: Tham chiếu Hooks API
       - id: hooks-faq
-        title: Hooks FAQ
-- title: Testing
+        title: Hooks và các câu hỏi thường gặp
+- title: Kiểm thử
   items:
     - id: testing
-      title: Testing Overview
+      title: Tổng quan kiểm thử
     - id: testing-recipes
-      title: Testing Recipes
+      title: Phương thức kiểu thử
     - id: testing-environments
-      title: Testing Environments
-- title: Contributing
+      title: Môi trường kiểm thử
+- title: Đóng góp
   items:
     - id: how-to-contribute
-      title: How to Contribute
+      title: Làm sao để đóng góp
     - id: codebase-overview
-      title: Codebase Overview
+      title: Tổng quan về Codebase
     - id: implementation-notes
-      title: Implementation Notes
+      title: Ghi chú Triển khai
     - id: design-principles
-      title: Design Principles
-- title: FAQ
+      title: Nguyên tắc thiết kế
+- title: Cầu hỏi thường gặp
   items:
     - id: faq-ajax
       title: AJAX và APIs
@@ -156,8 +156,8 @@
     - id: faq-styling
       title: Styling và CSS
     - id: faq-structure
-      title: File Structure
+      title: Cấu trúc File
     - id: faq-versioning
-      title: Versioning Policy
+      title: Quy tắc đặt tên phiên bản
     - id: faq-internals
       title: Virtual DOM and Internals
diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md
@@ -1,27 +1,27 @@
 ---
 id: profiler
-title: Profiler API
+title: Profiler API (Công cụ Phân tích)
 layout: docs
 category: Reference
 permalink: docs/profiler.html
 ---
 
-The `Profiler` measures how often a React application renders and what the "cost" of rendering is.
-Its purpose is to help identify parts of an application that are slow and may benefit from [optimizations such as memoization](/docs/hooks-faq.html#how-to-memoize-calculations).
+Công cụ `Profiler` (tạm gọi là `Công cụ Phân tích`) đánh giá xem ứng dụng React thực hiện việc render và "chi phí" để thực hiện nó. 
+Mục đích của nó là để xác định xem phần nào của ứng dụng chạy chậm và có thể được hưởng lợi từ việc [tối ưu hóa như là ghi nhớ (memoization)](/docs/hooks-faq.html#how-to-memoize-calculations).
 
-> Note:
+> Ghi chú:
 >
-> Profiling adds some additional overhead, so **it is disabled in [the production build](/docs/optimizing-performance.html#use-the-production-build)**.
+> Việc Phân tích sẽ tốn thêm tài nguyên, vì vậy **nó sẽ bị vô hiệu hóa trên [môi trường Production](/docs/optimizing-performance.html#use-the-production-build)**.
 >
-> To opt into production profiling, React provides a special production build with profiling enabled.
-> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling)
+> Nếu bạn muốn sử dụng nó trên môi trường Production, React có thể cung cấp một bản build đặc biệt đã bật chức năng này cho môi trường Production.
+> Đọc thêm về cách sử dụng bản build đáy tại [fb.me/react-profiling](https://fb.me/react-profiling)
 
-## Usage {#usage}
+## Sử dụng {#usage}
 
-A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
-It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.
+`Công cụ Phân tích (Profiler)` có thể thêm vào bất kì đâu trong React tree để tính toán việc render ở nơi mà `Profiler` component được thêm vào.
+Nó cần 2 props: một là `id` (string) và một là `onRender` (hàm callback) để React có thể gọi bất kỳ lúc nào khi component ở bên trong cây (tree) có sự thay đổi.
 
-For example, to profile a `Navigation` component and its descendants:
+Ví dụ, để phân tích component `Navigation` và các component con (descendants) của nó:
 
 ```js{3}
 render(
@@ -34,7 +34,7 @@ render(
 );
 ```
 
-Multiple `Profiler` components can be used to measure different parts of an application:
+Có thể sử dụng nhiều `Profiler` component để đánh giá nhiều nơi khác nhau trong ứng dụng:
 ```js{3,6}
 render(
   <App>
@@ -48,7 +48,7 @@ render(
 );
 ```
 
-`Profiler` components can also be nested to measure different components within the same subtree:
+`Profiler` component có thể sử dụng lồng nhau để phân tích các component khác nhau trong cùng một subtree:
 ```js{3,5,8}
 render(
   <App>
@@ -66,54 +66,54 @@ render(
 );
 ```
 
-> Note
+> Ghi chú
 >
-> Although `Profiler` is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application.
+> Mặc dù `Profiler` là một component nhẹ, nhưng bạn chỉ nên sử dụng khi cần thiết; mỗi lần sử dụng sẽ tốn thêm tài nguyên CPU và bộ nhớ RAM cho ứng dụng của bạn
 
 ## `onRender` Callback {#onrender-callback}
 
-The `Profiler` requires an `onRender` function as a prop.
-React calls this function any time a component within the profiled tree "commits" an update.
-It receives parameters describing what was rendered and how long it took.
+`Profiler` cần một hàm `onRender` giống như prop.
+React sẽ gọi hàm này mỗi khi component được bọc bởi `Profiler` thực hiện một thay đổi.
+Nó nhận thông tin mô tả những gì đã render và thời gian thực hiện.
 
 ```js
 function onRenderCallback(
-  id, // the "id" prop of the Profiler tree that has just committed
-  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
-  actualDuration, // time spent rendering the committed update
-  baseDuration, // estimated time to render the entire subtree without memoization
-  startTime, // when React began rendering this update
-  commitTime, // when React committed this update
-  interactions // the Set of interactions belonging to this update
+  id, // "id" của Profiler tree vừa thực hiện thay đổi
+  phase, // một trong hai "mount" (nếu tree vừa được mounted) hoặc "update" (nếu nó re-rendered)
+  actualDuration, // thời gian để rendering cập nhật mới
+  baseDuration, //  thời gian ước tính để hiển thị toàn bộ subtree mà không cần ghi nhớ
+  startTime, // khi React bắt đầu hiển thị bản cập nhật này
+  commitTime, // khi React hoàn thành cập nhật
+  interactions // tập hợp các tương tác thuộc về bản cập nhật
 ) {
-  // Aggregate or log render timings...
+  // Tổng hợp hoặc log thời gian render...
 }
 ```
 
-Let's take a closer look at each of the props:
+Xem kỹ hơn từng prop:
 
 * **`id: string`** - 
-The `id` prop of the `Profiler` tree that has just committed.
-This can be used to identify which part of the tree was committed if you are using multiple profilers.
+"id" của Profiler tree vừa thực hiện thay đổi
+Nó có thể dùng để xem thành phần nào của tree đã thay đổi nếu bạn sử dụng nhiều công cụ Phân tích (profilers).
 * **`phase: "mount" | "update"`** -
-Identifies whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
+Xác định xem tree được mounted lần đầu tiên hay do re-rendered vì props, state hay hooks.
 * **`actualDuration: number`** -
-Time spent rendering the `Profiler` and its descendants for the current update.
-This indicates how well the subtree makes use of memoization (e.g. [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
-Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
+Thời gian bỏ ra để rendering `Profiler` và các components con của nó.
+Điều này cho biết bạn có nên sử dụng các công cụ memoization cho subtree hay không (ví dụ [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
+Lý tưởng nhất là giá trị này nên giảm đáng kể sau lần mount đầu tiên vì nhiều component con chỉ cần re-render nếu prop cụ thể nào đó của nó thay đổi.
 * **`baseDuration: number`** -
-Duration of the most recent `render` time for each individual component within the `Profiler` tree.
-This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization).
+Khoảng thời gian `render` gần nhất cho từng component bên trong `Công cụ Phân tích (Profiler)`.
+Giá trị này ước tính chi phí lãng phí cho trường hợp tệ nhất khi rendering (ví dụ: lần mount đầu tiên hoặc một tree không sử dụng memoization)
 * **`startTime: number`** -
-Timestamp when React began rendering the current update.
+Thời gian chính xác khi React bắt đầu rendering sự thay đổi.
 * **`commitTime: number`** -
-Timestamp when React committed the current update.
-This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
+Thời gian chính xác khi React hoàn thành rendering sự thay đổi.
+Giá trì này được chia sẻ giữa các Công cụ Phân tích trong một commit, cho phép chúng được nhóm lại nếu muốn.
 * **`interactions: Set`** -
-Set of ["interactions"](https://fb.me/react-interaction-tracing) that were being traced when the update was scheduled (e.g. when `render` or `setState` were called).
+Tập hợp các ["tương tác"](https://fb.me/react-interaction-tracing) đã được theo dõi khi cập nhật hoặc lên lịch (ví dụ: khi `render` hoặc `setState` được gọi).
 
-> Note
+> Ghi chú
 >
-> Interactions can be used to identify the cause of an update, although the API for tracing them is still experimental.
+> Các tương tác có thể được sử dụng để xác định nguồn của một cập nhật, mặc dù API để theo dõi chúng vẫn còn đang thử nghiệm.
 >
-> Learn more about it at [fb.me/react-interaction-tracing](https://fb.me/react-interaction-tracing)
+> Xem thêm tại [fb.me/react-interaction-tracing](https://fb.me/react-interaction-tracing)
diff --git a/content/footerNav.yml b/content/footerNav.yml
@@ -1,32 +1,32 @@
 community:
-  title: Community
+  title: Cộng đồng
 
 docs:
-  title: Docs
+  title: Tài liệu
 
 more:
-  title: More
+  title: Xem thêm
   items:
-    - title: Tutorial
+    - title: Hướng dẫn
       to: /tutorial/tutorial.html
     - title: Blog
       to: /blog
-    - title: Acknowledgements
+    - title: Lời cảm ơn
       to: /acknowledgements.html
     - title: React Native
       to: https://reactnative.dev/
       external: true
 
 channels:
-  title: Channels
+  title: Các kênh
   items:
     - title: GitHub
       to: https://github.com/facebook/react
       external: true
     - title: Stack Overflow
       to: https://stackoverflow.com/questions/tagged/reactjs
       external: true
-    - title: Discussion Forums
+    - title: Diễn đàn
       to: https://reactjs.org/community/support.html#popular-discussion-forums
       external: true
     - title: Reactiflux Chat

diff --git a/content/headerNav.yml b/content/headerNav.yml
@@ -1,13 +1,13 @@
 items:
-  - title: Docs
+  - title: Tài liệu
     to: /docs/getting-started.html
     activeSelector: /docs/
-  - title: Tutorial
+  - title: Hướng dẫn
     to: /tutorial/tutorial.html
     activeSelector: /tutorial
   - title: Blog
     to: /blog/
     activeSelector: /blog
-  - title: Community
+  - title: Cộng đồng
     to: /community/support.html
     activeSelector: /community
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
@@ -87,7 +87,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             <MetaTitle onDark={true}>{navFooter.community.title}</MetaTitle>
             <ExternalFooterLink
               href={`https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md`}>
-              Code of Conduct
+              Quy tắc ứng xử
             </ExternalFooterLink>
             {sectionListCommunity.map(section => (
               <FooterLink
@@ -101,10 +101,10 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             <MetaTitle onDark={true}>{navFooter.more.title}</MetaTitle>
             <SectionLinks links={navFooter.more.items} />
             <ExternalFooterLink href="https://opensource.facebook.com/legal/privacy">
-              Privacy
+              Chính sách bảo mật
             </ExternalFooterLink>
             <ExternalFooterLink href="https://opensource.facebook.com/legal/terms">
-              Terms
+              Điều khoản
             </ExternalFooterLink>
           </FooterNav>
         </div>
@@ -145,7 +145,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               color: colors.subtleOnDark,
               paddingTop: 15,
             }}>
-            {`Copyright © ${new Date().getFullYear()} Facebook Inc.`}
+            {`Bản quyền © ${new Date().getFullYear()} Facebook Inc.`}
           </p>
         </section>
       </div>

diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
@@ -133,7 +133,7 @@ const MarkdownPage = ({
                     <a
                       css={sharedStyles.articleLayout.editLink}
                       href={`https://github.com/reactjs/reactjs.org/tree/main/${markdownRemark.fields.path}`}>
-                      Edit this page
+                      Sửa trang này
                     </a>
                   </div>
                 )}