Merge branch 'main' into 2013-06-05-why-react.md

Author: Huynt-dev

.gitignore

@@ -1,6 +1,7 @@
 .cache
 .DS_STORE
 .idea
+.history
 node_modules
 public
 yarn-error.log

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.
 

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>

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)

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**.

content/blog/2021-06-08-the-plan-for-react-18.md

@@ -11,43 +11,43 @@ 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`.
 
 These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app.
 
 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!
 
 **The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog.
 
 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).
 
 Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community.
 
 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.
 

content/docs/addons-two-way-binding-helpers.md

@@ -17,25 +17,25 @@ import LinkedStateMixin from 'react-addons-linked-state-mixin'; // ES6
 var LinkedStateMixin = require('react-addons-linked-state-mixin'); // ES5 with npm
 ```
 
-## Overview {#overview}
+## Tổng quan {#overview}
 
-`LinkedStateMixin` is an easy way to express two-way binding with React.
+`LinkedStateMixin` là một cách đơn giản để thể hiện ràng buộc (binding) hai chiều với React..
 
-In React, data flows one way: from owner to child. We think that this makes your app's code easier to understand. You can think of it as "one-way data binding."
+Trong React, dữ liệu chạy theo một chiều: từ cha sang con. Chúng tôi nghĩ rằng điều này làm cho code của bạn trong ứng dụng dễ hiểu hơn. Bạn có thể coi nó là "ràng buộc (binding) dữ liệu một chiều".
 
-However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
+Tuy nhiên, có rất nhiều trường hợp ứng dụng yêu cầu bạn đọc một số dữ liệu đầu vào và đổ nó quay lại chương trình của bạn. Ví dụ: khi tạo forms, bạn thường muốn cập nhật một số `state` của React khi nhận được thông tin đầu vào của người dùng. Hoặc có lẽ bạn muốn thực hiện layout trong JavaScript và react sẽ thay đổi một số kích thước phần tử DOM.
 
-In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](/docs/forms.html) for more information.
+Trong React, bạn sẽ triển khai điều này bằng cách lắng nghe sự kiện "event", đọc từ nguồn dữ liệu của bạn (thường là DOM) và gọi `setState()` trên một trong các components. "Dừng vòng lặp dữ liệu" cho ra các chương trình dễ hiểu hơn và dễ bảo trì hơn. Xem [our forms documentation](/docs/forms.html) để biết thêm chi tiết.
 
-Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `LinkedStateMixin`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`.
+Ràng buộc hai chiều -- ngầm thực thi rằng một số giá trị trong DOM luôn nhất quán với một số khác trong React `state` -- ngắn gọn và hỗ trợ nhiều ứng dụng. Chúng tôi đã cung cấp `LinkedStateMixin`: cú pháp để thiết lập mẫu vòng lặp luồng dữ liệu chung được mô tả ở trên, hoặc "kết nối" một số nguồn dữ liệu tới React `state`.
 
 > Note:
 >
-> `LinkedStateMixin` is just a thin wrapper and convention around the `onChange`/`setState()` pattern. It doesn't fundamentally change how data flows in your React application.
+> `LinkedStateMixin` chỉ là một lớp vỏ và quy ước xung quanh `onChange`/`setState()`. Về cơ bản, nó không thay đổi cách dữ liệu hoạt động trong ứng dụng React của bạn.
 
-## LinkedStateMixin: Before and After {#linkedstatemixin-before-and-after}
+## LinkedStateMixin: Trước và sau {#linkedstatemixin-before-and-after}
 
-Here's a simple form example without using `LinkedStateMixin`:
+Đây là một ví dụ về biểu mẫu đơn giản mà không cần sử dụng `LinkedStateMixin`:
 
 ```javascript
 var createReactClass = require('create-react-class');
@@ -54,7 +54,7 @@ var NoLink = createReactClass({
 });
 ```
 
-This works really well and it's very clear how data is flowing, however, with a lot of form fields it could get a bit verbose. Let's use `LinkedStateMixin` to save us some typing:
+Điều này thực sự hoạt động tốt và rất rõ ràng về cách dữ liệu đang hoạt động, tuy nhiên, với nhiều trường biểu mẫu, nó có thể hơi dài dòng. Hãy dùng `LinkedStateMixin` để tiết kiệm thời gian viết:
 
 ```javascript{4,9}
 var createReactClass = require('create-react-class');
@@ -70,18 +70,18 @@ var WithLink = createReactClass({
 });
 ```
 
-`LinkedStateMixin` adds a method to your React component called `linkState()`. `linkState()` returns a `valueLink` object which contains the current value of the React state and a callback to change it.
+`LinkedStateMixin` thêm một phương thức vào thành phần React của bạn được gọi là `linkState()`. `linkState()` trả về một `valueLink` đối tượng chứa giá trị hiện tại của React và một lệnh gọi lại để thay đổi trạng thái của nó.
 
-`valueLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
+`valueLink` object có thể được đưa lên và xuống "tree" làm props, vì vậy nó dễ dàng (và rõ ràng) dùng để thiết lập ràng buộc hai chiều giữa một thành phần nằm sâu trong hệ thống phân cấp và trạng thái tồn tại cao hơn trong hệ thống phân cấp.
 
-Note that checkboxes have a special behavior regarding their `value` attribute, which is the value that will be sent on form submit if the checkbox is checked (defaults to `on`). The `value` attribute is not updated when the checkbox is checked or unchecked. For checkboxes, you should use `checkedLink` instead of `valueLink`:
+Lưu ý rằng checkboxes có một hình thức đặc biệt liên quan đến thuộc tính `value`, là giá trị sẽ được truyền đi khi gửi biểu mẫu nếu checkboxes được chọn (mặc định là `on`). Thuộc tính `value` không được cập nhật khi hộp kiểm được chọn hoặc bỏ chọn. Đối với checkboxes, bạn nên dùng `checkedLink` thay cho `valueLink`:
 ```
 <input type="checkbox" checkedLink={this.linkState('booleanValue')} />
 ```
 
 ## Under the Hood {#under-the-hood}
 
-There are two sides to `LinkedStateMixin`: the place where you create the `valueLink` instance and the place where you use it. To prove how simple `LinkedStateMixin` is, let's rewrite each side separately to be more explicit.
+Có hai mặt trong `LinkedStateMixin`: nơi bạn tạo ra `valueLink` và nơi bạn sử dụng nó. Để chứng minh một cách đơn giản `LinkedStateMixin` là gì, hãy viết lại từng cái một để rõ ràng hơn.
 
 ### valueLink Without LinkedStateMixin {#valuelink-without-linkedstatemixin}
 
@@ -105,7 +105,7 @@ var WithoutMixin = createReactClass({
 });
 ```
 
-As you can see, `valueLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
+Bạn có thể thấy, đối tượng `valueLink` là những đối tượng rất đơn giản chỉ có `value` và `requestChange`. Và `LinkedStateMixin` tương tự đơn giản như: nó chỉ điền vào các trường đó một giá trị từ `this.state` và một "callback" để gọi lại `this.setState()`.
 
 ### LinkedStateMixin Without valueLink {#linkedstatemixin-without-valuelink}
 
@@ -128,4 +128,4 @@ var WithoutLink = createReactClass({
 });
 ```
 
-The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!
+`valueLink` cũng khá đơn giản. Nó chỉ đơn giản là xử lý sự kiện `onChange` và gọi `this.props.valueLink.requestChange()` và cũng được dùng như `this.props.valueLink.value` thay cho `this.props.value`. Là vậy đó!