diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 94889d71b..44542180b 100644 --- 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 index 1f08c3ece..a6f563deb 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -7,16 +7,16 @@ - 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 @@ -24,9 +24,9 @@ - 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,11 +36,11 @@ - 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 @@ -48,25 +48,25 @@ - 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 index e361f7fa4..b707b3554 100644 --- 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( @@ -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( @@ -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 index edd2c3313..db2235a20 100644 --- a/content/footerNav.yml +++ b/content/footerNav.yml @@ -1,24 +1,24 @@ 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 @@ -26,7 +26,7 @@ channels: - 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 index 325a95c48..c9655cf2a 100644 --- 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 index e7c847ac2..d04517636 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -87,7 +87,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( {navFooter.community.title} - Code of Conduct + Quy tắc ứng xử {sectionListCommunity.map(section => ( ( {navFooter.more.title} - Privacy + Chính sách bảo mật - Terms + Điều khoản @@ -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.`}

diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index e297284c5..f55476669 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -133,7 +133,7 @@ const MarkdownPage = ({ - Edit this page + Sửa trang này )}