Skip to content
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

Translate quick start page #415

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

ltmylinh
Copy link
Collaborator

No description provided.

Copy link

vercel bot commented Apr 10, 2024

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

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
vi-legacy-reactjs-org ⬜️ Ignored (Inspect) Visit Preview May 15, 2024 0:07am

Copy link

github-actions bot commented Apr 10, 2024

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌


The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box.
Cú pháp đánh dấu bạn đã thấy ở trên được gọi là *JSX*. Nó là tùy chọn, nhưng hầu hết các dự án React sử dụng JSX vì sự tiện lợi của nó. Tất cả [các công cụ chúng tôi giới thiệu cho việc phát triển cục bộ](/learn/installation) đều hỗ trợ JSX từ đầu.

Choose a reason for hiding this comment

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

Suggested change
Cú pháp đánh dấu bạn đã thấy ở trên được gọi là *JSX*. Nó là tùy chọn, nhưng hầu hết các dự án React sử dụng JSX vì sự tiện lợi của nó. Tất cả [các công cụ chúng tôi giới thiệu cho việc phát triển cục bộ](/learn/installation) đều hỗ trợ JSX từ đầu.
Cú pháp đánh dấu bạn đã thấy ở trên được gọi là *JSX*. Nó không bắt buộc, nhưng hầu hết các dự án React sử dụng JSX vì sự tiện lợi của nó. Tất cả [các công cụ chúng tôi giới thiệu cho việc phát triển cục bộ](/learn/installation) đều hỗ trợ JSX từ đầu.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's updated. thanks.


JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`:
JSX cho phép bạn đặt cú pháp đánh dấu vào JavaScript. Dấu ngoặc nhọn cho phép bạn "thoát lại" vào JavaScript để bạn có thể nhúng một biến từ mã của bạn và hiển thị nó cho người dùng. Ví dụ, điều này sẽ hiển thị `user.name`:

Choose a reason for hiding this comment

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

Suggested change
JSX cho phép bạn đặt cú pháp đánh dấu vào JavaScript. Dấu ngoặc nhọn cho phép bạn "thoát lại" vào JavaScript để bạn có thể nhúng một biến từ mã của bạn và hiển thị nó cho người dùng. Ví dụ, điều này sẽ hiển thị `user.name`:
JSX cho phép bạn đặt cú pháp đánh dấu (markup) vào JavaScript. Dấu ngoặc nhọn cho phép bạn "trở lại" JavaScript để nhúng một biến từ mã của bạn và hiển thị nó cho người dùng. Ví dụ, điều này sẽ hiển thị `user.name`:

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's updated. thanks.

@@ -125,7 +125,8 @@ return (
);
```

You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute:

Bạn cũng có thể "thoát vào JavaScript" từ các thuộc tính JSX, nhưng bạn phải sử dụng dấu ngoặc nhọn *thay vì* dấu ngoặc kép. Ví dụ, `className="avatar"` truyền chuỗi `"avatar"` làm lớp CSS, nhưng `src={user.imageUrl}` đọc giá trị biến JavaScript `user.imageUrl`, và sau đó truyền giá trị đó làm thuộc tính `src`:

Choose a reason for hiding this comment

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

Suggested change
Bạn cũng có thể "thoát vào JavaScript" từ các thuộc tính JSX, nhưng bạn phải sử dụng dấu ngoặc nhọn *thay vì* dấu ngoặc kép. Ví dụ, `className="avatar"` truyền chuỗi `"avatar"` làm lớp CSS, nhưng `src={user.imageUrl}` đọc giá trị biến JavaScript `user.imageUrl`, và sau đó truyền giá trị đó làm thuộc tính `src`:
Bạn cũng có thể "trở lại JavaScript" từ các thuộc tính JSX, nhưng bạn phải sử dụng dấu ngoặc nhọn *thay vì* dấu ngoặc kép. Ví dụ, `className="avatar"` truyền chuỗi `"avatar"` làm lớp CSS, nhưng `src={user.imageUrl}` đọc giá trị biến JavaScript `user.imageUrl`, và sau đó truyền giá trị đó làm thuộc tính `src`:

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's updated. thanks.

