feat(i18n): translate src/content/learn/adding-interactivity.md from English to Vietnamese

Author: KotonoSora

src/content/learn/adding-interactivity.md

@@ -4,7 +4,7 @@ title: Thêm Tính Tương Tác
 
 <Intro>
 
-Một số thứ trên màn hình cập nhật để phản hồi đầu vào của người dùng. Ví dụ, nhấp vào thư viện ảnh sẽ chuyển đổi ảnh đang hoạt động. Trong React, data thay đổi theo thời gian được gọi là *state*. Bạn có thể thêm state vào bất kỳ component nào và cập nhật nó khi cần thiết. Trong chương này, bạn sẽ học cách viết các component xử lý tương tác, cập nhật state của chúng và hiển thị output khác nhau theo thời gian.
+Một số thứ trên màn hình cập nhật theo phản hồi đầu vào của người dùng. Ví dụ, nhấp vào thư viện ảnh sẽ chuyển đổi ảnh đang được hiển thị. Trong React, dữ liệu thay đổi theo thời gian được gọi là *state*. Bạn có thể thêm state vào bất kỳ component nào và cập nhật nó khi cần thiết. Trong chương này, bạn sẽ học cách viết các component xử lý tương tác, cập nhật state của chúng và hiển thị kết quả khác nhau theo thời gian.
 
 </Intro>
 
@@ -14,17 +14,17 @@ Một số thứ trên màn hình cập nhật để phản hồi đầu vào c
 * [Cách làm cho component "nhớ" thông tin với state](/learn/state-a-components-memory)
 * [Cách React cập nhật UI trong hai giai đoạn](/learn/render-and-commit)
 * [Tại sao state không cập nhật ngay sau khi bạn thay đổi nó](/learn/state-as-a-snapshot)
-* [Cách xếp hàng đợi nhiều cập nhật state](/learn/queueing-a-series-of-state-updates)
+* [Cách xử lý nhiều lần cập nhật state liên tiếp](/learn/queueing-a-series-of-state-updates)
 * [Cách cập nhật một object trong state](/learn/updating-objects-in-state)
 * [Cách cập nhật một array trong state](/learn/updating-arrays-in-state)
 
 </YouWillLearn>
 
-## Phản hồi sự kiện {/*responding-to-events*/}
+## Bắt sự kiện {/*responding-to-events*/}
 
-React cho phép bạn thêm *event handler* vào JSX của mình. Event handler là các function của riêng bạn sẽ được kích hoạt để phản hồi các tương tác của người dùng như nhấp chuột, di chuột, focus vào input của form, và nhiều hơn nữa.
+React cho phép bạn thêm *event handler* vào JSX của mình. Event handler là những function của riêng bạn sẽ được kích hoạt để phản hồi các tương tác của người dùng như nhấp chuột, di chuột, focus vào input của form, và nhiều hơn nữa.
 
-Các component tích hợp sẵn như `<button>` chỉ hỗ trợ các sự kiện tích hợp sẵn của trình duyệt như `onClick`. Tuy nhiên, bạn cũng có thể tạo các component của riêng mình và đặt tên cho các props event handler của chúng theo bất kỳ tên cụ thể cho ứng dụng nào mà bạn thích.
+Những component tích hợp sẵn như `<button>` chỉ hỗ trợ các sự kiện tích hợp sẵn của trình duyệt như `onClick`. Tuy nhiên, bạn cũng có thể tạo những component của riêng mình và đặt tên cho các props event handler của chúng theo bất kỳ tên cụ thể cho ứng dụng nào mà bạn thích.
 
 <Sandpack>
 
@@ -68,15 +68,15 @@ button { margin-right: 10px; }
 
 <LearnMore path="/learn/responding-to-events">
 
-Đọc **[Phản Hồi Sự Kiện](/learn/responding-to-events)** để học cách thêm event handler.
+Đọc **[Bắt Sự Kiện](/learn/responding-to-events)** để học cách thêm event handler.
 
 </LearnMore>
 
 ## State: bộ nhớ của component {/*state-a-components-memory*/}
 
-Các component thường cần thay đổi những gì hiển thị trên màn hình kết quả của một tương tác. Gõ vào form sẽ cập nhật trường input, nhấp "tiếp theo" trên carousel ảnh sẽ thay đổi ảnh nào được hiển thị, nhấp "mua" sẽ đưa sản phẩm vào giỏ hàng. Các component cần "nhớ" các thứ: giá trị input hiện tại, ảnh hiện tại, giỏ hàng. Trong React, loại bộ nhớ cụ thể của component này được gọi là *state*.
+Những component thường cần thay đổi những gì hiển thị trên màn hình theo kết quả của một tương tác. Gõ vào form sẽ cập nhật trường input, nhấp "tiếp theo" trên carousel ảnh sẽ thay đổi ảnh nào được hiển thị, nhấp "mua" sẽ đưa sản phẩm vào giỏ hàng. Những component cần "nhớ" các thứ: giá trị input hiện tại, ảnh hiện tại, giỏ hàng. Trong React, loại bộ nhớ cụ thể của component này được gọi là *state*.
 
