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**. diff --git a/content/docs/addons-two-way-binding-helpers.md b/content/docs/addons-two-way-binding-helpers.md index 37c00679a..d560b4aec 100644 --- a/content/docs/addons-two-way-binding-helpers.md +++ b/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`: ``` ``` ## 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 đó! diff --git a/content/docs/addons.md b/content/docs/addons.md index a19f4ba79..6aa3181b5 100644 --- a/content/docs/addons.md +++ b/content/docs/addons.md @@ -8,42 +8,42 @@ permalink: docs/addons.html > > `React.addons` entry point is deprecated as of React v15.5. The add-ons have moved to separate modules, and some of them have been deprecated. -The React add-ons are a collection of useful utility modules for building React apps. **These should be considered experimental** and tend to change more often than the core. +Add-ons trong React là một tập hợp các module tiện ích có ích (plugins hoặc libararies) để tạo ra các ứng dụng React. **Đây nên được coi là chưa thực sự hoàn chỉnh** và có xu hướng cập nhật cốt lõi thường xuyên. -- [`createFragment`](/docs/create-fragment.html), to create a set of externally-keyed children. +- [`createFragment`](/docs/create-fragment.html), để tạo một tập hợp các children có khóa ngoài. -The add-ons below are in the development (unminified) version of React only: +Add-ons bên dưới chỉ nằm trong phiên bản phát triển (chưa được tổng hợp) của React: -- [`Perf`](/docs/perf.html), a performance profiling tool for finding optimization opportunities. -- [`ReactTestUtils`](/docs/test-utils.html), simple helpers for writing test cases. +- [`Perf`](/docs/perf.html), một công cụ tạo thông tin hồ sơ để tìm kiếm các phương pháp tối ưu hóa. +- [`ReactTestUtils`](/docs/test-utils.html), những công cụ trợ giúp đơn giản để viết các trường hợp kiểm thử (test case). -### Legacy Add-ons {#legacy-add-ons} +### Add-ons kế thừa {#legacy-add-ons} -The add-ons below are considered legacy and their use is discouraged. They will keep working in observable future, but there is no further development. +Add-ons bên dưới được coi là kế thừa và việc sử dụng chúng không được khuyến khích. Họ (developers) sẽ tiếp tục làm việc trong tương lai gần (để cải thiện, sửa lỗi), nhưng không thực sự có sự phát triển thêm (nghĩa là sự phát triển tập trung và dừng lại chỉ ở tính năng đặc thù). -- [`PureRenderMixin`](/docs/pure-render-mixin.html). Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. -- [`shallowCompare`](/docs/shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update. We recommend using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. -- [`update`](/docs/update.html). Use [`kolodny/immutability-helper`](https://github.com/kolodny/immutability-helper) instead. -- [`ReactDOMFactories`](https://www.npmjs.com/package/react-dom-factories), pre-configured DOM factories to make React easier to use without JSX. +- [`PureRenderMixin`](/docs/pure-render-mixin.html). Thay vì vậy, dùng [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). +- [`shallowCompare`](/docs/shallow-compare.html), một chức năng trợ giúp thực hiện so sánh sơ qua cho "props and state" trong một component để quyết định xem component đó có cập nhật hay không. Thay vì vậy, chúng tôi khuyên dùng [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). +- [`update`](/docs/update.html). Thay vì vậy, dùng [`kolodny/immutability-helper`](https://github.com/kolodny/immutability-helper). +- [`ReactDOMFactories`](https://www.npmjs.com/package/react-dom-factories), DOM được cấu hình trước để làm React dùng dễ hơn mà không cần tới JSX. -### Deprecated Add-ons {#deprecated-add-ons} +### Add-ons không được sử dụng nữa {#deprecated-add-ons} -- [`LinkedStateMixin`](/docs/two-way-binding-helpers.html) has been deprecated. -- [`TransitionGroup` and `CSSTransitionGroup`](/docs/animation.html) have been deprecated in favor of [their drop-in replacements](https://github.com/reactjs/react-transition-group/tree/v1-stable). +- [`LinkedStateMixin`](/docs/two-way-binding-helpers.html) đã không cho phép dùng nữa. +- [`TransitionGroup` and `CSSTransitionGroup`](/docs/animation.html) đã không còn được dùng, hãy dùng [their drop-in replacements](https://github.com/reactjs/react-transition-group/tree/v1-stable). -## Using React with Add-ons {#using-react-with-add-ons} +## Dùng React với Add-ons {#using-react-with-add-ons} -You can install the add-ons individually from npm (e.g. `npm install react-addons-create-fragment`) and import them: +Bạn có thể cài đặt Add-ons riêng lẻ từ npm (v.d. `npm install react-addons-create-fragment`) và "import" nó: ```javascript import createFragment from 'react-addons-create-fragment'; // ES6 var createFragment = require('react-addons-create-fragment'); // ES5 with npm ``` -When using React 15 or earlier from a CDN, you can use `react-with-addons.js` instead of `react.js`: +Khi sử dụng React 15 hoặc bản trước đó từ CDN, có thể dùng `react-with-addons.js` thay cho `react.js`: ```html ``` -The add-ons will be available via the `React.addons` global (e.g. `React.addons.TestUtils`). +Add-ons sẽ có sẵn thông qua `React.addons` (v.d. `React.addons.TestUtils`). diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index e357811de..5ad0181bd 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 thông qua CDN. ```html ``` -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 việc phát triển, và không thích hợp để tạo ra sản phẩm. Các phiên bản sản xuất thu nhỏ và tối ưu hóa của React có sẵn tại: ```html ``` -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 `17` bằng số phiên bản. -### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute} +### Tại sao là 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 dùng React từ CDN, chúng tôi khuyên bạn nên giữ tập thuộc tính [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes): ```html ``` -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 định 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 tốt hơn [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) trong React 16 và sau này.