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

KotonoSora · 2025-06-01T07:11:19Z

🇻🇳 Vietnamese Translation: Adding Interactivity

Hi! I'm starting as a volunteer translator for vi.react.dev, and this is my first contribution.

What's included

Vietnamese translation of src/content/learn/adding-interactivity.md
Preserved all code examples and markdown formatting
Maintained consistency with existing Vietnamese translations

Changes

✅ Translated the complete guide covering React interactivity concepts
✅ Kept technical terminology consistent
✅ Verified all links and formatting work properly

Looking forward to contributing more translations to the project! 🚀

Tóm tắt những gì đã được dịch:

Tiêu đề và phần Intro: "Adding Interactivity" → "Thêm Tính Tương Tác"

Các phần chính:

"Responding to events" → "Phản hồi sự kiện"
"State: a component's memory" → "State: bộ nhớ của component"
"Render and commit" → "Render và commit"
"State as a snapshot" → "State như một snapshot"
"Queueing a series of state updates" → "Xếp hàng đợi một chuỗi cập nhật state"
"Updating objects in state" → "Cập nhật object trong state"
"Updating arrays in state" → "Cập nhật array trong state"
"What's next?" → "Tiếp theo là gì?"
Code examples đã được dịch:

Alert messages: 'Playing!' → 'Đang phát!', 'Uploading!' → 'Đang tải lên!'
Button text: 'Play Movie' → 'Phát Phim', 'Upload Image' → 'Tải Lên Ảnh'
Gallery controls: 'Next' → 'Tiếp theo', 'Hide/Show' → 'Ẩn/Hiện'
Form labels: 'Name' → 'Tên', 'Title' → 'Tiêu đề', 'City' → 'Thành phố'
Chat app: 'Send' → 'Gửi', 'Message' → 'Tin nhắn'
Counter: 'Score' → 'Điểm số'
Art Bucket List titles và descriptions
Tuân thủ quy tắc dịch:

Giữ nguyên các thuật ngữ kỹ thuật: Component, Hook, Props, Function, State, Render
Dịch các thuật ngữ user-facing: Application → Ứng dụng, Event → Sự kiện
Sử dụng văn phong kỹ thuật phù hợp cho tiếng Việt
Dịch tất cả LearnMore sections và liên kết nội bộ

…English to Vietnamese

vercel · 2025-06-01T07:11:22Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
vi-legacy-reactjs-org	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2025 1:45am

chriskhoa

Thanks for the contribution! Great translation. Please check out my suggestions.

chriskhoa · 2025-06-06T20:07:58Z

src/content/learn/adding-interactivity.md

 ---

 <Intro>

-Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time.
+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.


Suggested change

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

chriskhoa · 2025-06-06T20:13:14Z

src/content/learn/adding-interactivity.md

+* [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)


Suggested change

* [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)

chriskhoa · 2025-06-06T20:16:03Z

src/content/learn/adding-interactivity.md


-Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.*
+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*.


Suggested change

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

Các 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. 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*.

chriskhoa · 2025-06-06T20:33:13Z

src/content/learn/adding-interactivity.md


-Arrays are another type of mutable JavaScript objects you can store in state and should treat as read-only. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array:
+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:


Suggested change

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:

…English to Vietnamese

KotonoSora · 2025-06-07T01:47:05Z

Thank you @chriskhoa! Your suggestion greatly improves the readability and naturalness of the Vietnamese translation. I've implemented the changes based on your feedback. Here's a summary of the translation improvements:

Ngôn ngữ tự nhiên:

"dữ liệu thay đổi theo thời gian" thay vì "data thay đổi theo thời gian"
"hiển thị kết quả khác nhau theo thời gian" thay vì "hiển thị output khác nhau theo thời gian"
"những component của riêng mình" thay vì "các component của riêng mình"
"những function của riêng bạn" thay vì "các function của riêng bạn"
"những component thường cần thay đổi" thay vì "các component thường cần thay đổi"
"những component cần 'nhớ'" thay vì "các component cần 'nhớ'"
"những function đặc biệt" thay vì "các function đặc biệt"
"những component của bạn" thay vì "các component của bạn"
"những đầu bếp trong nhà bếp" thay vì "các đầu bếp trong nhà bếp"
"những biến JavaScript thông thường" thay vì "các biến JavaScript thông thường"
"những bug tinh vi" thay vì "các bug tinh vi"
"sửa được nút '+3'" thay vì "sửa nút '+3'"
"những object và array" thay vì "object và array"

Thuật ngữ nhất quán:

"Bắt sự kiện" thay vì "Phản hồi sự kiện" (cho section header)
"dữ liệu" thay vì "data" (giữ nguyên các thuật ngữ kỹ thuật khác)
"kết quả" thay vì "output" khi nói về hiển thị
"giảm thiểu code lặp lại" thay vì "giảm code lặp lại"

Cải thiện khác:

"cách xử lý nhiều lần cập nhật state liên tiếp" thay vì "cách xử lí nhiều lần cập nhật state liên tiếp"
Đảm bảo tính nhất quán trong việc sử dụng "những" thay vì "các" để nghe tự nhiên hơn

KotonoSora · 2025-06-07T01:51:57Z

src/content/learn/adding-interactivity.md


 <Sandpack>

 ```js
 export default function App() {
  return (
    <Toolbar
-      onPlayMovie={() => alert('Playing!')}
-      onUploadImage={() => alert('Uploading!')}
+      onPlayMovie={() => alert('Đang phát!')}


Hi @chriskhoa!
Is it allowed to translate code snippets? Because this is the first file I started translating, so there are some code snippets in the file that I have already translated to Vietnamese.

In this case, it makes sense to translate, so you are good!

chriskhoa

Looking great! Thanks for the follow-up.

chriskhoa · 2025-06-07T22:58:25Z

src/content/learn/adding-interactivity.md


 <Sandpack>

 ```js
 export default function App() {
  return (
    <Toolbar
-      onPlayMovie={() => alert('Playing!')}
-      onUploadImage={() => alert('Uploading!')}
+      onPlayMovie={() => alert('Đang phát!')}


In this case, it makes sense to translate, so you are good!

KotonoSora added 2 commits June 1, 2025 13:42

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

d0a87bb

…English to Vietnamese

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

9445a14

…English to Vietnamese

vercel bot deployed to Preview – vi-react-dev June 1, 2025 07:12 View deployment

KotonoSora mentioned this pull request Jun 4, 2025

New Vietnamese Translation Progress #345

Open

chriskhoa requested changes Jun 6, 2025

View reviewed changes

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

fa74abe

…English to Vietnamese

vercel bot deployed to Preview – vi-react-dev June 7, 2025 01:46 View deployment

KotonoSora commented Jun 7, 2025

View reviewed changes

chriskhoa approved these changes Jun 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

KotonoSora commented Jun 1, 2025

Uh oh!

vercel bot commented Jun 1, 2025 •

edited

Loading

Uh oh!

chriskhoa left a comment

Uh oh!

chriskhoa Jun 6, 2025

Uh oh!

chriskhoa Jun 6, 2025

Uh oh!

chriskhoa Jun 6, 2025

Uh oh!

chriskhoa Jun 6, 2025

Uh oh!

KotonoSora commented Jun 7, 2025

Uh oh!

KotonoSora Jun 7, 2025

Uh oh!

chriskhoa Jun 7, 2025

Uh oh!

chriskhoa left a comment

Uh oh!

chriskhoa Jun 7, 2025

Uh oh!

Uh oh!

	* [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)


		Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state.
		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.


		Arrays are another type of mutable JavaScript objects you can store in state and should treat as read-only. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array:
		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:

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

KotonoSora commented Jun 1, 2025

🇻🇳 Vietnamese Translation: Adding Interactivity

What's included

Changes

Uh oh!

vercel bot commented Jun 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chriskhoa left a comment

Choose a reason for hiding this comment

Uh oh!

chriskhoa Jun 6, 2025

Choose a reason for hiding this comment

Uh oh!

chriskhoa Jun 6, 2025

Choose a reason for hiding this comment

Uh oh!

chriskhoa Jun 6, 2025

Choose a reason for hiding this comment

Uh oh!

chriskhoa Jun 6, 2025

Choose a reason for hiding this comment

Uh oh!

KotonoSora commented Jun 7, 2025

Uh oh!

KotonoSora Jun 7, 2025

Choose a reason for hiding this comment

Uh oh!

chriskhoa Jun 7, 2025

Choose a reason for hiding this comment

Uh oh!

chriskhoa left a comment

Choose a reason for hiding this comment

Uh oh!

chriskhoa Jun 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vercel bot commented Jun 1, 2025 •

edited

Loading