Merge pull request #2 from reactjs/main

chore: pull code

.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-06-05-why-react.md

@@ -1,88 +1,63 @@
 ---
-title: Why did we build React?
+title: Tại sao chúng tôi xây dựng React?
 author: [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!

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)