Translate quick start page #415

ltmylinh · 2024-04-10T03:59:43Z

No description provided.

vercel · 2024-04-10T03:59:47Z

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

github-actions · 2024-04-10T04:01:52Z

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! 🙌

2giosangmitom · 2024-05-06T08:45:54Z

src/content/learn/index.md


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


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.

It's updated. thanks.

2giosangmitom · 2024-05-06T08:52:55Z

src/content/learn/index.md


-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`:


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`:

It's updated. thanks.

2giosangmitom · 2024-05-06T08:54:30Z

src/content/learn/index.md

@@ -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`:


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`:

It's updated. thanks.

2giosangmitom · 2024-05-06T08:59:46Z

src/content/learn/index.md

@@ -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):


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):

Updated. Thanks

2giosangmitom · 2024-05-06T09:03:35Z

src/content/learn/index.md

@@ -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*/}


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*/}

Updated. Thanks

2giosangmitom · 2024-05-06T09:12:53Z

src/content/learn/index.md


 </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


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.

Updated, thanks

2giosangmitom · 2024-05-06T09:15:10Z

src/content/learn/index.md


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


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 mã.

updated, thanks

2giosangmitom · 2024-05-06T09:16:14Z

src/content/learn/index.md


-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`:


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`:

Thanks. It's updated.

2giosangmitom · 2024-05-06T09:18:44Z

src/content/learn/index.md

@@ -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>`:


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>`:

It's updated. thanks.

2giosangmitom · 2024-05-06T09:22:04Z

src/content/learn/index.md

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


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.

It's updated. Thanks.

Ryan-LT

Looks really good! Thank you

translate quick start page into Vietnamese

181a547

vercel bot had a problem deploying to Preview – vi-react-dev April 10, 2024 04:00 Failure

ltmylinh mentioned this pull request Apr 10, 2024

New Vietnamese Translation Progress #345

Open

ltmylinh added 2 commits April 16, 2024 08:45

solve local conflict

7b774e7

Merge branch 'main' into vn-quick-start-page

09e17e9

vercel bot had a problem deploying to Preview – vi-react-dev April 16, 2024 12:51 Failure

ltmylinh added 2 commits April 16, 2024 09:00

Merge remote-tracking branch 'upstream/main'

d37c4a5

Merge branch 'main' into vn-quick-start-page

e576ec6

vercel bot deployed to Preview – vi-react-dev April 16, 2024 13:01 View deployment

ltmylinh requested review from Ryan-LT and cuongtran8 April 22, 2024 19:43

Merge remote-tracking branch 'upstream/main'

9d1ef67

2giosangmitom reviewed May 6, 2024

View reviewed changes

ltmylinh added 2 commits May 7, 2024 14:55

Merge remote-tracking branch 'upstream/main'

22724b5

Merge branch 'main' into vn-quick-start-page

a47358f

vercel bot deployed to Preview – vi-react-dev May 7, 2024 19:26 View deployment

incorporating the comments

c3ae73c

vercel bot deployed to Preview – vi-react-dev May 7, 2024 19:36 View deployment

ltmylinh added 2 commits May 15, 2024 08:05

Merge remote-tracking branch 'upstream/main'

92a79d8

Merge branch 'main' into vn-quick-start-page

3b0c029

vercel bot deployed to Preview – vi-react-dev May 15, 2024 12:08 View deployment

Ryan-LT approved these changes Jul 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate quick start page #415

Translate quick start page #415

ltmylinh commented Apr 10, 2024

vercel bot commented Apr 10, 2024 •

edited

Loading

github-actions bot commented Apr 10, 2024 •

edited

Loading

📦 Next.js Bundle Analysis for react-dev

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

2giosangmitom May 6, 2024

ltmylinh May 7, 2024

Ryan-LT left a comment


		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.


		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`:

	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`:

	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`:

	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):

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

	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.

	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 mã.


		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`:

	Đầ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`:

	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>`:

Translate quick start page #415

Are you sure you want to change the base?

Translate quick start page #415

Conversation

ltmylinh commented Apr 10, 2024

vercel bot commented Apr 10, 2024 • edited Loading

github-actions bot commented Apr 10, 2024 • edited Loading

Size changes

📦 Next.js Bundle Analysis for react-dev

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ryan-LT left a comment

Choose a reason for hiding this comment

vercel bot commented Apr 10, 2024 •

edited

Loading

github-actions bot commented Apr 10, 2024 •

edited

Loading