-Bạn có thể thêm state vào một component với Hook [`useState`](/reference/react/useState). *Hook* là các function đặc biệt cho phép các component của bạn sử dụng các tính năng React (state là một trong những tính năng đó). Hook `useState` cho phép bạn khai báo một biến state. Nó nhận state ban đầu và trả về một cặp giá trị: state hiện tại và một function setter state cho phép bạn cập nhật nó.
+Bạn có thể thêm state vào một component với Hook [`useState`](/reference/react/useState). *Hook* là những function đặc biệt cho phép những component của bạn sử dụng các tính năng React (state là một trong những tính năng đó). Hook `useState` cho phép bạn khai báo một biến state. Nó nhận state ban đầu và trả về một cặp giá trị: state hiện tại và một function setter state cho phép bạn cập nhật nó.
 
 ```js
 const [index, setIndex] = useState(0);
@@ -235,9 +235,9 @@ button {
 
 ## Render và commit {/*render-and-commit*/}
 
-Trước khi các component của bạn được hiển thị trên màn hình, chúng phải được render bởi React. Hiểu các bước trong quá trình này sẽ giúp bạn suy nghĩ về cách code của bạn thực thi và giải thích hành vi của nó.
+Trước khi những component của bạn được hiển thị trên màn hình, chúng phải được render bởi React. Hiểu các bước trong quá trình này sẽ giúp bạn suy nghĩ về cách code của bạn thực thi và giải thích hành vi của nó.
 
-Hãy tưởng tượng rằng các component của bạn là những đầu bếp trong nhà bếp, pha chế những món ăn ngon từ nguyên liệu. Trong kịch bản này, React là người phục vụ nhận yêu cầu từ khách hàng và mang đến cho họ đơn hàng. Quá trình yêu cầu và phục vụ UI có ba bước:
+Hãy tưởng tượng rằng những component của bạn là những đầu bếp trong nhà bếp, pha chế những món ăn ngon từ nguyên liệu. Trong kịch bản này, React là người phục vụ nhận yêu cầu từ khách hàng và mang đến cho họ đơn hàng. Quá trình yêu cầu và phục vụ UI có ba bước:
 
 1. **Kích hoạt** một render (chuyển đơn hàng của khách đến nhà bếp)
 2. **Render** component (chuẩn bị đơn hàng trong nhà bếp)
@@ -251,21 +251,21 @@ Hãy tưởng tượng rằng các component của bạn là những đầu bế
 
 <LearnMore path="/learn/render-and-commit">
 
-Đọc **[Render và Commit](/learn/render-and-commit)** để học vòng đời của một cập nhật UI.
+Đọc **[Render và Commit](/learn/render-and-commit)** để học vòng đời của một lần cập nhật UI.
 
 </LearnMore>
 
 ## State như một snapshot {/*state-as-a-snapshot*/}
 
-Không giống như các biến JavaScript thông thường, React state hoạt động giống như một snapshot hơn. Thiết lập nó không thay đổi biến state mà bạn đã có, mà thay vào đó kích hoạt một re-render. Điều này có thể gây ngạc nhiên lúc đầu!
+Không giống như những biến JavaScript thông thường, React state hoạt động giống như một snapshot hơn. Thiết lập nó không thay đổi biến state mà bạn đã có, mà thay vào đó kích hoạt một re-render. Điều này có thể gây ngạc nhiên lúc đầu!
 
 ```js
 console.log(count);  // 0
 setCount(count + 1); // Yêu cầu một re-render với 1
 console.log(count);  // Vẫn là 0!
 ```
 
-Hành vi này giúp bạn tránh các bug tinh vi. Đây là một ứng dụng chat nhỏ. Hãy thử đoán xem điều gì sẽ xảy ra nếu bạn nhấn "Gửi" trước *rồi sau đó* thay đổi người nhận thành Bob. Tên của ai sẽ xuất hiện trong `alert` năm giây sau?
+Hành vi này giúp bạn tránh những bug tinh vi. Đây là một ứng dụng chat nhỏ. Hãy thử đoán xem điều gì sẽ xảy ra nếu bạn nhấn "Gửi" trước *rồi sau đó* thay đổi người nhận thành Bob. Tên của ai sẽ xuất hiện trong `alert` năm giây sau?
 
 <Sandpack>
 
@@ -366,7 +366,7 @@ setScore(score + 1); // setScore(0 + 1);
 console.log(score);  // 0
 ```
 
-Bạn có thể sửa điều này bằng cách truyền một *updater function* khi thiết lập state. Chú ý cách thay thế `setScore(score + 1)` bằng `setScore(s => s + 1)` sửa nút "+3". Điều này cho phép bạn xếp hàng đợi nhiều cập nhật state.
+Bạn có thể sửa điều này bằng cách truyền một *updater function* khi thiết lập state. Chú ý cách thay thế `setScore(score + 1)` bằng `setScore(s => s + 1)` sửa được nút "+3". Điều này cho phép bạn xếp hàng đợi nhiều lần cập nhật state.
 
 <Sandpack>
 
@@ -408,9 +408,9 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 ## Cập nhật object trong state {/*updating-objects-in-state*/}
 
-State có thể chứa bất kỳ loại giá trị JavaScript nào, bao gồm object. Nhưng bạn không nên thay đổi object và array mà bạn giữ trong React state một cách trực tiếp. Thay vào đó, khi bạn muốn cập nhật một object và array, bạn cần tạo một cái mới (hoặc tạo một bản sao của một cái hiện có), và sau đó cập nhật state để sử dụng bản sao đó.
+State có thể chứa bất kỳ loại giá trị JavaScript nào, bao gồm object. Nhưng bạn không nên thay đổi những object và array mà bạn giữ trong React state một cách trực tiếp. Thay vào đó, khi bạn muốn cập nhật một object và array, bạn cần tạo một cái mới (hoặc tạo một bản sao của một cái hiện có), và sau đó cập nhật state để sử dụng bản sao đó.
 
-Thường thì, bạn sẽ sử dụng cú pháp spread `...` để sao chép object và array mà bạn muốn thay đổi. Ví dụ, cập nhật một nested object có thể trông như thế này:
+Thường thì, bạn sẽ sử dụng cú pháp spread `...` để sao chép những object và array mà bạn muốn thay đổi. Ví dụ, cập nhật một nested object có thể trông như thế này:
 
 <Sandpack>
 
@@ -518,7 +518,7 @@ img { width: 200px; height: 200px; }
 
 </Sandpack>
 
-Nếu việc sao chép object trong code trở nên tẻ nhạt, bạn có thể sử dụng một thư viện như [Immer](https://github.com/immerjs/use-immer) để giảm code lặp lại:
+Nếu việc sao chép object trong code trở nên tẻ nhạt, bạn có thể sử dụng một thư viện như [Immer](https://github.com/immerjs/use-immer) để giảm thiểu code lặp lại:
 
 <Sandpack>
 
@@ -639,7 +639,7 @@ img { width: 200px; height: 200px; }
 
 ## Cập nhật array trong state {/*updating-arrays-in-state*/}
 
-Array là một loại object JavaScript có thể thay đổi khác mà bạn có thể lưu trữ trong state và nên coi như chỉ đọc. Giống như với object, khi bạn muốn cập nhật một array được lưu trữ trong state, bạn cần tạo một cái mới (hoặc tạo một bản sao của một cái hiện có), và sau đó thiết lập state để sử dụng array mới:
+Array là một loại object JavaScript có thể thay đổi (mutable) khác mà bạn có thể lưu trữ trong state, nhưng nên coi như chỉ đọc được (read-only). Giống như với object, khi bạn muốn cập nhật một array được lưu trữ trong state, bạn cần tạo một cái mới (hoặc tạo một bản sao của một cái hiện có), và sau đó thiết lập state để sử dụng array mới:
 
 <Sandpack>
 
@@ -705,7 +705,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-Nếu việc sao chép array trong code trở nên tẻ nhạt, bạn có thể sử dụng một thư viện như [Immer](https://github.com/immerjs/use-immer) để giảm code lặp lại:
+Nếu việc sao chép array trong code trở nên tẻ nhạt, bạn có thể sử dụng một thư viện như [Immer](https://github.com/immerjs/use-immer) để giảm thiểu code lặp lại:
 
 <Sandpack>
 
@@ -795,6 +795,6 @@ function ItemList({ artworks, onToggle }) {
 
 ## Tiếp theo là gì? {/*whats-next*/}
 
-Hãy đến [Phản Hồi Sự Kiện](/learn/responding-to-events) để bắt đầu đọc chương này từng trang một!
+Hãy đến [Bắt Sự Kiện](/learn/responding-to-events) để bắt đầu đọc chương này từng trang một!
 
 Hoặc, nếu bạn đã quen thuộc với những chủ đề này, tại sao không đọc về [Quản Lý State](/learn/managing-state)?