From 7acc0d25958671fcad26a5cd9f89a42b007eab85 Mon Sep 17 00:00:00 2001 From: Linh Le Date: Sat, 9 Feb 2019 00:22:34 -0500 Subject: [PATCH 1/9] Hello world initial translation --- content/docs/hello-world.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 2fff80254..a12785dba 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -6,7 +6,7 @@ prev: cdn-links.html next: introducing-jsx.html --- -The smallest React example looks like this: +Một ví dụ đơn giản nhất của React trông như thế này: ```js ReactDOM.render( @@ -15,36 +15,36 @@ ReactDOM.render( ); ``` -It displays a heading saying "Hello, world!" on the page. +Nó hiển thị một tiêu đề với dòng chữ "Hello, world!" trên trang web. [](codepen://hello-world) -Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one. +Nhấn vào link bên trên để mở một trình soạn thảo trực tuyến. Hãy tự nhiên để làm vài sự thay đổi và thấy nó ảnh hưởng đến kết quả như thế nào. Hầu hết các trang trong hướng dẫn này sẽ có những ví dụ mà bạn có thể thay đổi được giống như ví dụ này. -## How to Read This Guide {#how-to-read-this-guide} +## Làm sao để đọc hướng dẫn này {#how-to-read-this-guide} -In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces. +Trong hướng dẫn này, chúng ta sẽ xem xét các khối xây dựng của các ứng dụng React: elements và components. Một khi bạn đã nắm vững chúng, bạn có thể tạo ra những ứng dụng phức tạp từ những mảnh ghép tái sử dụng nhỏ. ->Tip +>Mẹo nhỏ > ->This guide is designed for people who prefer **learning concepts step by step**. If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). You might find this guide and the tutorial complementary to each other. +>Hướng dẫn này được thiết kế cho những người dự định **tiếp cận các khái niệm từng bước một**. Nếu bạn có dự định tiếp cận theo cách thực hành, bạn nên tham khảo [hướng dẫn thực hành](/tutorial/tutorial.html) của chúng tôi. Bạn có thể tìm hướng dẫn này và chỉ dẫn thực hành bổ sung cho nhau. -This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen. +Đây là chương đầu tiên trong hướng dẫn từng bước về các khái niệm cơ bản của React. Bạn có thể tìm thấy một danh sách tất cả các chương của nó trong navigation sidebar. Nếu bạn đang đọc cái này trên điện thoại, bạn cũng có thể truy cập navigation bằng cách nhấn cái nút ở bên phải phía dưới góc màn hình của bạn. -Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one. +Mỗi chương trong hướng dẫn này xây dựng trên kiến thức đã giới thiệu trong những chương trước. **Bạn có thể học phần lớn React bằng cách đọc các chương hướng dẫn “Các khái niệm chính” theo thứ tự của chúng ở trong sidebar**. Ví dụ, [“Giới thiệu JSX”](/docs/introducing-jsx.html) là chương kế tiếp của chương này. -## Knowledge Level Assumptions {#knowledge-level-assumptions} +## Kiến thức cơ bản {#knowledge-level-assumptions} -React is a JavaScript library, and so we'll assume you have a basic understanding of the JavaScript language. **If you don't feel very confident, we recommend [going through a JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level** and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won't have to feel like you're learning both React and JavaScript at the same time. +React là một thư viện JavaScript, và vì thế chúng tôi giả định là bạn có một sự hiểu biết cơ bản về ngôn ngữ JavaScript. **Nếu bạn cảm thấy không tự tin, chúng tôi khuyên bạn [lướt qua một hướng dẫn về JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) để kiểm tra kiến thức của bạn** và điều đó sẽ giúp bạn tiếp tục hướng dẫn này mà không bị lạc hướng. Nó có thể mất 30 phút hoặc một tiếng đồng hồ, nhưng với kết quả cuối cùng thì bạn sẽ không phải cảm thấy giống như bạn đang học React và JavaScript cùng một thời điểm. ->Note +>Ghi chú > ->This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way. +>Hướng dẫn này thỉnh thoảng sử dụng một vài cấu trúc JavaScript mới trong các ví dụ. Nếu bạn chưa từng làm việc với JavaScript trong vài năm trước đây, [Ba điểm này](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) sẽ mang cho bạn kiến thức để bạn cảm thấy thoải mái hơn khi đọc các tài liệu của React. -## Let's Get Started! {#lets-get-started} +## Hãy cùng bắt đầu nhé! {#lets-get-started} -Keep scrolling down, and you'll find the link to the [next chapter of this guide](/docs/introducing-jsx.html) right before the website footer. +Tiếp tục kéo xuống bên dưới, và bạn sẽ tìm thấy đường dẫn đến [chương kế tiếp của hướng dẫn này](/docs/introducing-jsx.html) ngay mép bên phải trên cái chân của website. From 69028dcb95a6c12ee305085f31df27fdfd9049f0 Mon Sep 17 00:00:00 2001 From: Linh Le Date: Sun, 10 Feb 2019 09:34:40 -0500 Subject: [PATCH 2/9] Updated translation for navigation sidebar --- content/docs/hello-world.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index a12785dba..7451550cb 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -6,7 +6,7 @@ prev: cdn-links.html next: introducing-jsx.html --- -Một ví dụ đơn giản nhất của React trông như thế này: +Một ví dụ nhỏ nhất của React trông như thế này: ```js ReactDOM.render( @@ -24,13 +24,13 @@ Nhấn vào link bên trên để mở một trình soạn thảo trực tuyến ## Làm sao để đọc hướng dẫn này {#how-to-read-this-guide} -Trong hướng dẫn này, chúng ta sẽ xem xét các khối xây dựng của các ứng dụng React: elements và components. Một khi bạn đã nắm vững chúng, bạn có thể tạo ra những ứng dụng phức tạp từ những mảnh ghép tái sử dụng nhỏ. +Trong hướng dẫn này, chúng ta sẽ xem xét các khối xây dựng của các ứng dụng React: elements và components. Một khi bạn đã nắm vững chúng, bạn có thể tạo ra những ứng dụng phức tạp từ những mảnh ghép nhỏ tái sử dụng. >Mẹo nhỏ > >Hướng dẫn này được thiết kế cho những người dự định **tiếp cận các khái niệm từng bước một**. Nếu bạn có dự định tiếp cận theo cách thực hành, bạn nên tham khảo [hướng dẫn thực hành](/tutorial/tutorial.html) của chúng tôi. Bạn có thể tìm hướng dẫn này và chỉ dẫn thực hành bổ sung cho nhau. -Đây là chương đầu tiên trong hướng dẫn từng bước về các khái niệm cơ bản của React. Bạn có thể tìm thấy một danh sách tất cả các chương của nó trong navigation sidebar. Nếu bạn đang đọc cái này trên điện thoại, bạn cũng có thể truy cập navigation bằng cách nhấn cái nút ở bên phải phía dưới góc màn hình của bạn. +Đây là chương đầu tiên trong hướng dẫn từng bước về các khái niệm cơ bản của React. Bạn có thể tìm thấy một danh sách tất cả các chương của nó trong thanh công cụ điều hướng. Nếu bạn đang đọc cái này trên điện thoại, bạn cũng có thể truy cập điều hướng bằng cách nhấn cái nút ở bên phải phía dưới góc màn hình của bạn. Mỗi chương trong hướng dẫn này xây dựng trên kiến thức đã giới thiệu trong những chương trước. **Bạn có thể học phần lớn React bằng cách đọc các chương hướng dẫn “Các khái niệm chính” theo thứ tự của chúng ở trong sidebar**. Ví dụ, [“Giới thiệu JSX”](/docs/introducing-jsx.html) là chương kế tiếp của chương này. From d0eba21fe90dfe6ec16ce4a7457c856183999dad Mon Sep 17 00:00:00 2001 From: Linh Le Date: Sun, 10 Feb 2019 09:50:30 -0500 Subject: [PATCH 3/9] Fix content issue with Netlify --- content/blog/2015-03-30-community-roundup-26.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index ae2dc4979..24a7a1c7f 100644 --- a/content/blog/2015-03-30-community-roundup-26.md +++ b/content/blog/2015-03-30-community-roundup-26.md @@ -29,7 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :) - + ## Hacker News {#hacker-news} From 61f40547eb08f24d5d2dc95ede9b5081a0b2313f Mon Sep 17 00:00:00 2001 From: Linh Le Date: Sun, 10 Feb 2019 16:11:44 -0500 Subject: [PATCH 4/9] Updated some words --- content/docs/hello-world.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 7451550cb..aed747d27 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -32,9 +32,9 @@ Trong hướng dẫn này, chúng ta sẽ xem xét các khối xây dựng của Đây là chương đầu tiên trong hướng dẫn từng bước về các khái niệm cơ bản của React. Bạn có thể tìm thấy một danh sách tất cả các chương của nó trong thanh công cụ điều hướng. Nếu bạn đang đọc cái này trên điện thoại, bạn cũng có thể truy cập điều hướng bằng cách nhấn cái nút ở bên phải phía dưới góc màn hình của bạn. -Mỗi chương trong hướng dẫn này xây dựng trên kiến thức đã giới thiệu trong những chương trước. **Bạn có thể học phần lớn React bằng cách đọc các chương hướng dẫn “Các khái niệm chính” theo thứ tự của chúng ở trong sidebar**. Ví dụ, [“Giới thiệu JSX”](/docs/introducing-jsx.html) là chương kế tiếp của chương này. +Mỗi chương trong hướng dẫn này xây dựng trên kiến thức đã giới thiệu trong những chương trước. **Bạn có thể học phần lớn React bằng cách đọc các chương hướng dẫn “Các khái niệm chính” theo thứ tự của chúng ở trong thanh công cụ**. Ví dụ, [“Giới thiệu JSX”](/docs/introducing-jsx.html) là chương kế tiếp của chương này. -## Kiến thức cơ bản {#knowledge-level-assumptions} +## Kiến thức cơ bản cần có {#knowledge-level-assumptions} React là một thư viện JavaScript, và vì thế chúng tôi giả định là bạn có một sự hiểu biết cơ bản về ngôn ngữ JavaScript. **Nếu bạn cảm thấy không tự tin, chúng tôi khuyên bạn [lướt qua một hướng dẫn về JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) để kiểm tra kiến thức của bạn** và điều đó sẽ giúp bạn tiếp tục hướng dẫn này mà không bị lạc hướng. Nó có thể mất 30 phút hoặc một tiếng đồng hồ, nhưng với kết quả cuối cùng thì bạn sẽ không phải cảm thấy giống như bạn đang học React và JavaScript cùng một thời điểm. From 30a6cdd33768906d392024df3b761f706149e2ec Mon Sep 17 00:00:00 2001 From: Linh Le Date: Tue, 12 Feb 2019 20:09:02 -0500 Subject: [PATCH 5/9] Updates --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index aed747d27..6b23edc7c 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -24,7 +24,7 @@ Nhấn vào link bên trên để mở một trình soạn thảo trực tuyến ## Làm sao để đọc hướng dẫn này {#how-to-read-this-guide} -Trong hướng dẫn này, chúng ta sẽ xem xét các khối xây dựng của các ứng dụng React: elements và components. Một khi bạn đã nắm vững chúng, bạn có thể tạo ra những ứng dụng phức tạp từ những mảnh ghép nhỏ tái sử dụng. +Trong hướng dẫn này, chúng ta sẽ xem xét các khối xây dựng của các ứng dụng React: element và component. Một khi bạn đã nắm vững chúng, bạn có thể tạo ra những ứng dụng lớn hơn từ những component nhỏ có tính tái sử dụng. >Mẹo nhỏ > From 84dc8817ac578a14de276ad975907cdcb36e34d9 Mon Sep 17 00:00:00 2001 From: Linh Le Date: Tue, 12 Feb 2019 22:02:26 -0500 Subject: [PATCH 6/9] Translation --- content/docs/rendering-elements.md | 51 +++++++++++++++--------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 34bb62b7c..6cf466dba 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -1,6 +1,6 @@ --- id: rendering-elements -title: Rendering Elements +title: Việc render các element permalink: docs/rendering-elements.html redirect_from: - "docs/displaying-data.html" @@ -8,68 +8,69 @@ prev: introducing-jsx.html next: components-and-props.html --- -Elements are the smallest building blocks of React apps. +Element là những khối xây dựng nhỏ nhất của các ứng dụng React. -An element describes what you want to see on the screen: +Một element mô tả những gì bạn muốn nhiền thấy trên màn hình: ```js const element =

Hello, world

; ``` -Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. +Không giống như những element DOM của trình duyệt, React element là những "đối tượng đơn giản" (plain object) và rất dễ để tạo ra. React DOM giữ vai trò cập nhật DOM để phù hợp với các React element. ->**Note:** +>**Ghi chú:** > ->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. +>Người ta có thể nhầm lẫn các element với một khái niệm được biết rộng hơn về các "component". Chúng tôi sẽ giới thiệu các "component" trong [phần tới](/docs/components-and-props.html). Các element là những gì mà các component được "làm bằng", và chúng tôi khuyến khích bạn đọc phần này trước khi đi đến phần kế tiếp. -## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} +## Việc render một element vào trong DOM {#rendering-an-element-into-the-dom} -Let's say there is a `
` somewhere in your HTML file: +Hãy nói rằng có một thẻ `
` ở đâu đó trong "tệp" (file) HTML: ```html
``` -We call this a "root" DOM node because everything inside it will be managed by React DOM. +Chúng tôi gọi cái này là một nốt (node) DOM gốc "root" bởi về mọi thứ bên trong nó sẽ được quản lý bởi React DOM. -Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. +Các ứng dụng đã xây dựng với React thường có duy nhất một nốt (node) DOM "gốc" (root). Nếu bạn kết hợp React vào trong một ứng dụng đã tồn tại, bạn có thể có nhiều "nốt" (node) DOM gốc "bị cô lập" (isolated) như bạn muốn. -To render a React element into a root DOM node, pass both to `ReactDOM.render()`: +Để render một React element vào bên trong một "nốt" (node) DOM gốc, truyền tất cả vào `ReactDOM.render()`: `embed:rendering-elements/render-an-element.js` [](codepen://rendering-elements/render-an-element) -It displays "Hello, world" on the page. +Ví dụ trên hiển thị dòng chữ "Hello, world" trên trang web. -## Updating the Rendered Element {#updating-the-rendered-element} +## Việc cập nhật element đã được render {#updating-the-rendered-element} -React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. +Các React element là [bất biến](https://vi.wikipedia.org/wiki/%C4%90%E1%BB%91i_t%C6%B0%E1%BB%A3ng_b%E1%BA%A5t_bi%E1%BA%BFn). Một khi bạn tạo ra một element, bạn không thể thay đổi các "con" (children) hoặc các "thuộc tính" (attribute) của nó. Một element giống như một khung hình duy nhất trong một bộ phim: nó đại diện cho "giao diện" (UI) tại một thời điểm nhất định. -With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. +Với sự hiểu biết của chúng tôi cho đến thời điểm này, thì chỉ có một cách duy nhất để cập nhật "giao diện" (UI) đó là tạo ra một element mới và truyền nó vào `ReactDOM.render()`. -Consider this ticking clock example: +Hãy xem xét ví dụ đồng hồ "đánh dấu" (tick) này: `embed:rendering-elements/update-rendered-element.js` [](codepen://rendering-elements/update-rendered-element) -It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. +Nó gọi `ReactDOM.render()` mỗi giây từ một "lời gọi lại" (callback) [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). ->**Note:** +>**Ghi chú:** > ->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). +>Trong thực tế, hầu hết các ứng dụng React chỉ gọi `ReactDOM.render()` một lần duy nhất. Trong những phần tiếp theo, chúng ta sẽ tìm hiểu làm thế nào để "mã" (code) được đóng gói vào ["những component có trạng thái" (stateful components)](/docs/state-and-lifecycle.html). > ->We recommend that you don't skip topics because they build on each other. +>Chúng tôi khuyên bạn đừng bỏ qua các "chủ đề" (topic) vì chúng có tính xây dựng lẫn nhau. -## React Only Updates What's Necessary {#react-only-updates-whats-necessary} +## React Chỉ Cập Nhật Những Gì Cần Thiết {#react-only-updates-whats-necessary} -React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. +React DOM so sánh element và các thành phần con của nó với cái trước đó, và chỉ áp dụng những cập nhật DOM cần thiết để đưa DOM đến trạng thái được mong muốn. -You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: +Bạn có thể xác minh điều trên bằng cách kiểm tra [ví dụ cuối](codepen://rendering-elements/update-rendered-element) với các công cụ của trình duyệt: ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) +!["thanh kiểm tra" (inspector) DOM chỉ ra những cập nhật cần thiết](../images/docs/granular-dom-updates.gif) -Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. +Mặc dù chúng ta tạo ra một element miêu tả toàn bộ cây "giao diện" (UI) trên mỗi "đánh dấu" (tick), chỉ những "nốt văn bản" (text node) có nội dung thay đổi mới nhận sự cập nhật bởi React DOM. -In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. +Với kinh nghiệm của chúng tôi thì chúng ta nên suy nghĩ về cách "giao diện" (UI) nên trông như thế nào tại mọi thời điểm hơn là suy nghĩ làm thế nào để thay đổi "giao diện" (UI) qua thời gian sẽ loại bỏ được rất nhiều "lỗi" (bug). From dadca7b9b996ae79678c89bcb0438140d70f9448 Mon Sep 17 00:00:00 2001 From: Linh Le Date: Tue, 12 Feb 2019 22:02:42 -0500 Subject: [PATCH 7/9] Translate --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 6cf466dba..60d55abe1 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -73,4 +73,4 @@ Bạn có thể xác minh điều trên bằng cách kiểm tra [ví dụ cuối Mặc dù chúng ta tạo ra một element miêu tả toàn bộ cây "giao diện" (UI) trên mỗi "đánh dấu" (tick), chỉ những "nốt văn bản" (text node) có nội dung thay đổi mới nhận sự cập nhật bởi React DOM. -Với kinh nghiệm của chúng tôi thì chúng ta nên suy nghĩ về cách "giao diện" (UI) nên trông như thế nào tại mọi thời điểm hơn là suy nghĩ làm thế nào để thay đổi "giao diện" (UI) qua thời gian sẽ loại bỏ được rất nhiều "lỗi" (bug). +Với kinh nghiệm của chúng tôi thì chúng ta nên suy nghĩ về cách "giao diện" (UI) nên trông như thế nào tại mọi thời điểm hơn là suy nghĩ làm thế nào để thay đổi "giao diện" (UI) qua thời gian, điều này sẽ loại bỏ được rất nhiều "lỗi" (bug). From f90b406b7044541ce21f212d45133e8556d99bd7 Mon Sep 17 00:00:00 2001 From: Linh Le Date: Sun, 10 Mar 2019 22:04:19 -0400 Subject: [PATCH 8/9] Updates --- content/docs/rendering-elements.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 60d55abe1..1aebed1fb 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -10,7 +10,7 @@ next: components-and-props.html Element là những khối xây dựng nhỏ nhất của các ứng dụng React. -Một element mô tả những gì bạn muốn nhiền thấy trên màn hình: +Một element mô tả những gì bạn muốn nhìn thấy trên màn hình: ```js const element =

Hello, world

; @@ -20,11 +20,11 @@ Không giống như những element DOM của trình duyệt, React element là >**Ghi chú:** > ->Người ta có thể nhầm lẫn các element với một khái niệm được biết rộng hơn về các "component". Chúng tôi sẽ giới thiệu các "component" trong [phần tới](/docs/components-and-props.html). Các element là những gì mà các component được "làm bằng", và chúng tôi khuyến khích bạn đọc phần này trước khi đi đến phần kế tiếp. +>Người ta có thể nhầm lẫn các element với một khái niệm được biết rộng hơn về các "component". Chúng tôi sẽ giới thiệu các "component" trong [phần tới](/docs/components-and-props.html). Các element là những gì mà các component được "làm từ", và chúng tôi khuyến khích bạn đọc phần này trước khi đi đến phần kế tiếp. ## Việc render một element vào trong DOM {#rendering-an-element-into-the-dom} -Hãy nói rằng có một thẻ `
` ở đâu đó trong "tệp" (file) HTML: +Hãy hình dung có một thẻ `
` ở đâu đó trong "tệp" (file) HTML: ```html
@@ -73,4 +73,4 @@ Bạn có thể xác minh điều trên bằng cách kiểm tra [ví dụ cuối Mặc dù chúng ta tạo ra một element miêu tả toàn bộ cây "giao diện" (UI) trên mỗi "đánh dấu" (tick), chỉ những "nốt văn bản" (text node) có nội dung thay đổi mới nhận sự cập nhật bởi React DOM. -Với kinh nghiệm của chúng tôi thì chúng ta nên suy nghĩ về cách "giao diện" (UI) nên trông như thế nào tại mọi thời điểm hơn là suy nghĩ làm thế nào để thay đổi "giao diện" (UI) qua thời gian, điều này sẽ loại bỏ được rất nhiều "lỗi" (bug). +Với kinh nghiệm của chúng tôi thì chúng ta nên suy nghĩ về cách "giao diện" (UI) nên trông như thế nào tại mọi thời điểm hơn là suy nghĩ làm thế nào để thay đổi "giao diện" (UI) theo thời gian, điều này sẽ loại bỏ được rất nhiều "lỗi" (bug). From 86f76ad4418387c1d944ab0a3dd6845ff7d0e263 Mon Sep 17 00:00:00 2001 From: Linh Le Date: Sun, 10 Mar 2019 22:07:45 -0400 Subject: [PATCH 9/9] Updates --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 1aebed1fb..f5de434a0 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -8,7 +8,7 @@ prev: introducing-jsx.html next: components-and-props.html --- -Element là những khối xây dựng nhỏ nhất của các ứng dụng React. +Element là những mảnh ghép nhỏ nhất của các ứng dụng React. Một element mô tả những gì bạn muốn nhìn thấy trên màn hình: