Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions content/blog/2013-06-21-react-v0-3-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,25 @@ title: "React v0.3.3"
author: [zpao]
---

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.

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
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
công cụ của chúng tôi để giúp chúng dễ sử dụng hơn.

## react-tools {#react-tools}

* 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`.
* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
* Freeze our esprima dependency.

*
* 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
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`.
* Đã 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
của họ.
* Đóng băng sự phụthuộc esprima của chúng tôi.

## React {#react}

* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.

* 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í
dụ. `React.renderComponent (<div>, domNode); React.renderComponent (<span>, domNode); `sẽ hoạt động ngay bây giờ.

## JSXTransformer {#jsxtransformer}

* 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.
* Đã 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
các thành phần được xác định và sử dụng từ các tệp riêng biệt.
46 changes: 23 additions & 23 deletions content/community/courses.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,51 @@ permalink: community/courses.html

## Free Courses {#free-courses}

- [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.
- [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.

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

- [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.
- [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.

- [React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics.
- [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.

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

- [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.
- [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.

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

- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.
- [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.

- [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.
- [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.


## Paid Courses {#paid-courses}

- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
- [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.

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

- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.
- [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.

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

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

- [React for Designers](https://designcode.io/react) - A 6-hour React course for designers, by designers.
- [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ế.

- [React Essentials for Designers](https://learnreact.design) - React courses tailored for designers: the fundamentals, capabilities, limitations and how they relate to design.
- [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ế.

- [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.
- [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.

- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level.
- [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.

- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React".
- [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".

- [Mastering React](https://codewithmosh.com/p/mastering-react/) - Build professional interactive apps with React.
- [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.

- [React Tutorial](https://react-tutorial.app) - Learn React step by step in an interactive environment with flashcards.
- [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.

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

- [Epic React](https://epicreact.dev/) - Confidently Ship Well-Architected Production Ready React Apps Like a Pro
- [Epic React](https://epicreact.dev/) - Tự tin, sẵn sàng với React như một chuyên gia
87 changes: 54 additions & 33 deletions content/docs/addons-perf.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ category: Add-Ons

> Note:
>
> 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.
> Kể từ React 16, `react-addons-perf` không được hỗ trợ nữa. Hãy sử
>
dụng [your browser's profiling tools](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab)
> để có thông tin chi tiết từ các `components re-render`.

**Importing**

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

## Tổng quan {#overview}

## Overview {#overview}

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.
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ó
sẽ cung cấp phương pháp [shouldComponentUpdate()](docsreact-component.htmlshouldcomponentupdate) nơi bạn có thể thêm
các gợi ý tối ưu hóa cho thuật toán khác biệt của React.

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.
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
bạn biết chính xác nơi bạn cần đặt các phương pháp này.

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

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

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

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.
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
đ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
í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.

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.
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
đó, 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.

### Using Perf {#using-perf}
### Sử dụng Perf {#using-perf}

The `Perf` object can be used with React in development mode only. You should not include this bundle when building your app for production.
Đố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
ứng dụng của mình để sản xuất.

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

- [`start()`](#start)
- [`stop()`](#stop)
- [`getLastMeasurements()`](#getlastmeasurements)
- [`start()`](#start)
- [`stop()`](#stop)
- [`getLastMeasurements()`](#getlastmeasurements)

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

The following methods use the measurements returned by [`Perf.getLastMeasurements()`](#getlastmeasurements) to pretty-print the result.
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
quả.

- [`printInclusive()`](#printinclusive)
- [`printExclusive()`](#printexclusive)
- [`printWasted()`](#printwasted)
- [`printOperations()`](#printoperations)
- [`printDOM()`](#printdom)
- [`printInclusive()`](#printinclusive)
- [`printExclusive()`](#printexclusive)
- [`printWasted()`](#printwasted)
- [`printOperations()`](#printoperations)
- [`printDOM()`](#printdom)

* * *

## Reference {#reference}

### `start()` {#start}

### `stop()` {#stop}

```javascript
Expand All @@ -69,9 +80,10 @@ Perf.start()
Perf.stop()
```

Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
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
thời gian không đáng kể sẽ bị bỏ qua.

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

* * *

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

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.
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
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ứ.

> Note
> Ghi chú
>
> 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.
> Đừ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ẽ
> cập nhật tài liệu
> 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.

* * *

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

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:
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ừ
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:

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

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

"Exclusive" times don't include the times taken to mount the components: processing props, calling `componentWillMount` and `componentDidMount`, etc.
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ụ,
gọi `componentWillMount`
và `componentDidMount`, v.v.

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

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

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

"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.
"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.

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

Expand All @@ -133,7 +152,7 @@ Perf.printWasted(measurements)
Perf.printOperations(measurements)
```

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

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

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

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.
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
dưới dạng bí danh
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.
Loading