From c68595aa15fa032b23c824eb3ab25cf37798e8e1 Mon Sep 17 00:00:00 2001
From: soraly <lequangnam1617@gmail.com>
Date: Tue, 14 Sep 2021 21:51:21 +0700
Subject: [PATCH 01/32] feat/translate docs/testing.md

---
 content/docs/testing.md | 43 +++++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/content/docs/testing.md b/content/docs/testing.md
index b8e242d9f..147ff3683 100644
--- a/content/docs/testing.md
+++ b/content/docs/testing.md
@@ -7,34 +7,43 @@ redirect_from:
 next: testing-recipes.html
 ---
 
-You can test React components similar to testing other JavaScript code.
+Bạn có thể kiểm tra các React component tương tự như việc kiểm tra những code Javascript khác.
 
-There are a few ways to test React components. Broadly, they divide into two categories:
+Có một số cách để testing các React component. Nói chung, chúng được chia thành 2 thành phần:
 
-* **Rendering component trees** in a simplified test environment and asserting on their output.
-* **Running a complete app** in a realistic browser environment (also known as “end-to-end” tests).
+* **Rendering component trees** trong một môi trường test được đơn giản hóa và khẳng định trên kết quả đầu ra của chúng.
+* **Running a complete app** trong một môi trường trình duyệt thực tế (hay còn được gọi là “end-to-end” tests).
 
-This documentation section focuses on testing strategies for the first case. While full end-to-end tests can be very useful to prevent regressions to important workflows, such tests are not concerned with React components in particular, and are out of the scope of this section.
+Phần tài liệu này tập trung vào chiến lược testing cho trường hợp đầu tiên. Mặc dù các end-to-end tests đầy đủ có thể rất hữu ích để ngăn ngừa sự hồi quy
+đối với những luồng làm việc quan trọng, nhưng các tests đó không liên quan đến các React component nói chung, và nằm ngoài phạm vi của phần này.
 
-### Tradeoffs {#tradeoffs}
+### Những đánh đổi {#tradeoffs}
 
 
-When choosing testing tools, it is worth considering a few tradeoffs:
+Khi lựa chọn những công cụ kiểm tra, cần cân nhắc một số đánh đổi sau:
 
-* **Iteration speed vs Realistic environment:** Some tools offer a very quick feedback loop between making a change and seeing the result, but don't model the browser behavior precisely. Other tools might use a real browser environment, but reduce the iteration speed and are flakier on a continuous integration server.
-* **How much to mock:** With components, the distinction between a "unit" and "integration" test can be blurry. If you're testing a form, should its test also test the buttons inside of it? Or should a button component have its own test suite? Should refactoring a button ever break the form test?
+* **Tốc độ lặp lại so với với môi trường thực tế:** Một số công cụ cung cấp một vòng lặp phản hồi rất nhanh giữa việc thực hiện một thay đổi và xem xét kết quả,
+nhưng không mô hình hóa chính xác hành vi của trình duyệt. Các công cụ khác có thể sử dụng một môi trường trình duyệt thực tế, nhưng lại giảm tốc độ lặp lại và dễ
+bị phá vỡ hơn trên một máy chủ tích hợp liên tục.
+* **Mô phỏng bao nhiêu:** Với các components, sự khác biệt giữa một "đơn vị" test và "tập hợp" test có thể bị lu mờ. Nếu bạn đang thử nghiệm trên một 
+form, liệu việc kiểm tra nó có nên kiểm tra luôn các button bên trong nó hay không? Hoặc một button component có nên có cho nó một bộ test riêng hay không? Liệu việc 
+tái cấu trúc một button có làm phá vỡ form test?
 
-Different answers may work for different teams and products.
+Những câu trả lời khác nhau có thể phù hợp cho những team và những sản phẩm khác nhau.
 
-### Recommended Tools {#tools}
+### Những công cụ được đề xuất {#tools}
 
