Skip to content

feat(i18n): translate src/content/learn/sharing-state-between-components.md from English to Vietnamese #477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

KotonoSora
Copy link
Contributor

🇻🇳 Vietnamese Translation: Sharing State Between Components

Hi! I'm contributing as a volunteer translator for vi.react.dev, and this PR adds the Vietnamese translation for the "Sharing State Between Components" lesson.

What's included

  • Vietnamese translation of sharing-state-between-components.md
  • Preserved all code examples and markdown formatting
  • Kept terminology consistent with existing translations

Changes

  • ✅ Fully translated the guide covering React state lifting and component coordination
  • ✅ Maintained code blocks, links, Sandpack components and Challenge/Solution sections
  • ✅ Verified all internal links and formatting render correctly

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:
"Sharing State Between Components" → "Chia Sẻ State Giữa Các Component"

Các phần chính:

  • "Lifting state up by example" → "Lifting state up bằng ví dụ"
  • "Step 1: Remove state from the child components" → "Bước 1: Loại bỏ state khỏi các component con"
  • "Step 2: Pass hardcoded data from the common parent" → "Bước 2: Truyền dữ liệu cứng từ parent chung"
  • "Step 3: Add state to the common parent" → "Bước 3: Thêm state vào parent chung"
  • "Controlled and uncontrolled components" → "Controlled và uncontrolled component"
  • "A single source of truth for each state" → "Một nguồn chân lý duy nhất cho mỗi state"

Phần Challenges:

  • "Synced inputs" → "Input đồng bộ"
  • "Filtering a list" → "Lọc danh sách"

Các khái niệm kỹ thuật được giữ nguyên:

  • "lifting state up", "props", "parent", "state", "component" được giữ nguyên hoặc dịch phù hợp với context

Copy link

vercel bot commented Jun 6, 2025

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 6, 2025 2:18am

Copy link
Collaborator

@chriskhoa chriskhoa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only a few small suggestions. Looks good overall! Thanks!

---

<Intro>

Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code.
Đôi khi, bạn muốn state của hai component luôn thay đổi cùng nhau. Để làm được điều này, hãy loại bỏ state khỏi cả hai component, di chuyển nó lên parent gần nhất chung của chúng, và sau đó truyền xuống cho chúng thông qua props. Điều này được gọi là *lifting state up*, và đây là một trong những việc phổ biến nhất mà bạn sẽ làm khi viết code React.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Đôi khi, bạn muốn state của hai component luôn thay đổi cùng nhau. Để làm được điều này, hãy loại bỏ state khỏi cả hai component, di chuyển nó lên parent gần nhất chung của chúng, và sau đó truyền xuống cho chúng thông qua props. Điều này được gọi là *lifting state up*, và đây là một trong những việc phổ biến nhất mà bạn sẽ làm khi viết code React.
Đôi khi, bạn muốn state của hai component luôn thay đổi cùng nhau. Để làm được điều này, hãy loại bỏ state khỏi cả hai component, di chuyển nó lên parent gần nhất chung của chúng, và sau đó truyền xuống cho chúng thông qua props. Điều này được gọi là *lifting state up* (đẩy state lên), và đây là một trong những việc phổ biến nhất mà bạn sẽ làm khi viết code React.


</Intro>

<YouWillLearn>

- How to share state between components by lifting it up
- What are controlled and uncontrolled components
- Cách chia sẻ state giữa các component bằng cách lifting nó lên
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Cách chia sẻ state giữa các component bằng cách lifting nó lên
- Cách chia sẻ state giữa các component bằng cách lifting (đẩy) nó lên


</Diagram>

</DiagramGroup>

<DeepDive>

#### Controlled and uncontrolled components {/*controlled-and-uncontrolled-components*/}
#### Controlled uncontrolled component {/*controlled-and-uncontrolled-components*/}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
#### Controlled và uncontrolled component {/*controlled-and-uncontrolled-components*/}
#### Controlled (Kiểm soát) và uncontrolled (Không kiểm soát) component {/*controlled-and-uncontrolled-components*/}

- How to share state between components by lifting it up
- What are controlled and uncontrolled components
- Cách chia sẻ state giữa các component bằng cách lifting nó lên
- Controlled và uncontrolled component là gì
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Controlled và uncontrolled component là gì
- Controlled (kiểm soát) và uncontrolled (không kiểm soát) component là gì


When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later.
Khi viết một component, hãy xem xét thông tin nào trong đó nên được controlled (thông qua props), và thông tin nào nên là uncontrolled (thông qua state). Nhưng bạn luôn có thể thay đổi ý kiến và refactor sau.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Khi viết một component, hãy xem xét thông tin nào trong đó nên được controlled (thông qua props), và thông tin nào nên là uncontrolled (thông qua state). Nhưng bạn luôn có thể thay đổi ý kiến và refactor sau.
Khi viết một component, hãy xem xét thông tin nào trong đó nên được controlled (thông qua props), và thông tin nào nên là uncontrolled (thông qua state). Nhưng bạn luôn có thể thay đổi ý kiến và cải tiến sau.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants