Skip to content

Commit 68b854d

Browse files
ltmylinhnampdn
authored andcommitted
Translation for rendering elements page (#12)
* Hello world initial translation * Updated translation for navigation sidebar * Fix content issue with Netlify * Updated some words * Updates * Translation * Translate * Updates * Updates
1 parent cc979c4 commit 68b854d

File tree

2 files changed

+26
-30
lines changed

2 files changed

+26
-30
lines changed

content/blog/2015-03-30-community-roundup-26.md

-5
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo
2929

3030
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. :)
3131

32-
<<<<<<< HEAD
33-
<audio src="https://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
34-
=======
3532
<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style="width: 100%"></audio>
36-
>>>>>>> 5fdb6a2e70018f408c42e012a3f70e066a80e886
37-
3833

3934
## Hacker News {#hacker-news}
4035

content/docs/rendering-elements.md

+26-25
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,76 @@
11
---
22
id: rendering-elements
3-
title: Rendering Elements
3+
title: Việc render các element
44
permalink: docs/rendering-elements.html
55
redirect_from:
66
- "docs/displaying-data.html"
77
prev: introducing-jsx.html
88
next: components-and-props.html
99
---
1010

11-
Elements are the smallest building blocks of React apps.
11+
Element là những mảnh ghép nhỏ nhất của các ứng dụng React.
1212

13-
An element describes what you want to see on the screen:
13+
Một element mô tả những gì bạn muốn nhìn thấy trên màn hình:
1414

1515
```js
1616
const element = <h1>Hello, world</h1>;
1717
```
1818

19-
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.
19+
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.
2020

21-
>**Note:**
21+
>**Ghi chú:**
2222
>
23-
>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.
23+
>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.
2424
25-
## Rendering an Element into the DOM {#rendering-an-element-into-the-dom}
25+
## Việc render một element vào trong DOM {#rendering-an-element-into-the-dom}
2626

27-
Let's say there is a `<div>` somewhere in your HTML file:
27+
Hãy hình dung có một thẻ `<div>` ở đâu đó trong "tệp" (file) HTML:
2828

2929
```html
3030
<div id="root"></div>
3131
```
3232

33-
We call this a "root" DOM node because everything inside it will be managed by React DOM.
33+
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.
3434

35-
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.
35+
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.
3636

37-
To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
37+
Để 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()`:
3838

3939
`embed:rendering-elements/render-an-element.js`
4040

4141
[](codepen://rendering-elements/render-an-element)
4242

43-
It displays "Hello, world" on the page.
43+
Ví dụ trên hiển thị dòng chữ "Hello, world" trên trang web.
4444

45-
## Updating the Rendered Element {#updating-the-rendered-element}
45+
## Việc cập nhật element đã được render {#updating-the-rendered-element}
4646

47-
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.
47+
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.
4848

49-
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
49+
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()`.
5050

51-
Consider this ticking clock example:
51+
Hãy xem xét ví dụ đồng hồ "đánh dấu" (tick) này:
5252

5353
`embed:rendering-elements/update-rendered-element.js`
5454

5555
[](codepen://rendering-elements/update-rendered-element)
5656

57-
It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
57+
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).
5858

59-
>**Note:**
59+
>**Ghi chú:**
6060
>
61-
>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).
61+
>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).
6262
>
63-
>We recommend that you don't skip topics because they build on each other.
63+
>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.
6464
65-
## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
65+
## React Chỉ Cập Nhật Những Gì Cần Thiết {#react-only-updates-whats-necessary}
6666

67-
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.
67+
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.
6868

69-
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
69+
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:
7070

7171
![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
72+
!["thanh kiểm tra" (inspector) DOM chỉ ra những cập nhật cần thiết](../images/docs/granular-dom-updates.gif)
7273

73-
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.
74+
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.
7475

75-
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.
76+
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).

0 commit comments

Comments
 (0)