Skip to content

Commit 6f3f108

Browse files
authored
Merge pull request #281 from NTAK666/language/vietnamese-page
(Language) : Vietnamses page and CDN Link
2 parents 635da2c + d8add38 commit 6f3f108

File tree

6 files changed

+225
-130
lines changed

6 files changed

+225
-130
lines changed

content/blog/2013-06-21-react-v0-3-3.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,25 @@ title: "React v0.3.3"
33
author: [zpao]
44
---
55

6-
We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
7-
6+
Chúng tôi có rất nhiều thứ tuyệt vời sắp ra mắt trong phiên bản v0.4, nhưng trong thời gian chờ đợi, chúng tôi sẽ phát
7+
hành phiên bản v0.3.3. Bản phát hành này giải quyết một số vấn đề nhỏ mà mọi người đang gặp phải và đơn giản hóa các
8+
công cụ của chúng tôi để giúp chúng dễ sử dụng hơn.
89

910
## react-tools {#react-tools}
1011

11-
* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
12-
* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
13-
* Freeze our esprima dependency.
14-
12+
*
13+
* Nâng cấp Commoner để các câu lệnh `request` không còn được tương đối hóa khi đi qua máy biến áp. Đây là một tính năng
14+
cần thiết khi xây dựng React, nhưng không tốt cho những người tiêu dùng khác của `binjsx`.
15+
* Đã nâng cấp các phần phụ thuộc của chúng tôi lên Commoner và Recast để họ sử dụng một thư mục khác cho bộ nhớ cache
16+
của họ.
17+
* Đóng băng sự phụthuộc esprima của chúng tôi.
1518

1619
## React {#react}
1720

18-
* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
19-
21+
* Cho phép sử dụng lại cùng một nút DOM để hiển thị các thành phần khác nhau. ví
22+
dụ. `React.renderComponent (<div>, domNode); React.renderComponent (<span>, domNode); `sẽ hoạt động ngay bây giờ.
2023

2124
## JSXTransformer {#jsxtransformer}
2225

23-
* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
26+
* Đã cải tiến bộ biến áp trong trình duyệt để các tập lệnh được chuyển đổi sẽ thực thi trong phạm vi dự kiến. Cho phép
27+
các thành phần được xác định và sử dụng từ các tệp riêng biệt.

content/community/courses.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,51 +8,51 @@ permalink: community/courses.html
88

99
## Free Courses {#free-courses}
1010

11-
- [Glitch: React Starter Kit](https://glitch.com/glimmer/post/react-starter-kit) - A free, 5-part video course with interactive code examples that will help you learn React.
11+
- [Glitch: React Starter Kit](https://glitch.com/glimmer/post/react-starter-kit) - Một khóa học miễn phí về React với 5 phần và các ví dụ đầy đủ ở đây sẽ giúp bạn học React dễ dàng hơn.
1212

13-
- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React.
13+
- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Khóa học giới thiệu React của Codecademy's.
1414

15-
- [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started.
15+
- [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - Loạt bài này sẽ giải thích cho bạn những thứ cơ bản để có thể bắt đầu với React.
1616

17-
- [React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics.
17+
- [React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - Một khóa học cấp tốc cơ bản đi qua những vấn đề trong React.
1818

19-
- [Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Learn React without the buzzwords.
19+
- [Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Học React mà không có `Class`
2020

21-
- [Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-react) - Free course for React newbies and those looking to get a better understanding of React fundamentals.
21+
- [Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-react) - Khóa học miễn phí cho người mới bắt đầu giúp họ có cái nhìn tổng quan và hiểu hơn về React Fundamentals.
2222

23-
- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Recordings from three days of a free online React bootcamp.
23+
- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Khóa học từ 3 ngày miễn phí React bootcamp.
2424

25-
- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.
25+
- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - Video 48 giờ thực hành xây dựng một ứng dụng React.
2626

27-
- [University of Helsinki: Full Stack Open MOOC](https://fullstackopen.com/en/) - Learn to build web applications with React. Available in English, Spanish, Chinese and Finnish.
27+
- [University of Helsinki: Full Stack Open MOOC](https://fullstackopen.com/en/) - Học cách xây dựng một ứng dụng web với React.
2828

2929

3030
## Paid Courses {#paid-courses}
3131

32-
- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
32+
- [Egghead.io](https://egghead.io/browse/frameworks/react) - Các video hướng dẫn ngắn về React và rất nhiều chủ đề khác.
3333

34-
- [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.
34+
- [Frontend Masters](https://frontendmasters.com/learn/react/) - Các khóa học về React.
3535

36-
- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.
36+
- [Fullstack React](https://www.fullstackreact.com/) - Được cập nhật thường xuyên, chuyên xây. đầy đủ về React và các thành phần liên quan.
3737

38-
- [Pure React](https://daveceddia.com/pure-react/) - A step-by-step guide to mastering React.
38+
- [Pure React](https://daveceddia.com/pure-react/) - Từng bước để thành thạo React.
3939

40-
- [React for Beginners](https://reactforbeginners.com/) - Learn React in just a couple of afternoons.
40+
- [React for Beginners](https://reactforbeginners.com/) - Học React trong vài buổi chiều.
4141

42-
- [React for Designers](https://designcode.io/react) - A 6-hour React course for designers, by designers.
42+
- [React for Designers](https://designcode.io/react) - Khóa học 6 giờ dành cho các nhà thiết kế, bởi các nhà thiết kế.
4343

44-
- [React Essentials for Designers](https://learnreact.design) - React courses tailored for designers: the fundamentals, capabilities, limitations and how they relate to design.
44+
- [React Essentials for Designers](https://learnreact.design) - Các khóa học về React phù hợp với các nhà thiết kế: các nguyên tắc cơ bản, khả năng, giới hạn và cách chúng liên quan đến thiết kế.
4545

46-
- [Essential React](https://learnreact.com/lessons/2018-essential-react-1-overview) - A crash course for doers, moving fast from "Hello World" to advanced component composition.
46+
- [Essential React](https://learnreact.com/lessons/2018-essential-react-1-overview) - Một khóa học cấp tốc dành cho người làm, chuyển nhanh từ "Hello World" sang thành phần cấu thành nâng cao.
4747

48-
- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level.
48+
- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Nâng cao kỹ năng React của bạn lên cấp độ tiếp theo.
4949

50-
- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React".
50+
- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis cung cấp quyền truy cập vào các khóa học của mình với một khoản phí hàng tháng. Các khóa học bao gồm "React Fundamentals" "Universal React".
5151

52-
- [Mastering React](https://codewithmosh.com/p/mastering-react/) - Build professional interactive apps with React.
52+
- [Mastering React](https://codewithmosh.com/p/mastering-react/) - Xây dựng các ứng dụng tương tác chuyên nghiệp với React.
5353

54-
- [React Tutorial](https://react-tutorial.app) - Learn React step by step in an interactive environment with flashcards.
54+
- [React Tutorial](https://react-tutorial.app) - Học React từng bước trong môi trường tương tác với Flashcards.
5555

56-
- [Road to React](https://www.roadtoreact.com/) - Your journey to master React in JavaScript.
56+
- [Road to React](https://www.roadtoreact.com/) - Hành trình của bạn để thành thạo React trong JavaScript.
5757

58-
- [Epic React](https://epicreact.dev/) - Confidently Ship Well-Architected Production Ready React Apps Like a Pro
58+
- [Epic React](https://epicreact.dev/) - Tự tin, sẵn sàng với React như một chuyên gia

content/docs/addons-perf.md

Lines changed: 54 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ category: Add-Ons
88

99
> Note:
1010
>
11-
> As of React 16, `react-addons-perf` is not supported. Please use [your browser's profiling tools](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab) to get insight into which components re-render.
11+
> Kể từ React 16, `react-addons-perf` không được hỗ trợ nữa. Hãy sử
12+
>
13+
dụng [your browser's profiling tools](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab)
14+
> để có thông tin chi tiết từ các `components re-render`.
1215
1316
**Importing**
1417

@@ -17,50 +20,58 @@ import Perf from 'react-addons-perf'; // ES6
1720
var Perf = require('react-addons-perf'); // ES5 with npm
1821
```
1922

23+
## Tổng quan {#overview}
2024

21-
## Overview {#overview}
22-
23-
React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a [shouldComponentUpdate()](/docs/react-component.html#shouldcomponentupdate) method where you can add optimization hints to React's diff algorithm.
25+
React thường diễn ra khá nhanh. Tuy nhiên, trong những tình huống bạn cần tận dụng từng chút hiệu suất của ứng dụng, nó
26+
sẽ cung cấp phương pháp [shouldComponentUpdate()](docsreact-component.htmlshouldcomponentupdate) nơi bạn có thể thêm
27+
các gợi ý tối ưu hóa cho thuật toán khác biệt của React.
2428

25-
In addition to giving you an overview of your app's overall performance, `Perf` is a profiling tool that tells you exactly where you need to put these methods.
29+
Ngoài việc cung cấp cho bạn cái nhìn tổng quan về hiệu suất tổng thể của ứng dụng, `Perf` là một công cụ lập hồ sơ cho
30+
bạn biết chính xác nơi bạn cần đặt các phương pháp này.
2631

27-
See these articles for an introduction to React performance tooling:
32+
Xem các bài viết này để được giới thiệu về công cụ hiệu suất React:
2833

29-
- ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
30-
- ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285)
31-
- ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667)
34+
- ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
35+
- ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285)
36+
- ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667)
3237

33-
### Development vs. Production Builds {#development-vs-production-builds}
38+
### Môi trường Development và môi trường Production Builds {#development-vs-production-builds}
3439

35-
If you're benchmarking or seeing performance problems in your React apps, make sure you're testing with the [minified production build](/downloads.html). The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.
40+
Nếu bạn đang đo điểm chuẩn hoặc thấy các vấn đề về hiệu suất trong các ứng dụng React của mình, hãy đảm bảo rằng bạn
41+
đang thử nghiệm với [bản dựng sản xuất thu nhỏ](download.html). Bản dựng phát triển bao gồm các cảnh báo bổ sung hữu
42+
ích khi xây dựng ứng dụng của bạn, nhưng nó chậm hơn do có thêm sổ sách kế toán.
3643

37-
However, the perf tools described on this page only work when using the development build of React. Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
44+
Tuy nhiên, các công cụ hoàn hảo được mô tả trên trang này chỉ hoạt động khi sử dụng bản dựng phát triển của React. Do
45+
đó, trình mô tả chỉ dùng để chỉ ra các phần _relatively_ đắt tiền trong ứng dụng của bạn.
3846

39-
### Using Perf {#using-perf}
47+
### Sử dụng Perf {#using-perf}
4048

41-
The `Perf` object can be used with React in development mode only. You should not include this bundle when building your app for production.
49+
Đối tượng `Perf` chỉ có thể được sử dụng với React trong chế độ phát triển. Bạn không nên bao gồm gói này khi xây dựng
50+
ứng dụng của mình để sản xuất.
4251

4352
#### Getting Measurements {#getting-measurements}
4453

45-
- [`start()`](#start)
46-
- [`stop()`](#stop)
47-
- [`getLastMeasurements()`](#getlastmeasurements)
54+
- [`start()`](#start)
55+
- [`stop()`](#stop)
56+
- [`getLastMeasurements()`](#getlastmeasurements)
4857

4958
#### Printing Results {#printing-results}
5059

51-
The following methods use the measurements returned by [`Perf.getLastMeasurements()`](#getlastmeasurements) to pretty-print the result.
60+
Các phương pháp sau sử dụng các phép đo được trả về bởi [`Perf.getLastMeasurements ()`](getlastmeasurements) để in kết
61+
quả.
5262

53-
- [`printInclusive()`](#printinclusive)
54-
- [`printExclusive()`](#printexclusive)
55-
- [`printWasted()`](#printwasted)
56-
- [`printOperations()`](#printoperations)
57-
- [`printDOM()`](#printdom)
63+
- [`printInclusive()`](#printinclusive)
64+
- [`printExclusive()`](#printexclusive)
65+
- [`printWasted()`](#printwasted)
66+
- [`printOperations()`](#printoperations)
67+
- [`printDOM()`](#printdom)
5868

5969
* * *
6070

6171
## Reference {#reference}
6272

6373
### `start()` {#start}
74+
6475
### `stop()` {#stop}
6576

6677
```javascript
@@ -69,9 +80,10 @@ Perf.start()
6980
Perf.stop()
7081
```
7182

72-
Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
83+
Start/stop đo lường. Các hoạt động React ở giữa được ghi lại cho các phân tích bên dưới. Các thao tác chiếm một lượng
84+
thời gian không đáng kể sẽ bị bỏ qua.
7385

74-
After stopping, you will need [`Perf.getLastMeasurements()`](#getlastmeasurements) to get the measurements.
86+
Sau khi dừng, bạn sẽ cần [`Perf.getLastMeasurements()`](#getlastmeasurements) để lấy các phép đo.
7587

7688
* * *
7789

@@ -81,11 +93,14 @@ After stopping, you will need [`Perf.getLastMeasurements()`](#getlastmeasurement
8193
Perf.getLastMeasurements()
8294
```
8395

84-
Get the opaque data structure describing measurements from the last start-stop session. You can save it and pass it to the other print methods in [`Perf`](#printing-results) to analyze past measurements.
96+
Nhận cấu trúc dữ liệu không rõ ràng mô tả các phép đo từ phiên khởi động cuối cùng. Bạn có thể lưu nó và chuyển nó cho
97+
các phương pháp in khác trong [`Perf`](#printing-results) để phân tích các phép đo trong quá khứ.
8598

86-
> Note
99+
> Ghi chú
87100
>
88-
> Don't rely on the exact format of the return value because it may change in minor releases. We will update the documentation if the return value format becomes a supported part of the public API.
101+
> Đừng dựa vào định dạng chính xác của giá trị trả về vì nó có thể thay đổi trong các bản phát hành nhỏ. Chúng tôi sẽ
102+
> cập nhật tài liệu
103+
> nếu định dạng giá trị trả về trở thành một phần được hỗ trợ của API công khai.
89104
90105
* * *
91106

@@ -95,7 +110,8 @@ Get the opaque data structure describing measurements from the last start-stop s
95110
Perf.printInclusive(measurements)
96111
```
97112

98-
Prints the overall time taken. When no arguments are passed, `printInclusive` defaults to all the measurements from the last recording. This prints a nicely formatted table in the console, like so:
113+
In tổng thời gian đã thực hiện. Khi không có đối số nào được chuyển, `printInclusive` mặc định cho tất cả các phép đo từ
114+
bản ghi cuối cùng. Thao tác này sẽ in ra một bảng được định dạng độc đáo trong bảng điều khiển, như sau:
99115

100116
![](../images/docs/perf-inclusive.png)
101117

@@ -107,7 +123,9 @@ Prints the overall time taken. When no arguments are passed, `printInclusive` de
107123
Perf.printExclusive(measurements)
108124
```
109125

110-
"Exclusive" times don't include the times taken to mount the components: processing props, calling `componentWillMount` and `componentDidMount`, etc.
126+
Thời gian "Exclusive" không bao gồm thời gian thực hiện để gắn kết các thành phần: xử lý đạo cụ,
127+
gọi `componentWillMount`
128+
`componentDidMount`, v.v.
111129

112130
![](../images/docs/perf-exclusive.png)
113131

@@ -121,7 +139,8 @@ Perf.printWasted(measurements)
121139

122140
**The most useful part of the profiler**.
123141

124-
"Wasted" time is spent on components that didn't actually render anything, e.g. the render stayed the same, so the DOM wasn't touched.
142+
"Wasted" time is spent on components that didn't actually render anything, e.g. the render stayed the same, so the DOM
143+
wasn't touched.
125144

126145
![](../images/docs/perf-wasted.png)
127146

@@ -133,7 +152,7 @@ Perf.printWasted(measurements)
133152
Perf.printOperations(measurements)
134153
```
135154

136-
Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
155+
In các thao tác DOM cơ bản, ví dụ: "set innerHTML" "remove".
137156

138157
![](../images/docs/perf-dom.png)
139158

@@ -145,4 +164,6 @@ Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
145164
Perf.printDOM(measurements)
146165
```
147166

148-
This method has been renamed to [`printOperations()`](#printoperations). Currently `printDOM()` still exists as an alias but it prints a deprecation warning and will eventually be removed.
167+
Phương thức này đã được đổi tên thành [`printOperations()`](#printoperations). Hiện tại `printDOM()` vẫn tồn tại
168+
dưới dạng bí danh
169+
nhưng nó sẽ in một cảnh báo không dùng nữa và cuối cùng sẽ bị xóa.

0 commit comments

Comments
 (0)