` vào giao diện, bạn có thể viết `<>` và `>` để thay thế:
```js {1,11}
<>
@@ -169,21 +169,21 @@ If you don't want to add an extra `
` to your markup, you can write `<>` and
>
```
-This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
+Thẻ trống này được gọi là *[Fragment.](/reference/react/Fragment)* Fragments giúp bạn nhóm các elements mà không để lại bất kỳ dấu vết nào trong cây HTML của trình duyệt.
-#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
+#### Tại sao nhiều thẻ JSX cần được bọc {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
-JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
+JSX trông giống như HTML, nhưng bên dưới nó được chuyển đổi thành các đối tượng JavaScript đơn giản. Bạn không thể trả về hai đối tượng từ một hàm mà không để chúng vào một mảng. Điều này giải thích tại sao bạn cũng không thể trả về hai thẻ JSX mà không để chúng vào một thẻ khác hoặc một Fragment.
-### 2. Close all the tags {/*2-close-all-the-tags*/}
+### 2. Đóng tất cả các thẻ {/*2-close-all-the-tags*/}
-JSX requires tags to be explicitly closed: self-closing tags like `
` must become `
`, and wrapping tags like `
oranges` must be written as `oranges`.
+JSX yêu cầu các thẻ phải được đóng rõ ràng: các thẻ tự đóng như `
` phải trở thành `
` và các thẻ bọc như `
oranges` phải được viết là `oranges `.
-This is how Hedy Lamarr's image and list items look closed:
+Image và danh sách các mục của Hedy Lamarr trông như sau:
```js {2-6,8-10}
<>
@@ -200,11 +200,11 @@ This is how Hedy Lamarr's image and list items look closed:
>
```
-### 3. camelCase
all most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase
tất cả hầu hết mọi thứ! {/*3-camelcase-salls-most-of-the-things*/}
-JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+JSX chuyển thành JavaScript và các thuộc tính được viết bằng JSX trở thành khóa của các đối tượng JavaScript. Trong components của mình, bạn thường muốn đưa các thuộc tính đó thành các biến. Nhưng JavaScript có những hạn chế về tên biến. Ví dụ: tên của chúng không được chứa dấu gạch ngang hoặc các từ dành riêng như `class`.
-This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+Đây là lý do tại sao trong React, nhiều thuộc tính HTML và SVG được viết bằng CamelCase. Ví dụ: thay vì `stroke-width` bạn sử dụng `strokeWidth`. Vì `class` là một từ dành riêng, nên trong React bạn viết `className`, được đặt tên theo [thuộc tính DOM tương ứng](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
```js {4}
-For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
+Vì lý do lịch sử, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) và [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) được viết dưới dạng HTML với dấu gạch ngang.
-### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
+### Pro-tip: Sử dụng Trình chuyển đổi JSX {/*pro-tip-use-a-jsx-converter*/}
-Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
+Việc chuyển đổi tất cả các thuộc tính này trong giao diện hiện tại có thể rất tẻ nhạt! Chúng tôi khuyên bạn nên sử dụng [trình chuyển đổi](https://transform.tools/html-to-jsx) để dịch HTML và SVG hiện có sang JSX. Các trình chuyển đổi rất hữu ích trong thực tế, nhưng vẫn đáng để hiểu những gì đang diễn ra khi đó bạn có thể viết JSX một cách thoải mái nhất.
-Here is your final result:
+Đây là kết quả cuối cùng:
@@ -258,21 +259,18 @@ img { height: 90px }
-Now you know why JSX exists and how to use it in components:
-
-* React components group rendering logic together with markup because they are related.
-* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
-* Error messages will often point you in the right direction to fixing your markup.
-
+* Nhóm React components rendering logic cùng với giao diện vì chúng có liên quan với nhau.
+* JSX tương tự như HTML, có một số điểm khác biệt. Bạn có thể sử dụng [bộ chuyển đổi](https://transform.tools/html-to-jsx) nếu cần.
+* Thông báo lỗi thường sẽ chỉ cho bạn hướng đi đúng để sửa giao diện của mình.
-#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
+#### Chuyển đổi một số HTML sang JSX {/*convert-some-html-to-jsx*/}
-This HTML was pasted into a component, but it's not valid JSX. Fix it:
+HTML này đã được dán vào một component nhưng nó không phải là JSX hợp lệ. Sửa nó:
@@ -308,7 +306,7 @@ export default function Bio() {
-Whether to do it by hand or using the converter is up to you!
+Việc thực hiện bằng tay hay sử dụng công cụ chuyển đổi là tùy thuộc vào bạn!