-**[Jest](https://facebook.github.io/jest/)** is a JavaScript test runner that lets you access the DOM via [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking [modules](/docs/testing-environments.html#mocking-modules) and [timers](/docs/testing-environments.html#mocking-timers) so you can have more control over how the code executes.
+**[Jest](https://facebook.github.io/jest/)** là một trình chạy thử nghiệm cho phép bạn truy cập vào DOM thông qua [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). Trong đó jsdom chỉ là một ước tính về cách mà trình duyệt hoạt động, nó thường đủ tốt để kiểm tra React components. Jest cung cấp
+một tốc độ lặp lại tuyệt vời kết hợp với các tính năng mạnh mẽ như [modules](/docs/testing-environments.html#mocking-modules) mô phỏng (mocking) và một [timers](/docs/testing-environments.html#mocking-timers) cho phép bạn có thể kiểm soát nhiều hơn cách mà một mã code được thực thi. 
 
-**[React Testing Library](https://testing-library.com/react)** is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn't provide a way to "shallowly" render a component without its children, a test runner like Jest lets you do this by [mocking](/docs/testing-recipes.html#mocking-modules).
+**[React Testing Library](https://testing-library.com/react)** là tập hợp các trình trợ giúp cho phép bạn test React components mà không cần dựa vào các chi tiết triển 
+khai của họ. Cách tiếp cận này giúp cho việc tái cấu trúc trở nên một cách dễ dàng và cũng thúc đẩy bạn hướng tới các phương pháp tiếp cận hay nhất về khả năng
+truy cập. Mặc dù nó không cung câp một cách "shallowly" (nông cạn - đối lập với deep) đối với render một component mà không có thành phần con của nó, một test thử nghiệm
+như Jest cho phép bạn làm điều này thông qua [mocking](/docs/testing-recipes.html#mocking-modules)(mô phỏng).
 
-### Learn More {#learn-more}
+### Tìm hiểu thêm {#learn-more}
 
-This section is divided in two pages:
+Phần này được chia làm hai trang:
 
-- [Recipes](/docs/testing-recipes.html): Common patterns when writing tests for React components.
-- [Environments](/docs/testing-environments.html): What to consider when setting up a testing environment for React components.
+- [Recipes](/docs/testing-recipes.html): Các patterns thường gặp khi viết các tests cho React components.
+- [Environments](/docs/testing-environments.html): Những điều cần cân nhắc khi thiết lập môi trường testing cho React components.

From eb19b6e003beddc0d7442987b02ea341666aba7e Mon Sep 17 00:00:00 2001
From: tranminhwang <quangtmps12135@fpt.edu.vn>
Date: Tue, 14 Sep 2021 21:32:13 +0700
Subject: [PATCH 02/32] rename reactjs.org to vi.reactjs.org

---
 README.md                                        | 12 ++++++------
 content/blog/2021-06-08-the-plan-for-react-18.md | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 0215878dc..f2eb9f887 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# reactjs.org
+# vi.reactjs.org
 
-This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/).
+This repo contains the source code and documentation powering [vi.reactjs.org](https://reactjs.org/).
 
 ## Getting started
 
@@ -10,11 +10,11 @@ This repo contains the source code and documentation powering [reactjs.org](http
 1. Node: any 12.x version starting with v12.0.0 or greater
 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
 1. A fork of the repo (for any contributions)
-1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
+1. A clone of the [vi.reactjs.org repo](https://github.com/reactjs/vi.reactjs.org) on your local machine
 
 ### Installation
 
-1. `cd reactjs.org` to go into the project root
+1. `cd vi.reactjs.org` to go into the project root
 1. `yarn` to install the website's npm dependencies
 
 ### Running locally
@@ -30,7 +30,7 @@ The documentation is divided into several sections with a different tone and pur
 
 ### Create a branch
 
-1. `git checkout main` from any folder in your local `reactjs.org` repository
+1. `git checkout main` from any folder in your local `vi.reactjs.org` repository
 1. `git pull origin main` to ensure you have the latest main code
 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
 
@@ -51,7 +51,7 @@ The documentation is divided into several sections with a different tone and pur
 
 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes
 1. `git push my-fork-name the-name-of-my-branch`
-1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
+1. Go to the [vi.reactjs.org repo](https://github.com/reactjs/vi.reactjs.org) and you should see recently pushed branches.
 1. Follow GitHub's instructions.
 1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.
 
diff --git a/content/blog/2021-06-08-the-plan-for-react-18.md b/content/blog/2021-06-08-the-plan-for-react-18.md
index 00eff4743..764ff9524 100644
--- a/content/blog/2021-06-08-the-plan-for-react-18.md
+++ b/content/blog/2021-06-08-the-plan-for-react-18.md
@@ -11,7 +11,7 @@ The React team is excited to share a few updates:
 
 These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious!
 
-## What’s coming in React 18
+## What’s coming in React 18 {#whats-coming-in-react-18}
 
 When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`.
 
@@ -19,13 +19,13 @@ These features are possible thanks to a new opt-in mechanism we’re adding in R
 
 If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.**
 
-## A gradual adoption strategy
+## A gradual adoption strategy {#a-gradual-adoption-strategy}
 
 Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon.
 
 We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group.
 
-## Working with the community
+## Working with the community {#working-with-the-community}
 
 We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future!
 
@@ -33,7 +33,7 @@ We’re trying something new for this release: We've invited a panel of experts,
 
 For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4).
 
-## Accessing the React 18 Working Group
+## Accessing the React 18 Working Group {#accessing-the-react-18-working-group}
 
 Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18).
 
@@ -41,13 +41,13 @@ Because we expect an initial surge of interest in the Working Group, only invite
 
 As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues).
 
-## How to try React 18 Alpha today
+## How to try React 18 Alpha today {#how-to-try-react-18-alpha-today}
 
 New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday.
 
 There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**.
 
-## Projected React 18 release timeline
+## Projected React 18 release timeline {#projected-react-18-release-timeline}
 
 We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.
 

From b495de9e4a3fcd7d7651cd78ad2aabda284c111d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=C3=AAn=20Ary?= <nguyenary14@gmail.com>
Date: Tue, 14 Sep 2021 22:36:48 +0700
Subject: [PATCH 03/32] Translate CDN Links page and Create a New React App
 page

---
 .gitignore                                  |  1 +
 content/docs/cdn-links.md                   | 14 ++--
 content/docs/create-a-new-react-app.md      | 84 ++++++++++-----------
 content/docs/nav.yml                        |  4 +-
 src/components/FeedbackForm/FeedbackForm.js |  2 +-
 5 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/.gitignore b/.gitignore
index d1bde99ce..19f7230bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .cache
 .DS_STORE
 .idea
+.history
 node_modules
 public
 yarn-error.log
\ No newline at end of file
diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md
index e357811de..61716456e 100644
--- a/content/docs/cdn-links.md
+++ b/content/docs/cdn-links.md
@@ -6,32 +6,32 @@ prev: create-a-new-react-app.html
 next: release-channels.html
 ---
 
-Both React and ReactDOM are available over a CDN.
+Cả React và ReactDOM đều có sẵn trên CDN.
 
 ```html
 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
 ```
 
-The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
+Các phiên bản trên chỉ dành cho develop và không phù hợp cho production. Các phiên bản production thu nhỏ và tối ưu hóa của React có sẵn tại:
 
 ```html
 <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 ```
 
-To load a specific version of `react` and `react-dom`, replace `17` with the version number.
+Để tải một phiên bản cụ thể của `react` và `react-dom`, thay thế `17` với số phiên bản.
 
-### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute}
+### Tại sao lại có Thuộc Tính `crossorigin`? {#why-the-crossorigin-attribute}
 
-If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
+Nếu bạn phân phối React từ CDN, chúng tôi khuyên bạn nên giữ bộ thuộc tính [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes):
 
 ```html
 <script crossorigin src="..."></script>
 ```
 
-We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
+Chúng tôi cũng khuyên bạn nên xác minh rằng CDN bạn đang sử dụng đặt `Access-Control-Allow-Origin: *` HTTP header:
 
 ![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png)
 
-This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
+Điều này cho phép trải nghiệm [xử lý lỗi tốt hơn](/blog/2017/07/26/error-handling-in-react-16.html) trong React 16 trở lên.
diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md
index 12afba206..6a1486d64 100644
--- a/content/docs/create-a-new-react-app.md
+++ b/content/docs/create-a-new-react-app.md
@@ -1,6 +1,6 @@
 ---
 id: create-a-new-react-app
-title: Create a New React App
+title: Tạo một App React mới
 permalink: docs/create-a-new-react-app.html
 redirect_from:
   - "docs/add-react-to-a-new-app.html"
@@ -8,38 +8,38 @@ prev: add-react-to-a-website.html
 next: cdn-links.html
 ---
 
-Use an integrated toolchain for the best user and developer experience.
+Sử dụng chuỗi công cụ tích hợp để có trải nghiệm tốt nhất cho người dùng và nhà phát triển.
 
-This page describes a few popular React toolchains which help with tasks like:
+Trang này mô tả một số công cụ React phổ biến giúp thực hiện các tác vụ như:
 
-* Scaling to many files and components.
-* Using third-party libraries from npm.
-* Detecting common mistakes early.
-* Live-editing CSS and JS in development.
-* Optimizing the output for production.
+* Mở rộng quy mô cho nhiều file và component.
+* Sử dụng thư viện của bên thứ ba từ npm.
+* Phát hiện sớm các lỗi thường gặp.
+* Chỉnh sửa trực tiếp CSS và JS đang được phát triển.
+* Tối ưu hóa đầu ra cho production.
 
-The toolchains recommended on this page **don't require configuration to get started**.
+Các công cụ được đề xuất trên trang này **không yêu cầu cấu hình để bắt đầu**.
 
-## You Might Not Need a Toolchain {#you-might-not-need-a-toolchain}
+## Bạn Có Thể Không Cần một Chuỗi Công Cụ {#you-might-not-need-a-toolchain}
 
-If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
+Nếu bạn không gặp phải các vấn đề được mô tả ở trên hoặc chưa cảm thấy thoải mái khi sử dụng các công cụ JavaScript, xem xét [thêm React dưới dạng thẻ `<script>` thuần túy trên trang HTML](/docs/add-react-to-a-website.html), tùy chỉnh [với JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
 
-This is also **the easiest way to integrate React into an existing website.** You can always add a larger toolchain if you find it helpful!
+Đây cũng là **cách dễ nhất để tích hợp React vào một trang web hiện có.** Bạn luôn có thể thêm một công cụ lớn hơn nếu bạn thấy nó hữu ích!
 
-## Recommended Toolchains {#recommended-toolchains}
+## Đề xuất Công Cụ {#recommended-toolchains}
 
-The React team primarily recommends these solutions:
+Nhóm React chủ yếu đề xuất các giải pháp sau:
 
-- If you're **learning React** or **creating a new [single-page](/docs/glossary.html#single-page-application) app,** use [Create React App](#create-react-app).
-- If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs).
-- If you're building a **static content-oriented website,** try [Gatsby](#gatsby).
-- If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains).
+- Nếu bạn **đang học React** hoặc **tạo một app [single-page](/docs/glossary.html#single-page-application) mới,** sử dụng [Tạo App React](#create-react-app).
+- Nếu bạn đang xây dựng một **website kết xuất máy chủ (server-rendered) với Node.js,** hãy thử [Next.js](#nextjs).
+- Nếu bạn đang xây dựng một **website tĩnh định hướng nội dung (content-oriented),** hãy thử [Gatsby](#gatsby).
+- Nếu bạn đang xây dựng một **thư viện component** hoặc **tích hợp với codebase hiện có**, hãy thử [Nhiều Công Cụ Linh Hoạt Hơn](#more-flexible-toolchains).
 
-### Create React App {#create-react-app}
+### Tạo App React {#create-react-app}
 
-[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
+[Tạo App React](https://github.com/facebookincubator/create-react-app) là một môi trường thoải mái để **học React**, và là cách tốt nhất để bắt đầu xây dựng **một ứng dụng [single-page](/docs/glossary.html#single-page-application) mới** trong React.
 
-It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have [Node >= 10.16 and npm >= 5.6](https://nodejs.org/en/) on your machine. To create a project, run:
+Nó thiết lập môi trường phát triển của bạn để bạn có thể sử dụng các tính năng JavaScript mới nhất, cung cấp trải nghiệm tốt cho nhà phát triển và tối ưu hóa ứng dụng của bạn cho sản xuất. Bạn sẽ cần phải có [Node >= 10.16 và npm >= 5.6](https://nodejs.org/en/) trên máy của bạn. Để tạo một dự án, hãy chạy:
 
 ```bash
 npx create-react-app my-app
@@ -47,48 +47,48 @@ cd my-app
 npm start
 ```
 
->Note
+>Ghi chú
 >
->`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
+>`npx` trên dòng đầu tiên không phải là lỗi đánh máy -- Nó là một [công cụ chạy package đi kèm với npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
 
-Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
+Tạo App React không xử lý logic backend hoặc databases; Nó chỉ tạo một đường dẫn để xây dựng frontend, vì vậy bạn có thể sử dụng nó với bất kì backend nào bạn muốn. Ẩn sâu, nó sử dụng [Babel](https://babeljs.io/) và [webpack](https://webpack.js.org/), những bạn không cần biết bất cứ điều gì về chúng.
 
-When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app--) and the [User Guide](https://facebook.github.io/create-react-app/).
+Khi bạn đã sẵn sàng triển khai sang phiên bản production, hãy chạy `npm run build` sẽ tạo ra một bản dựng ứng dụng của bạn được tối ưu hóa trong thư mục `build`. Bạn có thể tìm hiểu thêm về Tạo App React [README của nó](https://github.com/facebookincubator/create-react-app#create-react-app--) và [Hướng Dẫn Sử Dụng](https://facebook.github.io/create-react-app/).
 
 ### Next.js {#nextjs}
 
-[Next.js](https://nextjs.org/) is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing solutions** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment.
+[Next.js](https://nextjs.org/) là một framework phổ biến và nhẹ cho **ứng dụng static và server‑rendered** được xây dựng bằng React. Nó bao gồm **giarp pháp tạo kiểu và định tuyến** ra khỏi hộp và giả định rằng bạn đang sử dụng [Node.js](https://nodejs.org/) làm môi trường máy chủ.
 
-Learn Next.js from [its official guide](https://nextjs.org/learn/).
+Tìm hiểu Next.js từ [hướng dẫn chính thức của nó](https://nextjs.org/learn/).
 
 ### Gatsby {#gatsby}
 
-[Gatsby](https://www.gatsbyjs.org/) is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
+[Gatsby](https://www.gatsbyjs.org/) là cách tốt nhất để tạo **các website tĩnh** với React. Nó cho phép bạn sử dụng các component của React, nhưng xuất ra HTML và CSS được render trước để đảm bảo thời gian tải nhanh nhất.
 
-Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
+Tìm hiểu Gatsby [từ hướng dẫn chính thức của nó](https://www.gatsbyjs.org/docs/) và một [bộ sưu tập các công cụ dành cho người mới bắt đầu](https://www.gatsbyjs.org/docs/gatsby-starters/).
 
-### More Flexible Toolchains {#more-flexible-toolchains}
+### Thêm Nhiều Các Công Cụ Linh Hoạt {#more-flexible-toolchains}
 
-The following toolchains offer more flexibility and choice. We recommend them to more experienced users:
+Các công cụ sau cung cấp nhiều sự lựa chọn và linh hoạt hơn. Chúng tôi giới thiệu chúng cho những người dùng có kinh nghiệm hơn:
 
-- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).
+- **[Neutrino](https://neutrinojs.org/)** kết sức mạnh của [webpack](https://webpack.js.org/) với sự đơn giản của các cài đặt trước và bao gồm cài đặt trước cho [các ứng dụng React](https://neutrinojs.org/packages/react/) và [các component React](https://neutrinojs.org/packages/react-components/).
 
-- **[Nx](https://nx.dev/react)** is a toolkit for full-stack monorepo development, with built-in support for React, Next.js, [Express](https://expressjs.com/), and more.
+- **[Nx](https://nx.dev/react)** là một bộ công cụ để phát triển full-stack monorepo, với hỗ trợ tích hợp cho React, Next.js, [Express](https://expressjs.com/), và nhiều hơn nữa.
 
-- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
+- **[Parcel](https://parceljs.org/)** là một gói ứng dụng web nhanh, không cấu hình [hoạt động với React](https://parceljs.org/recipes.html#react).
 
-- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
+- **[Razzle](https://github.com/jaredpalmer/razzle)** là một framework kết xuất máy chủ không yêu cầu bất kỳ cấu hình nào, nhưng cung cấp tính linh hoạt hơn Next.js.
 
-## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch}
+## Tạo một Chuỗi Công Cụ từ Scratch {#creating-a-toolchain-from-scratch}
 
-A JavaScript build toolchain typically consists of:
+Chuỗi công cụ xây dựng JavaScript thường bao gồm:
 
-* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
+* Một **trình quản lý package**, chẳng hạn như [Yarn](https://yarnpkg.com/) hoặc [npm](https://www.npmjs.com/). Nó cho phép bạn tận dụng hệ sinh thái rộng lớn của các package bên thứ ba và dễ dàng cài đặt hoặc cập nhật chúng.
 
-* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
+* Một **bundler**, chẳng hạn như [webpack](https://webpack.js.org/) hoặc [Parcel](https://parceljs.org/). Nó cho phép bạn viết code mô-đun và gói nó lại với nhau thành các gói nhỏ để tối ưu hóa thời gian tải.
 
-* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
+* Một **compiler** chẳng hạn như [Babel](https://babeljs.io/). Nó cho phép bạn viết mã JavaScript hiện đại vẫn hoạt động trong các trình duyệt cũ hơn.
 
-If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
+Nếu bạn muốn thiết lập chuỗi công cụ JavaScript của riêng mình từ đầu, [Kiểm tra hướng dẫn này](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) để tạo lại một số chức năng Tạo App React.
 
-Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).
+Đừng quên đảm bảo chuỗi công cụ tùy chỉnh của bạn [được thiết lập chính xác cho production](/docs/optimizing-performance.html#use-the-production-build).
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 830b7a40b..1f08c3ece 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -3,9 +3,9 @@
     - id: getting-started
       title: Bắt Đầu
     - id: add-react-to-a-website
-      title: Add React to a Website
+      title: Thêm React vào một Website
     - id: create-a-new-react-app
-      title: Create a New React App
+      title: Tạo một App React mới
     - id: cdn-links
       title: CDN Links
     - id: release-channels
diff --git a/src/components/FeedbackForm/FeedbackForm.js b/src/components/FeedbackForm/FeedbackForm.js
index d38fab5a2..c6773bda6 100644
--- a/src/components/FeedbackForm/FeedbackForm.js
+++ b/src/components/FeedbackForm/FeedbackForm.js
@@ -18,7 +18,7 @@ const FeedbackForm = () => {
   } else {
     return (
       <span>
-        Is this page useful?
+        Trang này có hữu ích không?
         <button
           css={[sharedStyles.articleLayout.feedbackButton, {marginLeft: '6px'}]}
           aria-label="Yes"

From 13a01665ed10479440029ada819ad975ab7ea510 Mon Sep 17 00:00:00 2001
From: HuyNT <huynt.me@gmail.com>
Date: Wed, 15 Sep 2021 00:27:24 +0700
Subject: [PATCH 04/32] translate-english-to-vietnamese

---
 content/blog/2013-06-05-why-react.md | 129 +++++++++++----------------
 1 file changed, 52 insertions(+), 77 deletions(-)

diff --git a/content/blog/2013-06-05-why-react.md b/content/blog/2013-06-05-why-react.md
index 6c23552a1..e370718a4 100644
--- a/content/blog/2013-06-05-why-react.md
+++ b/content/blog/2013-06-05-why-react.md
@@ -1,88 +1,63 @@
 ---
-title: Why did we build React?
-author: [petehunt]
+Tiêu đề: Tại sao chúng tôi xây dựng React?
+Tác giả: [petehunt]
 ---
 
-There are a lot of JavaScript MVC frameworks out there. Why did we build React
-and why would you want to use it?
+Có rất nhiều thư viện JavaScript MVC. Tại sao chúng tôi xây dựng React và tại sao bạn muốn sử dụng nó?
 
-## React isn't an MVC framework. {#react-isnt-an-mvc-framework}
+## React không phải là một MVC framework. {#react-isnt-an-mvc-framework}
 
-React is a library for building composable user interfaces. It encourages
-the creation of reusable UI components which present data that changes over
-time.
+React là một thư viện để xây dựng giao diện người dùng. Nó khuyến khích việc tạo ra các thành phần giao diện người dùng có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời gian.
 
 ## React doesn't use templates. {#react-doesnt-use-templates}
 
-Traditionally, web application UIs are built using templates or HTML directives.
-These templates dictate the full set of abstractions that you are allowed to use
-to build your UI.
-
-React approaches building user interfaces differently by breaking them into
-**components**. This means React uses a real, full featured programming language
-to render views, which we see as an advantage over templates for a few reasons:
-
-- **JavaScript is a flexible, powerful programming language** with the ability
-  to build abstractions. This is incredibly important in large applications.
-- By unifying your markup with its corresponding view logic, React can actually
-  make views **easier to extend and maintain**.
-- By baking an understanding of markup and content into JavaScript, there's
-  **no manual string concatenation** and therefore less surface area for XSS
-  vulnerabilities.
-
-We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax
-extension, in case you prefer the readability of HTML to raw JavaScript.
-
-## Reactive updates are dead simple. {#reactive-updates-are-dead-simple}
-
-React really shines when your data changes over time.
-
-In a traditional JavaScript application, you need to look at what data changed
-and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
-which provides a declarative interface via directives and data binding [requires
-a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
-
-React takes a different approach.
-
-When your component is first initialized, the `render` method is called,
-generating a lightweight representation of your view. From that representation,
-a string of markup is produced, and injected into the document. When your data
-changes, the `render` method is called again. In order to perform updates as
-efficiently as possible, we diff the return value from the previous call to
-`render` with the new one, and generate a minimal set of changes to be applied
-to the DOM.
-
-> The data returned from `render` is neither a string nor a DOM node -- it's a
-> lightweight description of what the DOM should look like.
-
-We call this process **reconciliation**. Check out
-[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of
-reconciliation in action.
-
-Because this re-render is so fast (around 1ms for TodoMVC), the developer
-doesn't need to explicitly specify data bindings. We've found this approach
-makes it easier to build apps.
-
-## HTML is just the beginning. {#html-is-just-the-beginning}
-
-Because React has its own lightweight representation of the document, we can do
-some pretty cool things with it:
-
-- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
-- Instagram is a "single page" web app built entirely with React and
-  `Backbone.Router`. Designers regularly contribute React code with JSX.
-- We've built internal prototypes that run React apps in a web worker and use
-  React to drive **native iOS views** via an Objective-C bridge.
-- You can run React
-  [on the server](https://github.com/petehunt/react-server-rendering-example)
-  for SEO, performance, code sharing and overall flexibility.
-- Events behave in a consistent, standards-compliant way in all browsers
-  (including IE8) and automatically use
+Theo truyền thống, giao diện người dùng ứng dụng web được xây dựng bằng cách sử dụng các templates hoặc HTML.
+Các templates này quy định tập hợp đầy đủ các phần tóm tắt mà bạn được phép sử dụng để xây dựng giao diện người dùng của mình.
+
+React tiếp cận việc xây dựng các giao diện người dùng theo cách chia nhỏ chúng thành các
+**components**. Điều này có nghĩa là React sử dụng một ngôn ngữ lập trình, đầy đủ tính năng để hiển thị các chế độ xem, mà chúng tôi coi là một lợi thế hơn so với các templates vì một số lý do:
+
+- **JavaScript là một ngôn ngữ lập trình linh hoạt, mạnh mẽ** với khả năng xây dựng sự trừu tượng. Điều này cực kỳ quan trọng trong các ứng dụng lớn.
+- Bằng cách thống nhất đánh dấu của bạn với logic chế độ xem tương ứng của nó, React thực sự có thể tạo các chế độ xem **dễ dàng mở rộng và bảo trì hơn**.
+- Bằng cách đưa hiểu biết về markup và content vào JavaScript,
+  **không có quá trình nối chuỗi thủ công** và do đó ít diện tích bề mặt hơn cho các lỗ hổng XSS.
+
+Chúng tôi cũng đã tạo [JSX](/docs/jsx-in-depth.html), một phần mở rộng cú pháp tùy chọn, trong trường hợp bạn thích khả năng đọc của HTML hơn JavaScript thô.
+
+## Cập nhật phản ứng rất đơn giản {#reactive-updates-are-dead-simple}
+
+React thực sự nổi bật khi dữ liệu của bạn thay đổi theo thời gian.
+
+Trong một ứng dụng JavaScript truyền thống, bạn cần xem dữ liệu nào đã thay đổi và thực hiện các thay đổi theo thứ bậc đối với DOM để luôn cập nhật. Ngay cả AngularJS, cung cấp giao diện khai báo thông qua các chỉ thị và liên kết dữ liệu [yêu cầu một chức năng liên kết để cập nhật các nút DOM theo cách thủ công.](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
+
+React có một cách tiếp cận khác.
+
+Khi component của bạn được khởi tạo lần đầu tiên, phương thức `render` được gọi,
+nó tạo ra 1 phiên bản UI rất nhỏ. Từ phiên bản này, nó sẽ tạo thành 1 chuỗi html(markup) và cập nhật(replace?) document hiện tại. Mỗi khi dữ liệu(prop, …) của app thay đổi, phương thức `render` lại được gọi lại. Để quá trình re-render và update lại dom hiệu quả nhất, chúng tôi check sự thay đổi giữa lần thay đổi trước và sau `render`, và chỉ lấy ra đoạn code đã thay đổi và cập nhật lại DOM (không cập nhật lại toàn bộ)
+
+
+> Dữ liệu sinh ra sau quá trình `render` không hẳn là 1 chuỗi hay là 1 DOM node cụ thể, nó là 1 dạng tập hợp các mô tả về DOM.
+
+Chúng tôi gọi quá trình này là **reconciliation**. Tham khảo
+[this jsFiddle](http://jsfiddle.net/2h6th4ju/) này để xem ví dụ về
+reconciliation trong thực tế.
+
+Vì quá trình kết xuất này quá nhanh (khoảng 1ms đối với TodoMVC), nhà phát triển không cần chỉ định rõ ràng các ràng buộc dữ liệu. Chúng tôi nhận thấy cách tiếp cận này giúp tạo ứng dụng dễ dàng hơn.
+
+## HTML chỉ là sự khởi đầu {#html-is-just-the-beginning}
+
+Bởi vì React có bản trình bày tài liệu gọn nhẹ của riêng nó, chúng ta có thể thực hiện một số điều khá thú vị với nó:
+
+- Facebook có các biểu đồ động hiển thị dưới dạng `<canvas>` thay vì HTML.
+- Instagram là một ứng dụng web "một trang" được xây dựng hoàn toàn bằng React và `Backbone.Router`. Các nhà      thiết kế thường xuyên đóng góp mã React với JSX.
+- Chúng tôi đã xây dựng internal prototypes để chạy các ứng dụng React trong web worker và sử dụng React để thúc đẩy **native iOS views** qua một Objective-C
+- Bạn có thể chạy React
+  [trên máy chủ](https://github.com/petehunt/react-server-rendering-example)
+  để SEO, hiệu suất, chia sẻ mã và tính linh hoạt tổng thể.
+- Các sự kiện hoạt động theo cách nhất quán, tuân thủ tiêu chuẩn trong tất cả các trình duyệt (bao gồm cả IE8) và tự động sử dụng
   [event delegation](http://davidwalsh.name/event-delegate).
 
-Head on over to [https://reactjs.org](https://reactjs.org) to check out what we have
-built. Our documentation is geared towards building apps with the framework,
-but if you are interested in the nuts and bolts
-[get in touch](/support.html) with us!
+Truy cập [https://reactjs.org](https://reactjs.org) để kiểm tra những gì chúng tôi đã xây dựng. Tài liệu của chúng tôi hướng tới việc xây dựng ứng dụng với framework, nhưng nếu bạn quan tâm đến những chi tiết cần thiết
+[liên hệ](/support.html) với chúng tôi!
 
-Thanks for reading!
+Cảm ơn vì đã đọc!

From 083c199fe4488f6e86aacf54f0b82e46588ffff0 Mon Sep 17 00:00:00 2001
From: ThaoLe366 <thaole301000@gmail.com>
Date: Wed, 15 Sep 2021 00:31:27 +0700
Subject: [PATCH 05/32] Translate uncontrolled component

---
 content/docs/uncontrolled-components.md | 26 ++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index e66804622..5cdce19f7 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -4,11 +4,11 @@ title: Uncontrolled Components
 permalink: docs/uncontrolled-components.html
 ---
 
-In most cases, we recommend using [controlled components](/docs/forms.html#controlled-components) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
+Trong hầu hết các trường hợp, chúng tôi khuyên bạn nên sử dụng [controlled components](/docs/forms.html#controlled-components) để triển khai forms. Trong controlled component, dữ liệu trong form sẽ được quản lí hoàn toàn bởi React component. Trái ngược với điều đó, uncontrolled component, dữ liệu sẽ được quản lí trực tiếp bởi chính DOM.
 
-To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM.
+Để tạo uncontrolled component, thay vì việc xử lí sự kiện mỗi khi state được update, bạn có thể [sử dụng ref](/docs/refs-and-the-dom.html) để lấy dữ liệu từ DOM.
 
-For example, this code accepts a single name in an uncontrolled component:
+Ví dụ, đoạn code bên dưới nhận vào "name" trong một uncontrolled component:
 
 ```javascript{5,9,18}
 class NameForm extends React.Component {
@@ -37,15 +37,15 @@ class NameForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
+[**Xem ví dụ trên CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
 
-Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
+Vì uncontrolled component chỉ dựa trên DOM, điều này khiến việc tương tác với code React và non-React khá dễ dàng. Nếu bạn muốn code nhanh và bẩn, uncontrolled component có thể giúp bạn code ít code hơn. Nếu không, bạn nên sử dụng controlled components.
 
-If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
+Nếu những giải thích trên vẫn chưa rõ về loại component sử dụng cho các trường hợp cụ thể, bạn có thể tìm thêm ở [bài viết về controlled và uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/)..
 
-### Default Values {#default-values}
+### Giá trị mặc định {#default-values}
 
-In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`. Changing the value of `defaultValue` attribute after a component has mounted will not cause any update of the value in the DOM.
+Trong vòng đời render component React, thuộc tính `value` của các thành phần trong form sẽ override các giá trị trong DOM. Với uncontrolled component, bạn thường cần sử dụng React để chỉ định giá trị mặc định, nhưng bạn không thể kiểm soát được các bản thay đổi ở phía sau. Để xử lí trong trường hợp này, bạn phải chỉ định giá trị của `defaultValue` thay vì `value`. Việc thay đổi giá trị của `defaultValue` sau khi component được mounted sẽ không làm cập nhật giá trị trên cây DOM.
 
 ```javascript{7}
 render() {
@@ -64,19 +64,19 @@ render() {
 }
 ```
 
-Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
+Tương tự như vậy, `<input type="checkbox">` và `<input type="radio">` có hỗ trợ `defaultChecked`, `<select>` và `<textarea>` hỗ trợ `defaultValue`.
 
-## The file input Tag {#the-file-input-tag}
+## Thẻ input type file  {#the-file-input-tag}
 
-In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+Trong HTML, thẻ`<input type="file">` cho phép người dùng chọn một hoặc nhiều files từ bộ nhớ thiết bị của họ và gửi đến server hoặc xử lí bằng javascript thông qua [File API] (https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
+Trong React, thẻ `<input type="file" />` luôn luôn là uncontrolled component vì giá trị của nó chỉ được gán bởi người dùng, không phải chương trình. 
 
-You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
+Bạn nên sử dụng File API để tương tác với những files này. Ví dụ bên dưới mô tả cách tạo một [ref trong DOM node](/docs/refs-and-the-dom.html) để truy xuất các files khi submit:
 
 `embed:uncontrolled-components/input-type-file.js`
 

From 50963267e4a842add85d471116ff89232a2aaae5 Mon Sep 17 00:00:00 2001
From: ThaoLe366 <thaole301000@gmail.com>
Date: Wed, 15 Sep 2021 00:38:50 +0700
Subject: [PATCH 06/32] add more meaning

---
 content/docs/uncontrolled-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index 5cdce19f7..1a716b199 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -45,7 +45,7 @@ Nếu những giải thích trên vẫn chưa rõ về loại component sử d
 
 ### Giá trị mặc định {#default-values}
 
-Trong vòng đời render component React, thuộc tính `value` của các thành phần trong form sẽ override các giá trị trong DOM. Với uncontrolled component, bạn thường cần sử dụng React để chỉ định giá trị mặc định, nhưng bạn không thể kiểm soát được các bản thay đổi ở phía sau. Để xử lí trong trường hợp này, bạn phải chỉ định giá trị của `defaultValue` thay vì `value`. Việc thay đổi giá trị của `defaultValue` sau khi component được mounted sẽ không làm cập nhật giá trị trên cây DOM.
+Trong vòng đời render component React, thuộc tính `value` của các thành phần trong form sẽ override các giá trị trong DOM. Với uncontrolled component, bạn thường cần sử dụng React để chỉ định giá trị mặc định, nhưng bạn không thể kiểm soát được các bản thay đổi ở phía sau (nếu bạn dùng `value` mỗi khi form render, nó sẽ luôn gán giá trị này cho input). Để xử lí trong trường hợp này, bạn phải chỉ định giá trị của `defaultValue` thay vì `value`. Việc thay đổi giá trị của `defaultValue` sau khi component được mounted sẽ không làm cập nhật giá trị trên cây DOM.
 
 ```javascript{7}
 render() {

From 0be0badcf259dc7a2345d0a038afabfded44d580 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=C3=AAn=20Ary?= <nguyenary14@gmail.com>
Date: Wed, 15 Sep 2021 01:13:38 +0700
Subject: [PATCH 07/32] translate: faq component state page

---
 content/docs/faq-state.md | 84 +++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md
index c2b7b6657..3bd142262 100644
--- a/content/docs/faq-state.md
+++ b/content/docs/faq-state.md
@@ -6,101 +6,101 @@ layout: docs
 category: FAQ
 ---
 
-### What does `setState` do? {#what-does-setstate-do}
+### `setState` làm gì? {#what-does-setstate-do}
 
-`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering.
+`setState()` lên lịch cập nhật cho một object `state` của component. Khi state thay đổi, component phản hồi bằng cách hiển thị lại.
 
-### What is the difference between `state` and `props`? {#what-is-the-difference-between-state-and-props}
+### Sự khác biệt giữa `state` và `props`? {#what-is-the-difference-between-state-and-props}
 
-[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: `props` get passed *to* the component (similar to function parameters) whereas `state` is managed *within* the component (similar to variables declared within a function).
+[`props`](/docs/components-and-props.html) (viết tắt của "properties") và [`state`](/docs/state-and-lifecycle.html) đều là các object JavaScript đơn giản. Mặc dù cả hai đều nắm giữ thông tin ảnh hưởng đến kết quả hiển thị, nhưng chúng khác nhau ở một điểm quan trọng: `props` được chuyển *cho* component (tương tự như các tham số function) nhưng trái lại `state` được quản lý *trong* component (tương tự như các biến được khai báo trong một function).
 
-Here are some good resources for further reading on when to use `props` vs `state`:
-* [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
-* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
+Dưới đây là một số tài nguyên tốt để đọc thêm về thời điểm sử dụng `props` so với `state`:
+* [Props với State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
+* [ReactJS: Props với State](https://lucybain.com/blog/2016/react-state-vs-pros/)
 
-### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value}
+### Tại sao `setState` lại cho tôi giá trị sai? {#why-is-setstate-giving-me-the-wrong-value}
 
-In React, both `this.props` and `this.state` represent the *rendered* values, i.e. what's currently on the screen.
+Trong React, cả `this.props` và `this.state` đều đại diện cho các giá trị *được hiển thị*, tức là những gì hiện có trên màn hình.
 
-Calls to `setState` are asynchronous - don't rely on `this.state` to reflect the new value immediately after calling `setState`. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details).
+Các lệnh gọi đến `setState` là bất đồng bộ - đừng dựa vào `this.state` để phản ánh giá trị mới sau khi gọi `setState`. Truyền một function cập nhật thay vì một object nếu bạn cần tính toán các giá trị dựa trên state hiện tại (xem chi tiết bên dưới).
 
-Example of code that will *not* behave as expected:
+Ví dụ về code sẽ *không* hoạt động như mong đợi:
 
 ```jsx
 incrementCount() {
-  // Note: this will *not* work as intended.
+  // Ghi chú: điều này sẽ *không* hoạt động như dự định.
   this.setState({count: this.state.count + 1});
 }
 
 handleSomething() {
-  // Let's say `this.state.count` starts at 0.
+  // Giả sử `this.state.count` bắt đầu 0.
   this.incrementCount();
   this.incrementCount();
   this.incrementCount();
-  // When React re-renders the component, `this.state.count` will be 1, but you expected 3.
+  // Khi React hiển thị lại component, `this.state.count` sẽ là 1, bạn mong muốn là 3.
 
-  // This is because `incrementCount()` function above reads from `this.state.count`,
-  // but React doesn't update `this.state.count` until the component is re-rendered.
-  // So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1.
+  // Điều này do hàm `incrementCount()` ở trên đọc từ `this.state.count`,
+  // nhưng React không cập nhật `this.state.count` cho đến khi thành phần được hiển thị lại.
+  // Vì vậy `incrementCount()` kết thúc bằng cách đọc `this.state.count` là 0 mỗi lần, và đặt nó thành 1.
 
-  // The fix is described below!
+  // Cách khắc phục được mô tả bên dưới!
 }
 ```
 
-See below for how to fix this problem.
+Xem bên dưới để biết cách khắc phục sự cố này.
 
-### How do I update state with values that depend on the current state? {#how-do-i-update-state-with-values-that-depend-on-the-current-state}
+### Làm cách nào để cập nhật state với các giá trị phụ thuộc vào state hiện tại? {#how-do-i-update-state-with-values-that-depend-on-the-current-state}
 
-Pass a function instead of an object to `setState` to ensure the call always uses the most updated version of state (see below). 
+Truyền một function thay vì một object vào `setState` để đảm bảo cuộc gọi luôn sử dụng state cập nhật mới nhất (xem bên dưới). 
 
-### What is the difference between passing an object or a function in `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
+### Sự khác biệt giữa truyền một object hoặc một function trong `setState` là gì? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
 
-Passing an update function allows you to access the current state value inside the updater. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting:
+Chuyển một function cập nhật cho phép bạn truy cập giá trị trạng thái hiện tại bên trong trình cập nhật. Vì các lệnh gọi `setState` được thực hiện theo đợt, điều này cho phép bạn cập nhật chuỗi và đảm bảo chúng xây dựng dựa trên nhau thay vì xung đột:
 
 ```jsx
 incrementCount() {
   this.setState((state) => {
-    // Important: read `state` instead of `this.state` when updating.
+    // Quan trọng: đọc `state` thay vì` this.state` khi cập nhật.
     return {count: state.count + 1}
   });
 }
 
 handleSomething() {
-  // Let's say `this.state.count` starts at 0.
+  // Giả sử `this.state.count` bắt đầu từ 0.
   this.incrementCount();
   this.incrementCount();
   this.incrementCount();
 
-  // If you read `this.state.count` now, it would still be 0.
-  // But when React re-renders the component, it will be 3.
+  // Nếu bây giờ bạn đọc `this.state.count`, nó vẫn là 0.
+  // Nhưng khi React hiển thị component, nó sẽ là 3.
 }
 ```
 
-[Learn more about setState](/docs/react-component.html#setstate)
+[Tìm hiểu thêm về setState](/docs/react-component.html#setstate)
 
-### When is `setState` asynchronous? {#when-is-setstate-asynchronous}
+### Khi nào `setState` bất đồng bộ? {#when-is-setstate-asynchronous}
 
-Currently, `setState` is asynchronous inside event handlers.
+Hiện tại, `setState` là bất đồng bộ bên trong các trình xử lý sự kiện.
 
-This ensures, for example, that if both `Parent` and `Child` call `setState` during a click event, `Child` isn't re-rendered twice. Instead, React "flushes" the state updates at the end of the browser event. This results in significant performance improvements in larger apps.
+Ví dụ, điều này đảm bảo rằng nếu cả `Cha` và `Con` gọi `setState` trong một sự kiện nhấp chuột, `Con` con không được hiển thị lại 2 lần. Thay vào đó, React “xóa” các cập nhật state vào cuối sự kiện trình duyệt. Điều này dẫn đến cải thiện hiệu suất đáng kể trong các ứng dụng lớn hơn.
 
-This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases.
+Đây là một chi tiết hoàn thiện nên tránh dựa dẫm vào nó trực tiếp. Trong các phiên bản tương lai, React sẽ cập nhật hàng loạt theo mặc định trong nhiều trường hợp hơn.
 
-### Why doesn't React update `this.state` synchronously? {#why-doesnt-react-update-thisstate-synchronously}
+### Tại sao React không cập nhật `this.state` một cách đồng bộ? {#why-doesnt-react-update-thisstate-synchronously}
 
-As explained in the previous section, React intentionally "waits" until all components call `setState()` in their event handlers before starting to re-render. This boosts performance by avoiding unnecessary re-renders.
+Như đã giải thích trong phần trước, React chủ ý "đợi" cho đến khi tất cả các thành phần gọi `setState()` trong trình xử lý sự kiện của họ trước khi bắt đầu hiển thị lại. Điều này tăng hiệu suất bằng cách tránh các hiển thị không cần thiết.
 
-However, you might still be wondering why React doesn't just update `this.state` immediately without re-rendering.
+Tuy nhiên, bạn vẫn có thể thắc mắc tại sao React không cập nhật `this.state` ngay lập tức mà không hiển thị lại.
 
-There are two main reasons:
+Có hai lý do chính:
 
-* This would break the consistency between `props` and `state`, causing issues that are very hard to debug.
-* This would make some of the new features we're working on impossible to implement.
+* Điều này sẽ phá vỡ sự nhất quán giữa `props` và `state`, gây ra các vấn đề rất khó gỡ lỗi.
+* Điều này sẽ khiến một số tính năng mới mà chúng tôi đang nghiên cứu không thể triển khai.
 
-This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples.
+[Nhận xét Github](https://github.com/facebook/react/issues/11527#issuecomment-360199710) này đi sâu vào các ví dụ cụ thể.
 
-### Should I use a state management library like Redux or MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx}
+### Tôi có nên sử dụng thư viện quản lý state như Redux hoặc MobX không? {#should-i-use-a-state-management-library-like-redux-or-mobx}
 
-[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux)
+[Có lẽ.](https://redux.js.org/faq/general#when-should-i-use-redux)
 
-It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React.
+Bạn nên làm quen với React trước, trước khi sử dụng các thư viện bổ sung. Bạn có thể xây dựng các ứng dụng khá phức tạp chỉ bằng React.

From 81f178134313b98a7e4db1fcc5c9dfc17093541e Mon Sep 17 00:00:00 2001
From: Ted Le <tedle1997@yahoo.com>
Date: Tue, 14 Sep 2021 23:57:42 +0200
Subject: [PATCH 08/32] Translate faq-structure.md

Translated faq-structure.md file into Vietnamese
---
 content/docs/faq-structure.md | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md
index 361d681fb..764a7a289 100644
--- a/content/docs/faq-structure.md
+++ b/content/docs/faq-structure.md
@@ -6,13 +6,15 @@ layout: docs
 category: FAQ
 ---
 
-### Is there a recommended way to structure React projects? {#is-there-a-recommended-way-to-structure-react-projects}
+### Có cách nào được khuyên dùng để sắp xếp các dự án React? {#is-there-a-recommended-way-to-structure-react-projects}
 
-React doesn't have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider.
+React không có ý kiến về cách bạn sắp xếp các files trong các thư mục. Tuy nhiên, có một số cách tiếp cận thông dụng mà các bạn nên cân nhắc.
 
-#### Grouping by features or routes {#grouping-by-features-or-routes}
 
-One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.
+#### Phân nhóm theo tính năng hoặc đường dẫn {#grouping-by-features-or-routes}
+
+Một cách thông thường để hệ thống hoá dự án là nhóm các file CSS, JS, và tests chung một thư mục và phân các thư mục này theo tính năng hoặc đường dẫn.
+
 
 ```
 common/
@@ -35,11 +37,13 @@ profile/
   ProfileAPI.js
 ```
 
-The definition of a "feature" is not universal, and it is up to you to choose the granularity. If you can't come up with a list of top-level folders, you can ask the users of your product what major parts it consists of, and use their mental model as a blueprint.
+Định nghĩa của "tính năng" tuỳ thuộc vào cách các bạn định nghĩa, không có khái niệm chung ở đây. Nếu bạn không thể nghĩ ra một danh sách các thư mục top-level, bạn có thể hỏi những người dùng đâu là các thành phần thiết yếu của sản phẩm, và dùng các thành phần này để định hình cách sắp xếp cho dự án. 
+
+
+#### Nhóm các file theo phân loại{#grouping-by-file-type}
 
-#### Grouping by file type {#grouping-by-file-type}
+Một cách phổ biến khác để sắp xếp dự án chính là nhóm các file giống nhau lại chung với nhau, ví dụ:
 
-Another popular way to structure projects is to group similar files together, for example:
 
 ```
 api/
@@ -59,16 +63,19 @@ components/
   ProfileHeader.css
 ```
 
-Some people also prefer to go further, and separate components into different folders depending on their role in the application. For example, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) is a design methodology built on this principle. Remember that it's often more productive to treat such methodologies as helpful examples rather than strict rules to follow.
+Một vài người sẽ muốn tối ưu hơn, và sắp xếp các components vào những thư mục tuỳ vào nhiệm vụ của chúng trong ứng dụng. Ví dụ, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) là một phương pháp thiết kế được xây dựng dựa trên nguyên tắc này. Hãy nhớ rằng đôi lúc nên sử dụng các phương pháp này như những ví dụ thay vì xem chúng như những quy luật cần phải tuân thủ.
+
+
+#### Tránh đan xen quá nhiều {#avoid-too-much-nesting}
+
+Nhiều niềm đau khổ xuất phát từ các thư mục JavaScript bị đan xen quá nhiều trong các dự án. Nó trở nên quá khó khăn để viết các lệnh import giữa chúng, hoặc để cập nhật các import khi các file bị di chuyển. Trừ khi bạn có một lý do khá thuyết phục để dùng một cấu trúc thư mục chằn chịt, hãy hạn chế bản thân bạn ở 3 đến 4 lớp thư mục trong 1 dự án. Đương nhiên, đây chỉ là một lời khuyên, và nó có thề sẽ không phù hợp với dự án của bạn.
 
-#### Avoid too much nesting {#avoid-too-much-nesting}
 
-There are many pain points associated with deep directory nesting in JavaScript projects. It becomes harder to write relative imports between them, or to update those imports when the files are moved. Unless you have a very compelling reason to use a deep folder structure, consider limiting yourself to a maximum of three or four nested folders within a single project. Of course, this is only a recommendation, and it may not be relevant to your project.
+#### Đừng suy nghĩ phức tạp {#dont-overthink-it}
 
-#### Don't overthink it {#dont-overthink-it}
+Nếu bạn vừa bắt đầu một dự án, [đừng tốn quá 5 phút](https://en.wikipedia.org/wiki/Analysis_paralysis) cho việc lựa chọn một cấu trúc file. Hãy chọn bất kỳ cách tiếp cận được nêu trên (hoặc hãy tự nghĩ ra cách của bạn) và bắt đầu viết code! Khả năng cao là bạn sẽ phải suy nghĩ lại về cách sắp xếp sau khi bạn bắt đầu viết code thực sự.
 
-If you're just starting a project, [don't spend more than five minutes](https://en.wikipedia.org/wiki/Analysis_paralysis) on choosing a file structure. Pick any of the above approaches (or come up with your own) and start writing code! You'll likely want to rethink it anyway after you've written some real code.
+Nếu bạn cảm thấy hoàn toàn bế tắc, hãy bắt đầu bằng cách để hết tất cả các file vào chỉ duy nhất 1 thư mục. Dần dần thư mục này sẽ đủ lớn để bạn bắt đầu cảm thấy phải tách một số file khỏi các file còn lại. Tới khi đó bạn sẽ có đủ am tường để nhận ra các file nào bạn thường xuyên phải chỉnh sửa chung với nhau. Nhìn chung, bạn nên giữ các file bạn thường xuyên chỉnh sửa chung cùng một thư mục. Nguyên tắc này được gọi là "colocation".
 
-If you feel completely stuck, start by keeping all files in a single folder. Eventually it will grow large enough that you will want to separate some files from the rest. By that time you'll have enough knowledge to tell which files you edit together most often. In general, it is a good idea to keep files that often change together close to each other. This principle is called "colocation".
+Một khi các dự án trở nên lớn hơn chúng sẽ dùng kết hợp của 2 cách tiếp cận trên. Vì vậy việc lựa chọn "đúng" cách tiếp cận khi đang bắt đầu dự án là việc không quan trọng.
 
-As projects grow larger, they often use a mix of both of the above approaches in practice. So choosing the "right" one in the beginning isn't very important.

From 8ca3c139fe57a12dc42f53bb9a5867d9d5b5b437 Mon Sep 17 00:00:00 2001
From: Ted Le <tedle1997@yahoo.com>
Date: Wed, 15 Sep 2021 00:14:05 +0200
Subject: [PATCH 09/32] Update translation of faq-structure.md

minor update to keep translation structure uniform with original structure
---
 content/docs/faq-structure.md | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md
index 764a7a289..a005b61f2 100644
--- a/content/docs/faq-structure.md
+++ b/content/docs/faq-structure.md
@@ -10,12 +10,10 @@ category: FAQ
 
 React không có ý kiến về cách bạn sắp xếp các files trong các thư mục. Tuy nhiên, có một số cách tiếp cận thông dụng mà các bạn nên cân nhắc.
 
-
 #### Phân nhóm theo tính năng hoặc đường dẫn {#grouping-by-features-or-routes}
 
 Một cách thông thường để hệ thống hoá dự án là nhóm các file CSS, JS, và tests chung một thư mục và phân các thư mục này theo tính năng hoặc đường dẫn.
 
-
 ```
 common/
   Avatar.js
@@ -39,12 +37,10 @@ profile/
 
 Định nghĩa của "tính năng" tuỳ thuộc vào cách các bạn định nghĩa, không có khái niệm chung ở đây. Nếu bạn không thể nghĩ ra một danh sách các thư mục top-level, bạn có thể hỏi những người dùng đâu là các thành phần thiết yếu của sản phẩm, và dùng các thành phần này để định hình cách sắp xếp cho dự án. 
 
-
 #### Nhóm các file theo phân loại{#grouping-by-file-type}
 
 Một cách phổ biến khác để sắp xếp dự án chính là nhóm các file giống nhau lại chung với nhau, ví dụ:
 
-
 ```
 api/
   APIUtils.js
@@ -65,17 +61,14 @@ components/
 
 Một vài người sẽ muốn tối ưu hơn, và sắp xếp các components vào những thư mục tuỳ vào nhiệm vụ của chúng trong ứng dụng. Ví dụ, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) là một phương pháp thiết kế được xây dựng dựa trên nguyên tắc này. Hãy nhớ rằng đôi lúc nên sử dụng các phương pháp này như những ví dụ thay vì xem chúng như những quy luật cần phải tuân thủ.
 
-
 #### Tránh đan xen quá nhiều {#avoid-too-much-nesting}
 
 Nhiều niềm đau khổ xuất phát từ các thư mục JavaScript bị đan xen quá nhiều trong các dự án. Nó trở nên quá khó khăn để viết các lệnh import giữa chúng, hoặc để cập nhật các import khi các file bị di chuyển. Trừ khi bạn có một lý do khá thuyết phục để dùng một cấu trúc thư mục chằn chịt, hãy hạn chế bản thân bạn ở 3 đến 4 lớp thư mục trong 1 dự án. Đương nhiên, đây chỉ là một lời khuyên, và nó có thề sẽ không phù hợp với dự án của bạn.
 
-
 #### Đừng suy nghĩ phức tạp {#dont-overthink-it}
 
 Nếu bạn vừa bắt đầu một dự án, [đừng tốn quá 5 phút](https://en.wikipedia.org/wiki/Analysis_paralysis) cho việc lựa chọn một cấu trúc file. Hãy chọn bất kỳ cách tiếp cận được nêu trên (hoặc hãy tự nghĩ ra cách của bạn) và bắt đầu viết code! Khả năng cao là bạn sẽ phải suy nghĩ lại về cách sắp xếp sau khi bạn bắt đầu viết code thực sự.
 
 Nếu bạn cảm thấy hoàn toàn bế tắc, hãy bắt đầu bằng cách để hết tất cả các file vào chỉ duy nhất 1 thư mục. Dần dần thư mục này sẽ đủ lớn để bạn bắt đầu cảm thấy phải tách một số file khỏi các file còn lại. Tới khi đó bạn sẽ có đủ am tường để nhận ra các file nào bạn thường xuyên phải chỉnh sửa chung với nhau. Nhìn chung, bạn nên giữ các file bạn thường xuyên chỉnh sửa chung cùng một thư mục. Nguyên tắc này được gọi là "colocation".
 
-Một khi các dự án trở nên lớn hơn chúng sẽ dùng kết hợp của 2 cách tiếp cận trên. Vì vậy việc lựa chọn "đúng" cách tiếp cận khi đang bắt đầu dự án là việc không quan trọng.
-
+Một khi các dự án trở nên lớn hơn chúng sẽ dùng kết hợp của 2 cách tiếp cận trên. Vì vậy việc lựa chọn "đúng" cách tiếp cận khi đang bắt đầu dự án là việc không quan trọng.
\ No newline at end of file

From 3ee18e40d9b23265f30725d1e7a8fa1fcaf25e7a Mon Sep 17 00:00:00 2001
From: Ted Le <tedle1997@yahoo.com>
Date: Wed, 15 Sep 2021 00:32:28 +0200
Subject: [PATCH 10/32] 3rd time is the charm

---
 content/docs/faq-structure.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md
index a005b61f2..77c4bc5e5 100644
--- a/content/docs/faq-structure.md
+++ b/content/docs/faq-structure.md
@@ -1,16 +1,16 @@
 ---
 id: faq-structure
-title: File Structure
+title: Cấu Trúc Dự Án
 permalink: docs/faq-structure.html
 layout: docs
 category: FAQ
 ---
 
-### Có cách nào được khuyên dùng để sắp xếp các dự án React? {#is-there-a-recommended-way-to-structure-react-projects}
+### Có cách nào được khuyên dùng để sắp xếp các dự án React? {#Có-cách-nào-được-khuyên-dùng-để-sắp-xếp-các-dự-án-React}
 
 React không có ý kiến về cách bạn sắp xếp các files trong các thư mục. Tuy nhiên, có một số cách tiếp cận thông dụng mà các bạn nên cân nhắc.
 
-#### Phân nhóm theo tính năng hoặc đường dẫn {#grouping-by-features-or-routes}
+#### Phân nhóm theo tính năng hoặc đường dẫn {#Phân-nhóm-theo-tính-năng-hoặc-đường-dẫn}
 
 Một cách thông thường để hệ thống hoá dự án là nhóm các file CSS, JS, và tests chung một thư mục và phân các thư mục này theo tính năng hoặc đường dẫn.
 
@@ -37,7 +37,7 @@ profile/
 
 Định nghĩa của "tính năng" tuỳ thuộc vào cách các bạn định nghĩa, không có khái niệm chung ở đây. Nếu bạn không thể nghĩ ra một danh sách các thư mục top-level, bạn có thể hỏi những người dùng đâu là các thành phần thiết yếu của sản phẩm, và dùng các thành phần này để định hình cách sắp xếp cho dự án. 
 
-#### Nhóm các file theo phân loại{#grouping-by-file-type}
+#### Nhóm các file theo phân loại {#Nhóm-các-file-theo-phân-loại}
 
 Một cách phổ biến khác để sắp xếp dự án chính là nhóm các file giống nhau lại chung với nhau, ví dụ:
 
@@ -61,11 +61,11 @@ components/
 
 Một vài người sẽ muốn tối ưu hơn, và sắp xếp các components vào những thư mục tuỳ vào nhiệm vụ của chúng trong ứng dụng. Ví dụ, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) là một phương pháp thiết kế được xây dựng dựa trên nguyên tắc này. Hãy nhớ rằng đôi lúc nên sử dụng các phương pháp này như những ví dụ thay vì xem chúng như những quy luật cần phải tuân thủ.
 
-#### Tránh đan xen quá nhiều {#avoid-too-much-nesting}
+#### Tránh đan xen quá nhiều {#Tránh-đan-xen-quá-nhiều}
 
 Nhiều niềm đau khổ xuất phát từ các thư mục JavaScript bị đan xen quá nhiều trong các dự án. Nó trở nên quá khó khăn để viết các lệnh import giữa chúng, hoặc để cập nhật các import khi các file bị di chuyển. Trừ khi bạn có một lý do khá thuyết phục để dùng một cấu trúc thư mục chằn chịt, hãy hạn chế bản thân bạn ở 3 đến 4 lớp thư mục trong 1 dự án. Đương nhiên, đây chỉ là một lời khuyên, và nó có thề sẽ không phù hợp với dự án của bạn.
 
-#### Đừng suy nghĩ phức tạp {#dont-overthink-it}
+#### Đừng suy nghĩ phức tạp {#Đừng-suy-nghĩ-phức-tạp}
 
 Nếu bạn vừa bắt đầu một dự án, [đừng tốn quá 5 phút](https://en.wikipedia.org/wiki/Analysis_paralysis) cho việc lựa chọn một cấu trúc file. Hãy chọn bất kỳ cách tiếp cận được nêu trên (hoặc hãy tự nghĩ ra cách của bạn) và bắt đầu viết code! Khả năng cao là bạn sẽ phải suy nghĩ lại về cách sắp xếp sau khi bạn bắt đầu viết code thực sự.
 

From 5ff8c753fcfac6e714620e46938c2b278a9b1bd3 Mon Sep 17 00:00:00 2001
From: Ted Le <tedle1997@yahoo.com>
Date: Wed, 15 Sep 2021 01:12:48 +0200
Subject: [PATCH 11/32] Another edi

---
 content/docs/faq-structure.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md
index 77c4bc5e5..a005b61f2 100644
--- a/content/docs/faq-structure.md
+++ b/content/docs/faq-structure.md
@@ -1,16 +1,16 @@
 ---
 id: faq-structure
-title: Cấu Trúc Dự Án
+title: File Structure
 permalink: docs/faq-structure.html
 layout: docs
 category: FAQ
 ---
 
-### Có cách nào được khuyên dùng để sắp xếp các dự án React? {#Có-cách-nào-được-khuyên-dùng-để-sắp-xếp-các-dự-án-React}
+### Có cách nào được khuyên dùng để sắp xếp các dự án React? {#is-there-a-recommended-way-to-structure-react-projects}
 
 React không có ý kiến về cách bạn sắp xếp các files trong các thư mục. Tuy nhiên, có một số cách tiếp cận thông dụng mà các bạn nên cân nhắc.
 
-#### Phân nhóm theo tính năng hoặc đường dẫn {#Phân-nhóm-theo-tính-năng-hoặc-đường-dẫn}
+#### Phân nhóm theo tính năng hoặc đường dẫn {#grouping-by-features-or-routes}
 
 Một cách thông thường để hệ thống hoá dự án là nhóm các file CSS, JS, và tests chung một thư mục và phân các thư mục này theo tính năng hoặc đường dẫn.
 
@@ -37,7 +37,7 @@ profile/
 
 Định nghĩa của "tính năng" tuỳ thuộc vào cách các bạn định nghĩa, không có khái niệm chung ở đây. Nếu bạn không thể nghĩ ra một danh sách các thư mục top-level, bạn có thể hỏi những người dùng đâu là các thành phần thiết yếu của sản phẩm, và dùng các thành phần này để định hình cách sắp xếp cho dự án. 
 
-#### Nhóm các file theo phân loại {#Nhóm-các-file-theo-phân-loại}
+#### Nhóm các file theo phân loại{#grouping-by-file-type}
 
 Một cách phổ biến khác để sắp xếp dự án chính là nhóm các file giống nhau lại chung với nhau, ví dụ:
 
@@ -61,11 +61,11 @@ components/
 
 Một vài người sẽ muốn tối ưu hơn, và sắp xếp các components vào những thư mục tuỳ vào nhiệm vụ của chúng trong ứng dụng. Ví dụ, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) là một phương pháp thiết kế được xây dựng dựa trên nguyên tắc này. Hãy nhớ rằng đôi lúc nên sử dụng các phương pháp này như những ví dụ thay vì xem chúng như những quy luật cần phải tuân thủ.
 
-#### Tránh đan xen quá nhiều {#Tránh-đan-xen-quá-nhiều}
+#### Tránh đan xen quá nhiều {#avoid-too-much-nesting}
 
 Nhiều niềm đau khổ xuất phát từ các thư mục JavaScript bị đan xen quá nhiều trong các dự án. Nó trở nên quá khó khăn để viết các lệnh import giữa chúng, hoặc để cập nhật các import khi các file bị di chuyển. Trừ khi bạn có một lý do khá thuyết phục để dùng một cấu trúc thư mục chằn chịt, hãy hạn chế bản thân bạn ở 3 đến 4 lớp thư mục trong 1 dự án. Đương nhiên, đây chỉ là một lời khuyên, và nó có thề sẽ không phù hợp với dự án của bạn.
 
-#### Đừng suy nghĩ phức tạp {#Đừng-suy-nghĩ-phức-tạp}
+#### Đừng suy nghĩ phức tạp {#dont-overthink-it}
 
 Nếu bạn vừa bắt đầu một dự án, [đừng tốn quá 5 phút](https://en.wikipedia.org/wiki/Analysis_paralysis) cho việc lựa chọn một cấu trúc file. Hãy chọn bất kỳ cách tiếp cận được nêu trên (hoặc hãy tự nghĩ ra cách của bạn) và bắt đầu viết code! Khả năng cao là bạn sẽ phải suy nghĩ lại về cách sắp xếp sau khi bạn bắt đầu viết code thực sự.
 

From 3c5dd9602221ca083c5593a877d4ff395af2997f Mon Sep 17 00:00:00 2001
From: ThaoLe366 <46836329+ThaoLe366@users.noreply.github.com>
Date: Wed, 15 Sep 2021 08:48:37 +0700
Subject: [PATCH 12/32] Update
 2020-12-21-data-fetching-with-react-server-components.md

---
 .../2020-12-21-data-fetching-with-react-server-components.md  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/blog/2020-12-21-data-fetching-with-react-server-components.md b/content/blog/2020-12-21-data-fetching-with-react-server-components.md
index eb0b70a22..80727a98c 100644
--- a/content/blog/2020-12-21-data-fetching-with-react-server-components.md
+++ b/content/blog/2020-12-21-data-fetching-with-react-server-components.md
@@ -1,6 +1,6 @@
 ---
-tiêu đề: "Giới thiệu Zero-Bundle-Size React Server Components"
-tác giả: [gaearon,laurentan,josephsavona,sebmarkbage]
+title: "Giới thiệu Zero-Bundle-Size React Server Components"
+author: [gaearon,laurentan,josephsavona,sebmarkbage]
 ---
 
 2020 là một năm dài. Năm cũ sắp hết, chúng tôi muốn mang đến một cập nhật đặc biệt cho mùa lễ hội này, đó là nghiên cứu của chúng tôi về zero-bundle-size **React Server Components**.

From c5ee12b06524c8c7df00df3a39cd8fc0c89577ea Mon Sep 17 00:00:00 2001
From: HuyNT <huynt.me@gmail.com>
Date: Wed, 15 Sep 2021 09:49:18 +0700
Subject: [PATCH 13/32] Update translation 2013-06-05-why-react.md

---
 content/blog/2013-06-05-why-react.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/blog/2013-06-05-why-react.md b/content/blog/2013-06-05-why-react.md
index e370718a4..88e4116e5 100644
--- a/content/blog/2013-06-05-why-react.md
+++ b/content/blog/2013-06-05-why-react.md
@@ -1,6 +1,6 @@
 ---
-Tiêu đề: Tại sao chúng tôi xây dựng React?
-Tác giả: [petehunt]
+title: Tại sao chúng tôi xây dựng React?
+author: [petehunt]
 ---
 
 Có rất nhiều thư viện JavaScript MVC. Tại sao chúng tôi xây dựng React và tại sao bạn muốn sử dụng nó?

From e9ad0beb56bd2932db0944713ad630c5f7d1708c Mon Sep 17 00:00:00 2001
From: kctrnn <kctrnn@gmail.com>
Date: Wed, 15 Sep 2021 10:28:39 +0700
Subject: [PATCH 14/32] Translate dont call proptypes page in warnings

---
 content/warnings/dont-call-proptypes.md | 44 ++++++++++++-------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md
index 07dfa33f0..c2b5d8e9f 100644
--- a/content/warnings/dont-call-proptypes.md
+++ b/content/warnings/dont-call-proptypes.md
@@ -4,17 +4,17 @@ layout: single
 permalink: warnings/dont-call-proptypes.html
 ---
 
-> Note:
+> Chú ý:
 >
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
+> `React.PropTypes` đã chuyển sang một gói khác kể từ React v15.5. Vui lòng sử dụng [thư viện `prop-types` thay thế](https://www.npmjs.com/package/prop-types).
 >
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
+>Chúng tôi cung cấp [tập lệnh codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) để tự động chuyển đổi.
 
-In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.
+Trong một bản phát hành chính trong tương lai của React, mã thực hiện các chức năng xác thực PropType sẽ bị loại bỏ trong quá trình sản xuất. Khi điều này xảy ra, bất kỳ mã nào gọi các chức năng này theo cách thủ công (không bị loại bỏ trong quá trình sản xuất) sẽ gây ra lỗi.
 
-### Declaring PropTypes is still fine {#declaring-proptypes-is-still-fine}
+### Khai báo PropTypes vẫn ổn {#declaring-proptypes-is-still-fine}
 
-The normal usage of PropTypes is still supported:
+Việc sử dụng bình thường PropTypes vẫn được hỗ trợ:
 
 ```javascript
 Button.propTypes = {
@@ -22,11 +22,11 @@ Button.propTypes = {
 };
 ```
 
-Nothing changes here.
+Không có gì thay đổi ở đây.
 
-### Don’t call PropTypes directly {#dont-call-proptypes-directly}
+### Không gọi trực tiếp PropTypes {#dont-call-proptypes-directly}
 
-Using PropTypes in any other way than annotating React components with them is no longer supported:
+Sử dụng PropTypes theo bất kỳ cách nào khác ngoài việc chú thích các thành phần React với chúng không còn được hỗ trợ:
 
 ```javascript
 var apiShape = PropTypes.shape({
@@ -34,17 +34,17 @@ var apiShape = PropTypes.shape({
   statusCode: PropTypes.number.isRequired
 }).isRequired;
 
-// Not supported!
+// Không được hỗ trợ!
 var error = apiShape(json, 'response');
 ```
 
-If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages).
+Nếu bạn phụ thuộc vào việc sử dụng PropTypes như thế này, chúng tôi khuyến khích bạn sử dụng hoặc tạo một nhánh của PropTypes (chẳng hạn như 2 gói này [aackerman/PropTypes](https://github.com/aackerman/PropTypes) [developit/proptypes](https://github.com/developit/proptypes)).
 
-If you don't fix the warning, this code will crash in production with React 16.
+Nếu bạn không khắc phục cảnh báo, mã này sẽ gặp sự cố trong quá trình sản xuất với React 16.
 
-### If you don't call PropTypes directly but still get the warning {#if-you-dont-call-proptypes-directly-but-still-get-the-warning}
+### Nếu bạn không gọi trực tiếp cho PropTypes nhưng vẫn nhận được cảnh báo {#if-you-dont-call-proptypes-directly-but-still-get-the-warning}
 
-Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example:
+Kiểm tra dấu vết ngăn xếp được tạo ra bởi cảnh báo. Bạn sẽ thấy định nghĩa thành phần chịu trách nhiệm cho cuộc gọi trực tiếp PropTypes. Rất có thể, vấn đề là do PropTypes của bên thứ ba bao bọc React’s PropTypes, ví dụ:
 
 ```js
 Button.propTypes = {
@@ -55,13 +55,13 @@ Button.propTypes = {
 }
 ```
 
-In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it.
+Trong trường hợp này, `ThirdPartyPropTypes.deprecated` là một trình bao bọc gọi `PropTypes.bool`. Bản thân mô hình này là tốt, nhưng kích hoạt dương tính giả vì React cho rằng bạn đang gọi trực tiếp PropTypes. Phần tiếp theo giải thích cách khắc phục sự cố này cho một thư viện triển khai thứ gì đó như `ThirdPartyPropTypes`. Nếu đó không phải là thư viện bạn đã viết, bạn có thể gửi vấn đề về thư viện đó.
 
-### Fixing the false positive in third party PropTypes {#fixing-the-false-positive-in-third-party-proptypes}
+### Sửa lỗi dương tính giả trong PropTypes của bên thứ ba {#fixing-the-false-positive-in-third-party-proptypes}
 
-If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls.
+Nếu bạn là tác giả của thư viện PropTypes của bên thứ ba và bạn để người tiêu dùng bọc các React PropTypes hiện có, họ có thể bắt đầu thấy cảnh báo này đến từ thư viện của bạn. Điều này xảy ra vì React không thấy đối số cuối cùng "bí mật" mà nó [chuyển qua](https://github.com/facebook/react/pull/7132) để phát hiện các lệnh gọi PropTypes thủ công.
 
-Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments:
+Đây là cách để sửa chữa nó. Chúng tôi sẽ sử dụng từ [react-bootstrap/react-prop-type](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) `không được dùng nữa` làm ví dụ. Việc triển khai hiện tại chỉ chuyển xuống các đối số `props`, `propName` và `componentName`:
 
 ```javascript
 export default function deprecated(propType, explanation) {
@@ -79,11 +79,11 @@ export default function deprecated(propType, explanation) {
 }
 ```
 
-In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation:
+Để sửa lỗi dương tính giả, hãy đảm bảo rằng bạn chuyển **tất cả** các đối số xuống PropType được bao bọc. Điều này rất dễ thực hiện với ký hiệu `...rest` của ES6:
 
 ```javascript
 export default function deprecated(propType, explanation) {
-  return function validate(props, propName, componentName, ...rest) { // Note ...rest here
+  return function validate(props, propName, componentName, ...rest) { // Chú ý ...rest ở đây
     if (props[propName] != null) {
       const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
       if (!warned[message]) {
@@ -92,9 +92,9 @@ export default function deprecated(propType, explanation) {
       }
     }
 
-    return propType(props, propName, componentName, ...rest); // and here
+    return propType(props, propName, componentName, ...rest); // và ở đây
   };
 }
 ```
 
-This will silence the warning.
+Điều này sẽ tắt tiếng cảnh báo.

From 45983afd4d2cea35a93fd861d5be153aa958c234 Mon Sep 17 00:00:00 2001
From: phumaster <phumaster.dev@gmail.com>
Date: Wed, 15 Sep 2021 10:34:53 +0700
Subject: [PATCH 15/32] Translate cross-origin-errors.md

---
 content/docs/cross-origin-errors.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/content/docs/cross-origin-errors.md b/content/docs/cross-origin-errors.md
index 915ee0d63..5f80b80f2 100644
--- a/content/docs/cross-origin-errors.md
+++ b/content/docs/cross-origin-errors.md
@@ -1,28 +1,28 @@
 ---
 id: cross-origin-errors
-title: Cross-origin Errors
+title: Lỗi Cross-origin
 permalink: docs/cross-origin-errors.html
 ---
 
-> Note:
+> Ghi chú:
 >
-> The following section applies only to the development mode of React. Error handling in production mode is done with regular try/catch statements.
+> Bài này chỉ áp dụng trong chế độ phát triển của React. Xử lý lỗi trong chế độ sản phẩm (production mode) được thực hiện với các câu lệnh try/catch.
 
-In [development mode](/docs/optimizing-performance.html), React uses a global `error` event handler to preserve the "pause on exceptions" behavior of browser DevTools. It also logs errors to the developer console.
+Trong [chế độ phát triển](/docs/optimizing-performance.html), React sử dụng trình xử lý sự kiện `error` toàn cục để duy trình hành vi "pause on exceptions" ("Tạm dừng khi xảy ra ngoại lệ") của công cụ phát triển của trình duyệt. Nó cũng ghi lại lỗi vào bảng điều khiển dành cho nhà phát triển.
 
-If an error is thrown from a [different origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) the browser will mask its details and React will not be able to log the original error message. This is a security precaution taken by browsers to avoid leaking sensitive information.
+Nếu có một lỗi được đưa ra từ một [nguồn khác](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) trình duyệt sẽ che đi các chi tiết của nó và React sẽ không thể ghi lại thông báo lỗi gốc. Đây là biện pháp phòng ngừa bảo mật được thực hiện bởi trình duyệt nhằm tránh rò rỉ thông tin nhạy cảm.
 
-You can simplify the development/debugging process by ensuring that errors are thrown with a same-origin policy. Below are some common causes of cross-origin errors and ways to address them.
+Bạn có thể đơn giản hóa quy trình phát triển/gỡ lỗi bằng cách đảm bảo rằng các lỗi được đưa ra với cùng một nguồn. Dưới đây là một số nguyên nhân phổ biến gây ra lỗi có nguồn gốc khác nhau và cách giải quyết chúng.
 
 ### CDN {#cdn}
 
-When loading React (or other libraries that might throw errors) from a CDN, add the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute to your `<script>` tags:
+Khi tải React (hoặc các thư viện khác có thể gây ra lỗi) từ một CDN (mạng phân phối nội dung), hãy thêm thuộc tính [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) vào trong thẻ `<script>` của bạn:
 
 ```html
 <script crossorigin src="..."></script>
 ```
 
-Also ensure the CDN responds with the `Access-Control-Allow-Origin: *` HTTP header:
+Đồng thời chắc chắn rằng CDN phản hồi với một HTTP header `Access-Control-Allow-Origin: *`:
 
 ![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png)
 
@@ -30,12 +30,12 @@ Also ensure the CDN responds with the `Access-Control-Allow-Origin: *` HTTP head
 
 #### Source maps {#source-maps}
 
-Some JavaScript bundlers may wrap the application code with `eval` statements in development. (For example Webpack will do this if [`devtool`](https://webpack.js.org/configuration/devtool/) is set to any value containing the word "eval".) This may cause errors to be treated as cross-origin.
+Một số công cụ đóng gói Javascript có thể bọc mã ứng dụng bằng các câu lệnh `eval` trong quá trình phát triển. (Ví dụ: Webpack sẽ thực hiện việc này nếu [`devtool`](https://webpack.js.org/configuration/devtool/) được thiết lập từ bất kỳ giá trị nào có chưa từ khóa "eval".) Điều này có thể khiến các lỗi được coi là có nguồn gốc chéo nhau.
 
-If you use Webpack, we recommend using the `cheap-module-source-map` setting in development to avoid this problem.
+Nếu bạn sử dụng Webpack, chúng tôi khuyên bạn nên sử dụng cài đặt `cheap-module-source-map` trong quá trình phát triển để tránh vấn đề này.
 
-#### Code splitting {#code-splitting}
+#### Tách code {#code-splitting}
 
-If your application is split into multiple bundles, these bundles may be loaded using JSONP. This may cause errors thrown in the code of these bundles to be treated as cross-origin.
+Nếu ứng dụng của bạn được chia thành nhiều gói, các gói này có thể được tải bằng JSONP. Điều này có thể gây ra lỗi được đưa ra trong code của các gói này sẽ được coi là có nguồn gốc chéo nhau.
 
-To resolve this, use the [`crossOriginLoading`](https://webpack.js.org/configuration/output/#output-crossoriginloading) setting in development to add the `crossorigin` attribute to the `<script>` tags generated for the JSONP requests.
+Để giải quyết vấn đề này, sử dụng cài đặt [`crossOriginLoading`](https://webpack.js.org/configuration/output/#output-crossoriginloading) trong khi phát triển để thêm thuộc tính `crossorigin` vào thẻ `<script>` được tạo ra bởi JSONP request.

From 60bae0e7e9a03f93852bf12864de1cf52b72b03a Mon Sep 17 00:00:00 2001
From: cothvbdnnn <cothvbdnnn@gmail.com>
Date: Tue, 14 Sep 2021 22:58:52 +0700
Subject: [PATCH 16/32] 2021-09-14-jsfiddle-integration.md

---
 content/blog/2013-06-02-jsfiddle-integration.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/blog/2013-06-02-jsfiddle-integration.md b/content/blog/2013-06-02-jsfiddle-integration.md
index 43922bcc7..2b9d9053b 100644
--- a/content/blog/2013-06-02-jsfiddle-integration.md
+++ b/content/blog/2013-06-02-jsfiddle-integration.md
@@ -1,9 +1,9 @@
 ---
-title: JSFiddle Integration
+title: Tích hợp JSFiddle
 author: [vjeux]
 ---
 
-[JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
+[JSFiddle](https://jsfiddle.net) vừa mới thông báo hỗ trợ cho React. Đây là một tin thú vị vì nó giúp cho việc cộng tác với các đoạn code trở nên dễ dàng hơn rất nhiều. Bạn có thể làm việc với **[nền tảng React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, sửa đổi và chia sẻ nó! Một [fiddle không cần JSX](http://jsfiddle.net/vjeux/VkebS/) cũng đã có.
 
 
-<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
+<blockquote class="twitter-tweet" align="center"><p>React (bởi Facebook) hiện đã có trên JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">Ngày 2 tháng 6 năm 2013</a></blockquote>

From ea01fd249937f1c906aa14094538bc9a556fd7b4 Mon Sep 17 00:00:00 2001
From: huykon225 <huykon225@gmail.com>
Date: Wed, 15 Sep 2021 10:57:47 +0700
Subject: [PATCH 17/32] translate portal

---
 content/docs/portals.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 16e90b2e6..3fa6d678d 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -4,17 +4,17 @@ title: Portals
 permalink: docs/portals.html
 ---
 
-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+Portals cung cấp một cách hạng nhất để kết xuất phần tử con thành một nút DOM tồn tại bên ngoài phân cấp DOM của thành phần cha.
 
 ```js
 ReactDOM.createPortal(child, container)
 ```
 
-The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
+Đối số đầu tiên (`child`) là bất kỳ [phần tử con nào của React có thể kết xuất được](/docs/react-component.html#render), chẳng hạn như một phần tử, chuỗi, hoặc đoạn. Đối số thứ hai (`container`) là một phần tử DOM.
 
-## Usage {#usage}
+## Sử dụng {#usage}
 
-Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
+Thông thường, khi bạn trả về một phần tử từ phương thức kết xuất của một thành phần, nó sẽ được gắn vào DOM dưới dạng phần tử con của nút cha gần nhất:
 
 ```js{4,6}
 render() {
@@ -27,7 +27,7 @@ render() {
 }
 ```
 
-However, sometimes it's useful to insert a child into a different location in the DOM:
+Tuy nhiên, đôi khi sẽ hữu ích nếu chèn trẻ vào một vị trí khác trong DOM:
 
 ```js{6}
 render() {
@@ -40,21 +40,21 @@ render() {
 }
 ```
 
-A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
+Một trường hợp điển hình sử dụng cho các portals là khi một thành phần cha có kiểu `overflow: hidden` or `z-index`, nhưng bạn cần thành phần con “thoát ra” khỏi vùng chứa của nó một cách trực quan. Ví dụ: hộp thoại, thẻ di chuột và chú giải công cụ.
 
-> Note:
+> Chú ý:
 >
-> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important.
+> Khi làm việc với các portals, hãy nhớ rằng việc [quản lý tiêu điểm bàn phím](/docs/accessibility.html#programmatically-managing-focus) trở nên rất quan trọng.
 >
-> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
+> Đối với modal dialogs, hãy đảm bảo rằng mọi người đều có thể tương tác với chúng bằng cách tuân theo [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
 
-## Event Bubbling Through Portals {#event-bubbling-through-portals}
+## Sự Kiện Bong Bóng qua Portals {#event-bubbling-through-portals}
 
-Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*.
+Mặc dù một portal có thể ở bất kỳ đâu trong DOM tree, nhưng theo mọi cách khác, nó hoạt động giống như một React con bình thường. Các tính năng như ngữ cảnh hoạt động giống hệt nhau bất kể thành phần con có phải là portal hay không, vì portal vẫn tồn tại trong *React tree* bất kể vị trí trong *DOM tree*.
 
-This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure:
+Điều này bao gồm sự kiện bong bóng. Một sự kiện được kích hoạt từ bên trong portal sẽ truyền đến ancestors trong *React tree* có chứa, ngay cả khi những phần tử đó không phải là ancestors trong *DOM tree*. Giả sử cấu trúc HTML sau:
 
 ```html
 <html>
@@ -65,7 +65,7 @@ This includes event bubbling. An event fired from inside a portal will propagate
 </html>
 ```
 
-A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
+Một thành phần `Parent` trong `#app-root` sẽ có thể bắt được một sự kiện bong bóng chưa được giải quyết từ nút anh chị em `#modal-root`.
 
 ```js{28-31,42-49,53,61-63,70-71,74}
 // These two containers are siblings in the DOM
@@ -151,4 +151,4 @@ ReactDOM.render(<Parent />, appRoot);
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
 
-Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.
+Việc nắm bắt một sự kiện xảy ra từ một portal trong thành phần cha cho phép phát triển các tính năng trừu tượng linh hoạt hơn vốn không phụ thuộc vào các portal. Ví dụ: nếu bạn hiển thị một thành phần `<Modal />`, thành phần gốc có thể nắm bắt các sự kiện của nó bất kể nó có được triển khai bằng portal hay không.

From be5f4c728e13ba4695ff9915dea86b0806c06948 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=C3=AAn=20Ary?= <nguyenary14@gmail.com>
Date: Wed, 15 Sep 2021 11:13:54 +0700
Subject: [PATCH 18/32] update faq component state page

---
 content/docs/faq-state.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md
index 3bd142262..0a6afe792 100644
--- a/content/docs/faq-state.md
+++ b/content/docs/faq-state.md
@@ -6,7 +6,7 @@ layout: docs
 category: FAQ
 ---
 
-### `setState` làm gì? {#what-does-setstate-do}
+### `setState` để làm gì? {#what-does-setstate-do}
 
 `setState()` lên lịch cập nhật cho một object `state` của component. Khi state thay đổi, component phản hồi bằng cách hiển thị lại.
 
@@ -14,7 +14,7 @@ category: FAQ
 
 [`props`](/docs/components-and-props.html) (viết tắt của "properties") và [`state`](/docs/state-and-lifecycle.html) đều là các object JavaScript đơn giản. Mặc dù cả hai đều nắm giữ thông tin ảnh hưởng đến kết quả hiển thị, nhưng chúng khác nhau ở một điểm quan trọng: `props` được chuyển *cho* component (tương tự như các tham số function) nhưng trái lại `state` được quản lý *trong* component (tương tự như các biến được khai báo trong một function).
 
-Dưới đây là một số tài nguyên tốt để đọc thêm về thời điểm sử dụng `props` so với `state`:
+Dưới đây là một số nguồn tốt để đọc thêm về thời điểm sử dụng `props` so với `state`:
 * [Props với State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
 * [ReactJS: Props với State](https://lucybain.com/blog/2016/react-state-vs-pros/)
 

From 202a789a570ca61a15384b630aa8db3d7a7df5c0 Mon Sep 17 00:00:00 2001
From: huykon225 <huykon225@gmail.com>
Date: Wed, 15 Sep 2021 11:14:01 +0700
Subject: [PATCH 19/32] update vietnamese text

---
 content/docs/portals.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 3fa6d678d..5f3be166f 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -27,7 +27,7 @@ render() {
 }
 ```
 
-Tuy nhiên, đôi khi sẽ hữu ích nếu chèn trẻ vào một vị trí khác trong DOM:
+Tuy nhiên, đôi khi sẽ hữu ích nếu chèn một phần tử con vào một vị trí khác trong DOM:
 
 ```js{6}
 render() {

From f50ca944d88e9de5bd515025573a0733ad877504 Mon Sep 17 00:00:00 2001
From: kctrnn <kctrnn@gmail.com>
Date: Wed, 15 Sep 2021 11:27:34 +0700
Subject: [PATCH 20/32] Update dont-call-prototypes

---
 content/warnings/dont-call-proptypes.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md
index c2b5d8e9f..5e6161470 100644
--- a/content/warnings/dont-call-proptypes.md
+++ b/content/warnings/dont-call-proptypes.md
@@ -10,7 +10,7 @@ permalink: warnings/dont-call-proptypes.html
 >
 >Chúng tôi cung cấp [tập lệnh codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) để tự động chuyển đổi.
 
-Trong một bản phát hành chính trong tương lai của React, mã thực hiện các chức năng xác thực PropType sẽ bị loại bỏ trong quá trình sản xuất. Khi điều này xảy ra, bất kỳ mã nào gọi các chức năng này theo cách thủ công (không bị loại bỏ trong quá trình sản xuất) sẽ gây ra lỗi.
+Trong một bản phát hành chính trong tương lai của React, code thực hiện các chức năng xác thực PropType sẽ bị loại bỏ trong quá trình sản xuất. Khi điều này xảy ra, bất kỳ code nào gọi các chức năng này theo cách thủ công (không bị loại bỏ trong quá trình sản xuất) sẽ gây ra lỗi.
 
 ### Khai báo PropTypes vẫn ổn {#declaring-proptypes-is-still-fine}
 
@@ -26,7 +26,7 @@ Không có gì thay đổi ở đây.
 
 ### Không gọi trực tiếp PropTypes {#dont-call-proptypes-directly}
 
-Sử dụng PropTypes theo bất kỳ cách nào khác ngoài việc chú thích các thành phần React với chúng không còn được hỗ trợ:
+Sử dụng PropTypes theo bất kỳ cách nào khác ngoài việc chú thích các React component với chúng không còn được hỗ trợ:
 
 ```javascript
 var apiShape = PropTypes.shape({
@@ -40,11 +40,11 @@ var error = apiShape(json, 'response');
 
 Nếu bạn phụ thuộc vào việc sử dụng PropTypes như thế này, chúng tôi khuyến khích bạn sử dụng hoặc tạo một nhánh của PropTypes (chẳng hạn như 2 gói này [aackerman/PropTypes](https://github.com/aackerman/PropTypes) [developit/proptypes](https://github.com/developit/proptypes)).
 
-Nếu bạn không khắc phục cảnh báo, mã này sẽ gặp sự cố trong quá trình sản xuất với React 16.
+Nếu bạn không khắc phục cảnh báo, code này sẽ gặp sự cố trong quá trình sản xuất với React 16.
 
 ### Nếu bạn không gọi trực tiếp cho PropTypes nhưng vẫn nhận được cảnh báo {#if-you-dont-call-proptypes-directly-but-still-get-the-warning}
 
-Kiểm tra dấu vết ngăn xếp được tạo ra bởi cảnh báo. Bạn sẽ thấy định nghĩa thành phần chịu trách nhiệm cho cuộc gọi trực tiếp PropTypes. Rất có thể, vấn đề là do PropTypes của bên thứ ba bao bọc React’s PropTypes, ví dụ:
+Kiểm tra stack trace được tạo ra bởi cảnh báo. Bạn sẽ thấy định nghĩa component chịu trách nhiệm cho cuộc gọi trực tiếp PropTypes. Rất có thể, vấn đề là do PropTypes của bên thứ ba bao bọc React’s PropTypes, ví dụ:
 
 ```js
 Button.propTypes = {
@@ -55,13 +55,13 @@ Button.propTypes = {
 }
 ```
 
-Trong trường hợp này, `ThirdPartyPropTypes.deprecated` là một trình bao bọc gọi `PropTypes.bool`. Bản thân mô hình này là tốt, nhưng kích hoạt dương tính giả vì React cho rằng bạn đang gọi trực tiếp PropTypes. Phần tiếp theo giải thích cách khắc phục sự cố này cho một thư viện triển khai thứ gì đó như `ThirdPartyPropTypes`. Nếu đó không phải là thư viện bạn đã viết, bạn có thể gửi vấn đề về thư viện đó.
+Trong trường hợp này, `ThirdPartyPropTypes.deprecated` là một trình bao bọc gọi `PropTypes.bool`. Bản thân mô hình này là tốt, nhưng kích hoạt false positive vì React cho rằng bạn đang gọi trực tiếp PropTypes. Phần tiếp theo giải thích cách khắc phục sự cố này cho một thư viện triển khai thứ gì đó như `ThirdPartyPropTypes`. Nếu đó không phải là thư viện bạn đã viết, bạn có thể gửi vấn đề về thư viện đó.
 
-### Sửa lỗi dương tính giả trong PropTypes của bên thứ ba {#fixing-the-false-positive-in-third-party-proptypes}
+### Sửa lỗi false positive trong PropTypes của bên thứ ba {#fixing-the-false-positive-in-third-party-proptypes}
 
-Nếu bạn là tác giả của thư viện PropTypes của bên thứ ba và bạn để người tiêu dùng bọc các React PropTypes hiện có, họ có thể bắt đầu thấy cảnh báo này đến từ thư viện của bạn. Điều này xảy ra vì React không thấy đối số cuối cùng "bí mật" mà nó [chuyển qua](https://github.com/facebook/react/pull/7132) để phát hiện các lệnh gọi PropTypes thủ công.
+Nếu bạn là tác giả của thư viện PropTypes của bên thứ ba và bạn để người tiêu dùng bọc các React PropTypes hiện có, họ có thể bắt đầu thấy cảnh báo này đến từ thư viện của bạn. Điều này xảy ra vì React không thấy đối số cuối cùng "bí mật" mà [nó chuyển qua](https://github.com/facebook/react/pull/7132) để phát hiện các lệnh gọi PropTypes thủ công.
 
-Đây là cách để sửa chữa nó. Chúng tôi sẽ sử dụng từ [react-bootstrap/react-prop-type](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) `không được dùng nữa` làm ví dụ. Việc triển khai hiện tại chỉ chuyển xuống các đối số `props`, `propName` và `componentName`:
+Đây là cách để sửa chữa nó. Chúng tôi sẽ sử dụng `deprecated` từ [react-bootstrap/react-prop-type](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) làm ví dụ. Việc triển khai hiện tại chỉ chuyển xuống các đối số `props`, `propName` và `componentName`:
 
 ```javascript
 export default function deprecated(propType, explanation) {
@@ -79,7 +79,7 @@ export default function deprecated(propType, explanation) {
 }
 ```
 
-Để sửa lỗi dương tính giả, hãy đảm bảo rằng bạn chuyển **tất cả** các đối số xuống PropType được bao bọc. Điều này rất dễ thực hiện với ký hiệu `...rest` của ES6:
+Để sửa lỗi false positive, hãy đảm bảo rằng bạn chuyển **tất cả** các đối số xuống PropType được bao bọc. Điều này rất dễ thực hiện với ký hiệu `...rest` của ES6:
 
 ```javascript
 export default function deprecated(propType, explanation) {

From 5af8ca26d2f923764809c3fff9657dfb308baf1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=C3=AAn=20Ary?= <nguyenary14@gmail.com>
Date: Wed, 15 Sep 2021 11:27:43 +0700
Subject: [PATCH 21/32] revert translate cdn link page

---
 content/docs/cdn-links.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md
index 61716456e..e357811de 100644
--- a/content/docs/cdn-links.md
+++ b/content/docs/cdn-links.md
@@ -6,32 +6,32 @@ prev: create-a-new-react-app.html
 next: release-channels.html
 ---
 
-Cả React và ReactDOM đều có sẵn trên CDN.
+Both React and ReactDOM are available over a CDN.
 
 ```html
 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
 ```
 
-Các phiên bản trên chỉ dành cho develop và không phù hợp cho production. Các phiên bản production thu nhỏ và tối ưu hóa của React có sẵn tại:
+The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
 
 ```html
 <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 ```
 
-Để tải một phiên bản cụ thể của `react` và `react-dom`, thay thế `17` với số phiên bản.
+To load a specific version of `react` and `react-dom`, replace `17` with the version number.
 
-### Tại sao lại có Thuộc Tính `crossorigin`? {#why-the-crossorigin-attribute}
+### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute}
 
-Nếu bạn phân phối React từ CDN, chúng tôi khuyên bạn nên giữ bộ thuộc tính [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes):
+If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
 
 ```html
 <script crossorigin src="..."></script>
 ```
 
-Chúng tôi cũng khuyên bạn nên xác minh rằng CDN bạn đang sử dụng đặt `Access-Control-Allow-Origin: *` HTTP header:
+We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
 
 ![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png)
 
-Điều này cho phép trải nghiệm [xử lý lỗi tốt hơn](/blog/2017/07/26/error-handling-in-react-16.html) trong React 16 trở lên.
+This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.

From 3433db9a34fc01b9927b6c899d919678ad2f224c Mon Sep 17 00:00:00 2001
From: cothvbdnnn <cothvbdnnn@gmail.com>
Date: Wed, 15 Sep 2021 11:43:30 +0700
Subject: [PATCH 22/32] Translate react-v0-4-1

---
 content/blog/2013-07-26-react-v0-4-1.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/blog/2013-07-26-react-v0-4-1.md b/content/blog/2013-07-26-react-v0-4-1.md
index 181bb09be..0287ac12a 100644
--- a/content/blog/2013-07-26-react-v0-4-1.md
+++ b/content/blog/2013-07-26-react-v0-4-1.md
@@ -3,22 +3,22 @@ title: "React v0.4.1"
 author: [zpao]
 ---
 
-React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.
+React v0.4.1 là một thay đổi nhỏ, hầu hết bao gồm các bản sửa lỗi về tính đúng đắn. Một số đoạn mã đã được cấu trúc lại bên trong nhưng những thay đổi đó không ảnh hưởng đến bất kỳ API công khai nào của chúng tôi.
 
 
 ## React {#react}
 
-* `setState` callbacks are now executed in the scope of your component.
-* `click` events now work on Mobile Safari.
-* Prevent a potential error in event handling if `Object.prototype` is extended.
-* Don't set DOM attributes to the string `"undefined"` on update when previously defined.
-* Improved support for `<iframe>` attributes.
-* Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
+* `setState` callback hiện đã có thể được thực thi trong phạm vi component của bạn.
+* `click` event hiện đã hoạt động trên Mobile Safari.
+* Ngăn lỗi tiềm ẩn trong xử lý sự kiện nếu `Object.prototype` được mở rộng.
+* Không đặt thuộc tính DOM thành chuỗi `"undefined"` trong lúc cập nhật khi được định nghĩa trước đó.
+* Cải thiện hỗ trợ cho các thuộc tính `<iframe>`.
+* Đã thêm checksum để phát hiện và sửa các trường hợp mà server-side hiển thị markup không khớp với những gì React mong đợi ở phía client-side.
 
 
 ## JSXTransformer {#jsxtransformer}
 
-* Improved environment detection so it can be run in a non-browser environment.
+* Cải thiện khả năng phát hiện môi trường để nó có thể chạy trong môi trường không có trình duyệt.
 
 
-[Download it now!](/downloads.html)
+[Tải xuống ngay bây giờ!](/downloads.html)

From 7dda1c175cf46771fc80cb156b377e50fbd40bb0 Mon Sep 17 00:00:00 2001
From: kctrnn <kctrnn@gmail.com>
Date: Wed, 15 Sep 2021 11:47:40 +0700
Subject: [PATCH 23/32] Update dont-call-prototypes 2

---
 content/warnings/dont-call-proptypes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md
index 5e6161470..c66fa6948 100644
--- a/content/warnings/dont-call-proptypes.md
+++ b/content/warnings/dont-call-proptypes.md
@@ -97,4 +97,4 @@ export default function deprecated(propType, explanation) {
 }
 ```
 
-Điều này sẽ tắt tiếng cảnh báo.
+Điều này sẽ giúp xoá warning ở console

From b1e4677cbf006854ea80ba55318d9a7b34b64991 Mon Sep 17 00:00:00 2001
From: Kim Chan <70143270+kctrnn@users.noreply.github.com>
Date: Wed, 15 Sep 2021 11:49:13 +0700
Subject: [PATCH 24/32] Add dot

---
 content/warnings/dont-call-proptypes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md
index c66fa6948..862a4c90a 100644
--- a/content/warnings/dont-call-proptypes.md
+++ b/content/warnings/dont-call-proptypes.md
@@ -97,4 +97,4 @@ export default function deprecated(propType, explanation) {
 }
 ```
 
-Điều này sẽ giúp xoá warning ở console
+Điều này sẽ giúp xoá warning ở console.

From bb8cb159fd212ec11a9774e63f50dbbe2f8741ac Mon Sep 17 00:00:00 2001
From: soraly <lequangnam1617@gmail.com>
Date: Wed, 15 Sep 2021 12:31:06 +0700
Subject: [PATCH 25/32] update translate testing.md

---
 content/docs/testing.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/testing.md b/content/docs/testing.md
index 147ff3683..4c9016f4f 100644
--- a/content/docs/testing.md
+++ b/content/docs/testing.md
@@ -7,12 +7,12 @@ redirect_from:
 next: testing-recipes.html
 ---
 
-Bạn có thể kiểm tra các React component tương tự như việc kiểm tra những code Javascript khác.
+Bạn có thể test các React components tương tự như việc test những code Javascript khác.
 
-Có một số cách để testing các React component. Nói chung, chúng được chia thành 2 thành phần:
+Có một số cách để testing các React component. Nói chung, chúng được chia thành 2 loại như sau:
 
-* **Rendering component trees** trong một môi trường test được đơn giản hóa và khẳng định trên kết quả đầu ra của chúng.
-* **Running a complete app** trong một môi trường trình duyệt thực tế (hay còn được gọi là “end-to-end” tests).
+* **Rendering những cây component** trong một môi trường test được đơn giản hóa và khẳng định trên kết quả đầu ra của chúng.
+* **Chạy một ứng dụng hoàn chỉnh** trong một môi trường trình duyệt thực tế (hay còn được gọi là “end-to-end” tests).
 
 Phần tài liệu này tập trung vào chiến lược testing cho trường hợp đầu tiên. Mặc dù các end-to-end tests đầy đủ có thể rất hữu ích để ngăn ngừa sự hồi quy
 đối với những luồng làm việc quan trọng, nhưng các tests đó không liên quan đến các React component nói chung, và nằm ngoài phạm vi của phần này.

From d49e3041d18df4a67874ad6c7a8a1c25a17ed833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hoa=CC=80ng=20Va=CC=86n=20Ho=CC=80a?=
 <45493195+hoangvanhoa1701@users.noreply.github.com>
Date: Wed, 15 Sep 2021 12:33:50 +0700
Subject: [PATCH 26/32] feat: translate React Without ES6 page

---
 content/docs/react-without-es6.md | 52 +++++++++++++++----------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md
index 8b54d0981..604003b96 100644
--- a/content/docs/react-without-es6.md
+++ b/content/docs/react-without-es6.md
@@ -1,10 +1,10 @@
 ---
 id: react-without-es6
-title: React Without ES6
+title: React Không Dùng ES6
 permalink: docs/react-without-es6.html
 ---
 
-Normally you would define a React component as a plain JavaScript class:
+Thông thường, bạn sẽ định nghĩa một React component như là một JavaScript class:
 
 ```javascript
 class Greeting extends React.Component {
@@ -14,7 +14,7 @@ class Greeting extends React.Component {
 }
 ```
 
-If you don't use ES6 yet, you may use the `create-react-class` module instead:
+Nếu bạn chưa sử dụng ES6, bạn có thể sử dụng `create-react-class` module để thay thế:
 
 
 ```javascript
@@ -26,11 +26,11 @@ var Greeting = createReactClass({
 });
 ```
 
-The API of ES6 classes is similar to `createReactClass()` with a few exceptions.
+API của các ES6 class tương tự như `createReactClass()` với một vài trường hợp ngoại lệ.
 
-## Declaring Default Props {#declaring-default-props}
+## Khai báo Props mặc định {#declaring-default-props}
 
-With functions and ES6 classes `defaultProps` is defined as a property on the component itself:
+Với các function và các ES6 class, `defaultProps` được định nghĩa như là một property trên chính component:
 
 ```javascript
 class Greeting extends React.Component {
@@ -42,7 +42,7 @@ Greeting.defaultProps = {
 };
 ```
 
-With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object:
+Với `createReactClass()`, bạn cần xác định `getDefaultProps()` như là một function trên đối tượng được truyền:
 
 ```javascript
 var Greeting = createReactClass({
@@ -57,9 +57,9 @@ var Greeting = createReactClass({
 });
 ```
 
-## Setting the Initial State {#setting-the-initial-state}
+## Cài đặt State ban đầu {#setting-the-initial-state}
 
-In ES6 classes, you can define the initial state by assigning `this.state` in the constructor:
+Trong các ES6 class, bạn cần định nghĩa state ban đầu bằng cách gán `this.state` bên trong constructor:
 
 ```javascript
 class Counter extends React.Component {
@@ -71,7 +71,7 @@ class Counter extends React.Component {
 }
 ```
 
-With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
+Với `createReactClass()`, bạn phải cung cấp một `getInitialState` method trả về state ban đầu::
 
 ```javascript
 var Counter = createReactClass({
@@ -84,7 +84,7 @@ var Counter = createReactClass({
 
 ## Autobinding {#autobinding}
 
-In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor:
+Trong các React component được khai báo như là các ES6 class, các method tuân theo ngữ nghĩa giống như các ES6 class thông thường. Điều này có nghĩa là chúng không tự động bind `this` đến instance. Bạn sẽ phải sử dụng rõ ràng `.bind(this)` bên trong constructor:
 
 ```javascript
 class SayHello extends React.Component {
@@ -110,7 +110,7 @@ class SayHello extends React.Component {
 }
 ```
 
-With `createReactClass()`, this is not necessary because it binds all methods:
+Với `createReactClass()`, điều này là không cần thiết vì nó sẽ bind tất cả các method:
 
 ```javascript
 var SayHello = createReactClass({
@@ -132,9 +132,9 @@ var SayHello = createReactClass({
 });
 ```
 
-This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
+Điều này có nghĩa là viết các ES6 class đi kèm với một chút code soạn sẵn cho các trình xử lý event, nhưng mặt trái của nó là performance tốt hơn một chút trong các ứng dụng lớn.
 
-If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel:
+Nếu code soạn sẵn quá không hấp dẫn đối với bạn, bạn có thể bật **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal với Babel:
 
 
 ```javascript
@@ -159,27 +159,27 @@ class SayHello extends React.Component {
 }
 ```
 
-Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language.
+Xin lưu ý rằng cú pháp ở trên là **experimental** và cú pháp có thể thay đổi, hoặc đề xuất có thể không biến nó thành ngôn ngữ.
 
-If you'd rather play it safe, you have a few options:
+Nếu bạn muốn an toàn hơn, bạn có thể có một số lựa chọn bên dưới:
 
-* Bind methods in the constructor.
-* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
-* Keep using `createReactClass`.
+* Bind methods bên trong constructor.
+* Sử dụng arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
+* Tiếp tục sử dụng `createReactClass`.
 
 ## Mixins {#mixins}
 
->**Note:**
+>**Ghi chú:**
 >
->ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
+>ES6 ra mắt mà không có bất kỳ hỗ trợ mixin nào. Do đó, sẽ không có hỗ trợ cho các mixin khi bạn sử dụng React với các ES6 class.
 >
->**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/blog/2016/07/13/mixins-considered-harmful.html).**
+>**Chúng tôi cũng tìm thấy nhiều vấn đề trong các codebase sử dụng các mixin [và không khuyên bạn sử dụng chúng trong code mới](/blog/2016/07/13/mixins-considered-harmful.html).**
 >
->This section exists only for the reference.
+>Phần này chỉ để tham khảo.
 
-Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` lets you use a legacy `mixins` system for that.
+Đôi khi các component rất khác nhau có thể chia sẻ một số chức năng chung. Đây đôi khi được gọi là [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` cho phép bạn sử dụng hệ thống `mixins` kế thừa cho việc đó.
 
-One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/react-component.html#the-component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
+Một trường hợp sử dụng phổ biến là một component muốn tự cập nhật trong một khoảng thời gian (time interval). Thật dễ dàng để sử dụng `setInterval()`, nhưng điều quan trọng là phải hủy interval của bạn khi bạn không cần nó nữa để tiết kiệm bộ nhớ. React cung cấp các [lifecycle methods](/docs/react-component.html#the-component-lifecycle) cho bạn biết khi nào một component sắp được tạo hoặc bị phá hủy. Hãy tạo một mixin đơn giản sử dụng các method này để cung cấp một `setInterval()` function dễ dàng sẽ tự động được dọn dẹp khi component của bạn bị phá hủy.
 
 ```javascript
 var SetIntervalMixin = {
@@ -222,4 +222,4 @@ ReactDOM.render(
 );
 ```
 
-If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
+Nếu một component đang sử dụng nhiều mixin và một số mixin xác định cùng một lifecycle method (tức là một số mixin muốn thực hiện một số dọn dẹp khi component bị phá hủy), tất cả các lifecycle method được đảm bảo sẽ được gọi. Các method được xác định trên các mixin chạy theo thứ tự các mixin được liệt kê, theo sau là một lệnh gọi method trên component.

From 430e060c6604f654660ca3905512757e9f217877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ph=E1=BA=A1m=20Quang=20H=E1=BB=AFu?=
 <qhuu.official@gmail.com>
Date: Wed, 15 Sep 2021 12:41:42 +0700
Subject: [PATCH 27/32] faq-internals translate

---
 content/docs/faq-internals.md | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md
index da7f96be0..5e02b862f 100644
--- a/content/docs/faq-internals.md
+++ b/content/docs/faq-internals.md
@@ -6,18 +6,17 @@ layout: docs
 category: FAQ
 ---
 
-### What is the Virtual DOM? {#what-is-the-virtual-dom}
+### Virtual DOM là gì?{#what-is-the-virtual-dom}
 
-The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called [reconciliation](/docs/reconciliation.html).
+Virtual DOM (VDOM) là một khái niệm lập trình trong đó dạng đại diện tiêu chuẩn, hoặc đại diện "ảo" của giao diện người dùng sẽ được lưu trong bộ nhớ và được đồng bộ hóa với DOM "thật" bởi một dạng thư viện như là ReactDOM. Quá trình đó được gọi là [reconciliation](https://reactjs.org/docs/reconciliation.html).
 
-This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
+Cách tiếp cận này kích hoạt API khai báo của React: Bạn cho React biết bạn muốn giao diện người dùng ở trạng thái nào và nó đảm bảo DOM khớp với trạng thái đó. Nhờ vậy sẽ rút gọn thao tác thuộc tính, xử lý sự kiện, và cập nhật DOM thủ công, tất cả mọi thứ bạn cần phải làm để xây dựng ứng dụng của mình.
 
-Since "virtual DOM" is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term "virtual DOM" is usually associated with [React elements](/docs/rendering-elements.html) since they are the objects representing the user interface. React, however, also uses internal objects called "fibers" to hold additional information about the component tree. They may also be considered a part of "virtual DOM" implementation in React.
+Vì "virtual DOM" giống một kiểu mẫu có sẵn hơn là một công nghệ cụ thể, nên đôi khi mọi người nói nó có một ý nghĩa khác. Trong thế giới React, thuật ngữ "virtual DOM" thường được kết hợp với các phần tử React vì chúng là các đối tượng đại diện cho giao diện người dùng. Tuy nhiên, các phần tử của React cũng sử dụng các đối tượng bên trong, hay còn gọi là "sợi", để giữ thông tin bổ sung theo sơ đồ cây. Chúng cũng có thể được coi là một phần của việc triển khai "virtual DOM" trong React.
+### Shadow DOM có giống Virtual DOM không? {#is-the-shadow-dom-the-same-as-the-virtual-dom}
 
-### Is the Shadow DOM the same as the Virtual DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom}
+Không, chúng khác nhau. Shadow DOM là một công nghệ trình duyệt được thiết kế chủ yếu cho các Variable Scope(phạm vi của biến) và CSS trong các thành web(components). Virtual DOM là một khái niệm được thực hiện bởi các thư viện bằng JavaScript trên các API của trình duyệt.
 
-No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
+### "React Fiber" là gì? {#what-is-react-fiber}
 
-### What is "React Fiber"? {#what-is-react-fiber}
-
-Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM. [Read more](https://github.com/acdlite/react-fiber-architecture).
+React Fiber là bản tái cấu trúc thuật toán nền tảng của React trong React 16. Mục tiêu của React Fiber là tăng cường khả năng thích ứng với một số khía cạnh như hoạt ảnh (animation), bố cục (layout) hay cử chỉ (gestures). [Read more](https://github.com/acdlite/react-fiber-architecture).

From 753aa520215b99117df0a11b458fe1e7450e672c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Va=CC=86n=20Du=CC=83ng?= <>
Date: Wed, 15 Sep 2021 13:00:35 +0700
Subject: [PATCH 28/32] Translate Portals page

---
 content/docs/portals.md | 74 ++++++++++++++++++++---------------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 16e90b2e6..42f3d94a3 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -4,21 +4,21 @@ title: Portals
 permalink: docs/portals.html
 ---
 
-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+Portals cung cấp một cách render các phần tử DOM bên ngoài phân cấp của DOM chính.
 
 ```js
 ReactDOM.createPortal(child, container)
 ```
 
-The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
+Tham số đầu tiên (`child`) là bất bỳ [thành phần có thể render của React](/docs/react-component.html#render), như là element, string, hoặc fragment. Tham số thứ hai (`container`) là một DOM element.
 
-## Usage {#usage}
+## Cách dùng {#usage}
 
-Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
+Thông thường, khi bạn trả về một phần tử từ phương thức render của một component, nó sẽ được gắn vào DOM dưới dạng phần tử con của nút cha gần nhất:
 
 ```js{4,6}
 render() {
-  // React mounts a new div and renders the children into it
+  // React tạo một thẻ div mới và render các phần tử con vào trong thẻ div đó:
   return (
     <div>
       {this.props.children}
@@ -27,12 +27,12 @@ render() {
 }
 ```
 
-However, sometimes it's useful to insert a child into a different location in the DOM:
+Tuy nhiên, đôi khi sẽ thuận tiện hơn nếu chèn phần tử con đó vào một vị trí khác trong DOM:
 
 ```js{6}
 render() {
-  // React does *not* create a new div. It renders the children into `domNode`.
-  // `domNode` is any valid DOM node, regardless of its location in the DOM.
+  // React *không* tạo mới thẻ div. Nó render phần tử con vào `domNode`.
+  // `domNode` là bất kỳ phần tử DOM hợp lệ nào, ở bất kỳ vị trí nào trong DOM.
   return ReactDOM.createPortal(
     this.props.children,
     domNode
@@ -40,21 +40,21 @@ render() {
 }
 ```
 
-A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
+Một trường hợp thưởng dùng Portals là khi một thành phần mẹ có thuộc tính `overflow: hidden` hoặc `z-index`, nhưng bạn muốn hiển thị nó một cách "độc lập" khỏi thành phần mẹ. Ví dụ, các hộp thoại (dialogs), hovercards, và tooltips.
 
-> Note:
+> Lưu ý:
 >
-> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important.
+> Khi làm việc với Portals, hãy nhớ [quản lý các sự kiện focus từ bàn phím](/docs/accessibility.html#programmatically-managing-focus) là rất quan trọng.
 >
-> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
+> Đối với hộp thoại, hãy đảm bảo rằng mọi người có thể tương tác với chúng bằng cách làm theo [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
 
-## Event Bubbling Through Portals {#event-bubbling-through-portals}
+## Xử lý sự kiện ở Portals {#event-bubbling-through-portals}
 
-Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*.
+Mặc dù Portals có thể ở bất kỳ đâu trong cây DOM, nhưng theo mọi cách khác, nó hoạt động giống như một React component bình thường. Các tính năng như context hoạt động giống hệt nhau bất kể component đó có phải là Portals hay không, vì Portals vẫn tồn tại trong *React tree* bất kể vị trí nào trong *DOM tree*.
 
-This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure:
+Bao gồm các event bubbling. Một sự kiện được kích hoạt từ bên trong Portals sẽ truyền đến tất node cha trong *React tree* chứa portals đó, ngay cả khi những phần tử đó không phải là node cha trong *DOM tree*. Giả sử với cấu trúc HTML sau:
 
 ```html
 <html>
@@ -65,10 +65,10 @@ This includes event bubbling. An event fired from inside a portal will propagate
 </html>
 ```
 
-A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
+Một phần tử `Parent` trong `#app-root` sẽ có thể bắt được một bubbling event chưa được bắt từ sibling node `#modal-root`.
 
 ```js{28-31,42-49,53,61-63,70-71,74}
-// These two containers are siblings in the DOM
+// Đây là 2 container cùng cấp trong DOM
 const appRoot = document.getElementById('app-root');
 const modalRoot = document.getElementById('modal-root');
 
@@ -79,14 +79,14 @@ class Modal extends React.Component {
   }
 
   componentDidMount() {
-    // The portal element is inserted in the DOM tree after
-    // the Modal's children are mounted, meaning that children
-    // will be mounted on a detached DOM node. If a child
-    // component requires to be attached to the DOM tree
-    // immediately when mounted, for example to measure a
-    // DOM node, or uses 'autoFocus' in a descendant, add
-    // state to Modal and only render the children when Modal
-    // is inserted in the DOM tree.
+    // Phần tử Portals được chèn vào cây DOM sau khi
+    // phần tử con của Modal được hiển thị, có nghĩa là những phần tử con đó
+    // sẽ được gắn trên một phần tử DOM tách rời độc lập. Nếu một phần tử con
+    // yêu cầu được gắn vào DOM tree ngay tức khắc khi 'mounted',
+    // ví dụ để đo lường thuộc tính DOM, hoặc sử dụng 'autoFocus' 
+    // trong các phần tử con, thêm state vào Modal và
+    // chỉ render các phẩn tử con khi Modal
+    // được chèn vào DOM tree.
     modalRoot.appendChild(this.el);
   }
 
@@ -110,9 +110,9 @@ class Parent extends React.Component {
   }
 
   handleClick() {
-    // This will fire when the button in Child is clicked,
-    // updating Parent's state, even though button
-    // is not direct descendant in the DOM.
+    // Hàm này sẽ kích hoạt khi button tại Child được click,
+    // cập nhật Parent's state, mặc dù button
+    // không phải là phần tử con trực tiếp trong DOM.
     this.setState(state => ({
       clicks: state.clicks + 1
     }));
@@ -121,12 +121,12 @@ class Parent extends React.Component {
   render() {
     return (
       <div onClick={this.handleClick}>
-        <p>Number of clicks: {this.state.clicks}</p>
+        <p>Số lượng clicks: {this.state.clicks}</p>
         <p>
-          Open up the browser DevTools
-          to observe that the button
-          is not a child of the div
-          with the onClick handler.
+          Mở DevTools của trình duyệt
+          để quan sát rằng button
+          không phải con của div
+          xử lý sự kiện onClick.
         </p>
         <Modal>
           <Child />
@@ -137,8 +137,8 @@ class Parent extends React.Component {
 }
 
 function Child() {
-  // The click event on this button will bubble up to parent,
-  // because there is no 'onClick' attribute defined
+  // Sự kiện nhấp chuột vào nút này sẽ xuất hiện đối với phần tử cha chứa nó
+  // bởi vì không có thuộc tính 'onClick' được định nghĩa
   return (
     <div className="modal">
       <button>Click</button>
@@ -149,6 +149,6 @@ function Child() {
 ReactDOM.render(<Parent />, appRoot);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
+[**Thử trên CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
 
-Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.
+Việc nắm bắt một sự kiện xảy ra từ một Portals trong một component cha cho phép phát triển các tính năng trừu tượng linh hoạt hơn vốn không phụ thuộc vào các Portals. Ví dụ, nếu bạn render một phần tử `<Modal />` , thành phần cha có thể nhận được các sự kiện của nó dù cho nó có được triển khai bằng portals hay không.

From 62d30fc023e0d1630466fd8ff54ba99ffdf82fef Mon Sep 17 00:00:00 2001
From: trung1308 <trung13082000@gmail.com>
Date: Wed, 15 Sep 2021 13:07:21 +0700
Subject: [PATCH 29/32] translate legacy-factory

---
 content/warnings/legacy-factories.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md
index a99d22e2f..acc815cfe 100644
--- a/content/warnings/legacy-factories.md
+++ b/content/warnings/legacy-factories.md
@@ -4,7 +4,7 @@ layout: single
 permalink: warnings/legacy-factories.html
 ---
 
-You probably came here because your code is calling your component as a plain function call. This is now deprecated:
+Bạn có thể đã đến đây bởi vì đoạn mã của bạn đang gọi thành phần (component) như một cách gọi hàm đơn giản. Cách này bây giờ đã không còn sử dụng nữa:
 
 ```javascript
 var MyComponent = require('MyComponent');
@@ -16,7 +16,7 @@ function render() {
 
 ## JSX {#jsx}
 
-React components can no longer be called directly like this. Instead [you can use JSX](/docs/jsx-in-depth.html).
+React components không còn được gọi một cách trực tiếp như vầy. Thay vào đó [bạn có thể sử dụng JSX](/docs/jsx-in-depth.html).
 
 ```javascript
 var React = require('react');
@@ -27,9 +27,9 @@ function render() {
 }
 ```
 
-## Without JSX {#without-jsx}
+## Không sử dụng JSX {#without-jsx}
 
-If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it:
+Nếu bạn không muốn, hoặc không thể sử dụng JSX, thì bạn sẽ cần bọc thành phần (component) của bạn trong một factory trước khi gọi nó:
 
 ```javascript
 var React = require('react');
@@ -40,11 +40,11 @@ function render() {
 }
 ```
 
-This is an easy upgrade path if you have a lot of existing function calls.
+Đây là một cách nâng cấp dễ dàng nếu bạn đã có nhiều lời gọi hàm (function call) tồn tại.
 
-## Dynamic components without JSX {#dynamic-components-without-jsx}
+## Những thành phần động mà không có JSX {#dynamic-components-without-jsx}
 
-If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline:
+Nếu bạn lấy được một class component từ mã nguồn động, thì không cần thiết tạo một factory cái mà bạn thực hiện một cách tức thì. Thay vào đó, bạn chỉ cần tạo những phần tử nội tuyến:
 
 ```javascript
 var React = require('react');
@@ -54,6 +54,6 @@ function render(MyComponent) {
 }
 ```
 
-## In Depth {#in-depth}
+## Chuyên sâu {#in-depth}
 
-[Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)
+[Đọc thêm về TẠI SAO chúng tôi thực hiện thay đổi này.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)

From 0c83675e1bb8e7e6d6c2f70fc6b5acecb71c951a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hoa=CC=80ng=20Va=CC=86n=20Ho=CC=80a?=
 <45493195+hoangvanhoa1701@users.noreply.github.com>
Date: Wed, 15 Sep 2021 13:17:28 +0700
Subject: [PATCH 30/32] feat: translate React Without JSX page

---
 content/docs/react-without-jsx.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md
index 95a5ca967..477c445ce 100644
--- a/content/docs/react-without-jsx.md
+++ b/content/docs/react-without-jsx.md
@@ -1,14 +1,14 @@
 ---
 id: react-without-jsx
-title: React Without JSX
+title: React Không Dùng JSX
 permalink: docs/react-without-jsx.html
 ---
 
-JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.
+JSX không phải là một yêu cầu bắt buộc để sử dụng React. Sử dụng React mà không dùng JSX đặc biệt thuận tiện khi bạn không muốn thiết lập compilation trong môi trường build của bạn.
 
-Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript.
+Mỗi phần tử JSX chỉ là một syntactic sugar để gọi `React.createElement(component, props, ...children)`. Vì vậy, bất cứ điều gì bạn có thể làm với JSX thì cũng có thể thực hiện được chỉ với JavaScript đơn giản.
 
-For example, this code written with JSX:
+Ví dụ, đoạn code này được viết bằng JSX:
 
 ```js
 class Hello extends React.Component {
@@ -23,7 +23,7 @@ ReactDOM.render(
 );
 ```
 
-can be compiled to this code that does not use JSX:
+có thể được biên dịch thành đoạn code bên dưới, không sử dụng JSX:
 
 ```js
 class Hello extends React.Component {
@@ -38,11 +38,11 @@ ReactDOM.render(
 );
 ```
 
-If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+Nếu bạn tò mò muốn xem thêm các ví dụ về cách JSX được chuyển đổi sang JavaScript, bạn có thể thử [trình biên dịch Babel online](babel://jsx-simple-example).
 
-The component can either be provided as a string, as a subclass of `React.Component`, or a plain function.
+Component có thể được cung cấp dưới dạng một string, dưới dạng subclass của `React.Component` hoặc một function thuần túy.
 
-If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
+Nếu bạn cảm thấy mệt mỏi với việc gõ `React.createElement` quá nhiều, một pattern phổ biến là hãy gán cho một biến và dùng nó như dạng viết tắt:
 
 ```js
 const e = React.createElement;
@@ -53,7 +53,7 @@ ReactDOM.render(
 );
 ```
 
-If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX.
+Nếu bạn sử dụng dạng viết tắt này cho `React.createElement`, thì việc sử dụng React mà không có JSX có thể rất thuận tiện.
 
-Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax.
+Ngoài ra, bạn có thể tham khảo các dự án cộng đồng như [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) và [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) sẽ cung cấp cho bạn cú pháp ngắn gọn hơn.
 

From 1385082499e79a9e298973032bed80898e8acaa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ph=E1=BA=A1m=20Quang=20H=E1=BB=AFu?=
 <qhuu.official@gmail.com>
Date: Wed, 15 Sep 2021 13:31:21 +0700
Subject: [PATCH 31/32] addons-create-fragment.md translate

---
 content/docs/addons-create-fragment.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/addons-create-fragment.md b/content/docs/addons-create-fragment.md
index 7c5fc9fda..dd8609a90 100644
--- a/content/docs/addons-create-fragment.md
+++ b/content/docs/addons-create-fragment.md
@@ -6,11 +6,11 @@ layout: docs
 category: Add-Ons
 ---
 
-> Note:
+> Chú ý:
 >
-> `React.addons` entry point is deprecated as of React v15.5. We now have first class support for fragments which you can read about [here](/docs/fragments.html).
+> `React.addons` entry point không được dùng kể từ React v15.5. Hiện đã có hỗ trợ tốt nhất, bạn có thể đọc thêm tại  [đây](/docs/fragments.html).
 
-## Importing {#importing}
+## Tiến hành triển khai {#importing}
 
 ```javascript
 import createFragment from 'react-addons-create-fragment'; // ES6
@@ -19,9 +19,9 @@ var createFragment = require('react-addons-create-fragment'); // ES5 with npm
 
 ## Overview {#overview}
 
-In most cases, you can use the `key` prop to specify keys on the elements you're returning from `render`. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there's no way to put a key on each set without adding a wrapper element.
+Trong hầu hết các trường hợp, bạn sẽ sử dụng `key` để hỗ trợ chỉ định các khóa trên các phần từ mà bạn đang trả về sau khi `render`. Tuy nhiên, điều này phá phỡ một trường hợp: nếu bạn có hai nhóm con cần sắp xếp lại, ta sẽ không có cách nào để đặt một khóa trên mỗi tập hợp mà không thêm một wrapper element.
 
-That is, if you have a component such as:
+Nếu bạn có một component như sau:
 
 ```js
 function Swapper(props) {
@@ -35,13 +35,13 @@ function Swapper(props) {
 }
 ```
 
-The children will unmount and remount as you change the `swapped` prop because there aren't any keys marked on the two sets of children.
+Các nhóm con sẽ ngắt kết nối và liên kết lại khi bạn thay đổi `swapped` vì không có bất kỳ khóa nào được đánh dấu trên hai nhóm con.
 
-To solve this problem, you can use the `createFragment` add-on to give keys to the sets of children.
+Để giải quyết vấn đề này, bạn có thể sử dụng `createFragment` để bổ sung khóa cho các nhóm con.
 
 #### `Array<ReactNode> createFragment(object children)` {#arrayreactnode-createfragmentobject-children}
 
-Instead of creating arrays, we write:
+Thay vì tạo mảng, chúng ta sẽ làm như sau:
 
 ```javascript
 import createFragment from 'react-addons-create-fragment';
@@ -63,6 +63,6 @@ function Swapper(props) {
 }
 ```
 
-The keys of the passed object (that is, `left` and `right`) are used as keys for the entire set of children, and the order of the object's keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.
+Các khóa sẽ được truyền vào đối tượng (đấy là `left` và `right`) được sử dụng để làm chìa khóa cho các nhóm con, và thứ tự các khóa của đối tượng được sử dụng để xác định thứ tự của các nhóm con được hiển thị. Với thay đổi này, hai nhóm con sẽ được sắp xếp lại đúng thứ tự trong DOM mà không cần ngắt kết nối.
 
-The return value of `createFragment` should be treated as an opaque object; you can use the [`React.Children`](/docs/react-api.html#react.children) helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.
+Giá trị trả về của `createFragment` nên được coi là một đối tượng mờ đục; bạn có thể dùng [`React.Children`](/docs/react-api.html#react.children) để lặp qua một đoạn nhưng không nên truy cập trực tiếp vào nó. Chú ý rằng chúng ta đang dùng Javascript để bảo toàn thứ tự các đối tượng được liệt kê, thứ tự này không được đảm bảo bởi thông số kỹ thuật nhưng được triển khai bởi tất cả các trình duyệt và máy ảo cho các đối tượng có khóa không phải là số.

From 4ad2297863ed9535c88e1dac6f5a89614e3e3ff9 Mon Sep 17 00:00:00 2001
From: nguyentran-se <nguyentranfw@gmail.com>
Date: Wed, 15 Sep 2021 13:48:33 +0700
Subject: [PATCH 32/32] translate docs/web-components

---
 content/docs/web-components.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/content/docs/web-components.md b/content/docs/web-components.md
index 1c5dcd278..d4fb548cd 100644
--- a/content/docs/web-components.md
+++ b/content/docs/web-components.md
@@ -6,11 +6,11 @@ redirect_from:
   - "docs/webcomponents.html"
 ---
 
-React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems.  Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.
+React và [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) được xây dựng để giải quyết những vấn đề khác nhau. Web Components cung cấp sự đóng gói mạnh mẽ cho việc tái sử dụng components, trong khi đó React cung cấp một thư viện khai báo giữ DOM đồng bộ với dữ liệu của bạn. Hai mục tiêu này bổ trợ cho nhau. Là một developer, bạn có quyền sử dụng React trong Web Components của bạn, hoặc sử dụng Web Components trong React, hoặc cả hai.
 
-Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
+Hầu hết những người sử dụng React thì không sử dụng Web Components, nhưng bạn có thể muốn sử dụng, đặc biệt là khi bạn đang sử dụng UI components của bên thứ ba được viết bằng Web Components.
 
-## Using Web Components in React {#using-web-components-in-react}
+## Sử dụng Web Components trong React {#using-web-components-in-react}
 
 ```javascript
 class HelloMessage extends React.Component {
@@ -20,14 +20,14 @@ class HelloMessage extends React.Component {
 }
 ```
 
-> Note:
+> Chú ý:
 >
-> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
+> Web Components thường có các imperative API. Ví dụ, một `video` Web Component có thể có các hàm `play()` và `pause()`. Để tiếp cận các imperative APIs của một Web Component, bạn sẽ cần sử dụng một ref để tương tác với DOM node trực tiếp. Nếu bạn đang sử dụng Web Components của bên thứ ba, giải pháp tốt nhất là viết một React component vận hành như một vỏ bọc cho Web Component của bạn.
 >
-> Events emitted by a Web Component may not properly propagate through a React render tree.
-> You will need to manually attach event handlers to handle these events within your React components.
+> Events được phát ra bởi một Web Component có thể không được truyền đúng cách qua React render tree.
+> Bạn sẽ cần gán một cách thủ công các event handlers để xử lí các events bên trong React components của bạn.
 
-One common confusion is that Web Components use "class" instead of "className".
+Một sự nhầm lẫn phổ biến là Web Component sử dụng "class" thay vì "className".
 
 ```javascript
 function BrickFlipbox() {
@@ -40,7 +40,7 @@ function BrickFlipbox() {
 }
 ```
 
-## Using React in your Web Components {#using-react-in-your-web-components}
+## Sử dụng React trong Web Components của bạn {#using-react-in-your-web-components}
 
 ```javascript
 class XSearch extends HTMLElement {
@@ -56,7 +56,7 @@ class XSearch extends HTMLElement {
 customElements.define('x-search', XSearch);
 ```
 
->Note:
+>Chú ý:
 >
->This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion.
->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.
+>Đoạn code này **sẽ không** hoạt động nếu bạn thay đổi classes với Babel. Xem [vấn đề này](https://github.com/w3c/webcomponents/issues/587) về việc thảo luận.
+>Include [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) trước khi bạn tải web components để khắc phục vấn đề này.