@@ -209,21 +210,21 @@ If you prefer more compact code, you can use the [conditional `?` operator.](htt
</div>
```

When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
Khi bạn không cần dùng nhánh `else`, bạn cũng có thể sử dụng cách ngắn hơn [điều kiện `&&` cú pháp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):

Choose a reason for hiding this comment

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

Suggested change
Khi bạn không cần dùng nhánh `else`, bạn cũng có thể sử dụng cách ngắn hơn [điều kiện `&&` cú pháp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
Khi bạn không cần nhánh `else`, bạn cũng có thể sử dụng cú pháp [điều kiện `&&` logic ngắn gọn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Updated. Thanks

@@ -278,9 +279,9 @@ export default function ShoppingList() {

</Sandpack>

## Responding to events {/*responding-to-events*/}
## Phản ứng tới các sự kiện {/*responding-to-events*/}

Choose a reason for hiding this comment

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

Suggested change
## Phản ứng tới các sự kiện {/*responding-to-events*/}
## Xử lý các sự kiện {/*responding-to-events*/}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Updated. Thanks


</Diagram>

<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down." >

On click, `MyApp` updates its `count` state to `1` and passes it down to both children
Khi nhấp vào, `MyApp` cập nhật trạng thái `count` của nó thành `1` và truyền nó xuống cả hai children

Choose a reason for hiding this comment

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

Suggested change
Khi nhấp vào, `MyApp` cập nhật trạng thái `count` của nó thành `1` và truyền nó xuống cả hai children
Khi được nhấp vào, `MyApp` cập nhật trạng thái `count` của nó thành `1` và truyền nó xuống cho cả hai thành phần con.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Updated, thanks


</Diagram>

</DiagramGroup>

Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code.
Bây giờ khi bạn nhấp vào bất kỳ nút nào, `count` trong `MyApp` sẽ thay đổi, điều này sẽ thay đổi cả hai count trong `MyButton`. Đây là cách bạn có thể biểu diễn điều này trong code.

Choose a reason for hiding this comment

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

Suggested change
Bây giờ khi bạn nhấp vào bất kỳ nút nào, `count` trong `MyApp` sẽ thay đổi, điều này sẽ thay đổi cả hai count trong `MyButton`. Đây là cách bạn có thể biểu diễn điều này trong code.
Bây giờ khi bạn nhấp vào bất kỳ nút nào, `count` trong `MyApp` sẽ thay đổi, điều này sẽ thay đổi cả hai `count` trong `MyButton`. Dưới đây là cách bạn có thể biểu diễn điều này trong .

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

updated, thanks


First, *move the state up* from `MyButton` into `MyApp`:
Đầu tiên, *dịch chuyển trạng thái (state) đi lên* từ `MyButton` vào `MyApp`:

Choose a reason for hiding this comment

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

Suggested change
Đầu tiên, *dịch chuyển trạng thái (state) đi lên* từ `MyButton` vào `MyApp`:
Đầu tiên, *di chuyển trạng thái (state) lên* từ `MyButton` vào `MyApp`:

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Thanks. It's updated.

@@ -456,7 +457,7 @@ function MyButton() {

```

Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like `<img>`:
Sau đó, *truyền trạng thái (state) xuống* từ `MyApp` đến mỗi `MyButton`, cùng với trình xử lý click được chia sẻ. Bạn có thể truyền thông tin cho `MyButton` bằng cách sử dụng dấu ngoặc nhọn JSX, giống như bạn đã làm trước đây với các thẻ tích hợp như `<img>`:

Choose a reason for hiding this comment

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

Suggested change
Sau đó, *truyền trạng thái (state) xuống* từ `MyApp` đến mỗi `MyButton`, cùng với trình xử lý click được chia sẻ. Bạn có thể truyền thông tin cho `MyButton` bằng cách sử dụng dấu ngoặc nhọn JSX, giống như bạn đã làm trước đây với các thẻ tích hợp như `<img>`:
Sau đó, *truyền trạng thái (state) xuống* từ `MyApp` đến mỗi `MyButton`, cùng với trình xử lý click chung. Bạn có thể truyền thông tin cho `MyButton` bằng cách sử dụng dấu ngoặc nhọn JSX, tương tự như bạn đã làm trước đó với các thẻ tích hợp như `<img>`:

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's updated. thanks.

@@ -490,7 +491,7 @@ function MyButton({ count, onClick }) {
}
```

When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components.
Khi bạn nhấp vào nút, trình xử lý `onClick` được kích hoạt. Mỗi prop `onClick` của nút được đặt thành hàm `handleClick` bên trong `MyApp`, vì vậy mã bên trong nó chạy. Mã đó gọi `setCount(count + 1)`, tăng biến trạng thái `count`. Giá trị `count` mới được truyền như một prop cho mỗi nút, vì vậy chúng đều hiển thị giá trị mới. Điều này được gọi là "nâng cao trạng thái". Bằng cách di chuyển trạng thái lên, bạn đã chia sẻ nó giữa các thành phần.

Choose a reason for hiding this comment

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

Suggested change
Khi bạn nhấp vào nút, trình xử lý `onClick` được kích hoạt. Mỗi prop `onClick` của nút được đặt thành hàm `handleClick` bên trong `MyApp`, vì vậy mã bên trong nó chạy. Mã đó gọi `setCount(count + 1)`, tăng biến trạng thái `count`. Giá trị `count` mới được truyền như một prop cho mỗi nút, vì vậy chúng đều hiển thị giá trị mới. Điều này được gọi là "nâng cao trạng thái". Bằng cách di chuyển trạng thái lên, bạn đã chia sẻ nó giữa các thành phần.
Khi bạn nhấp vào nút, trình xử lý `onClick` sẽ được kích hoạt. Mỗi prop `onClick` của nút đã được đặt thành hàm `handleClick` bên trong `MyApp`, do đó mã bên trong nó được thực thi. Mã này gọi `setCount(count + 1)`, tăng biến trạng thái `count`. Giá trị `count` mới được truyền dưới dạng một prop cho mỗi nút, vì vậy tất cả chúng đều hiển thị giá trị mới. Điều này được gọi là "di chuyển trạng thái lên". Bằng cách di chuyển trạng thái lên, bạn đã chia sẻ nó giữa các thành phần.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's updated. Thanks.

Copy link
Member

@Ryan-LT Ryan-LT left a comment

Choose a reason for hiding this comment

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

Looks really good! Thank you

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.

3 participants