diff --git a/next-env.d.ts b/next-env.d.ts index 3cd7048ed..52e831b43 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,5 @@ /// /// -/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 9cdf256fb..9b53af7ea 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -284,7 +284,7 @@ export function Footer() {
- Copyright © Meta Platforms, Inc + Bản quyền © Meta Platforms, Inc
- no uwu plz + tắt uwu
- Logo by + Logo bởi @@ -313,50 +313,48 @@ export function Footer() {
- Learn React - - Quick Start - Installation - - Describing the UI + Học React + Bắt Đầu Nhanh + Cài Đặt + Mô Tả UI - Adding Interactivity + Thêm Tính Tương Tác + + + Quản Lý Trạng Thái - Managing State - Escape Hatches + Các Lối Thoát
- API Reference + Tham Khảo API React APIs React DOM APIs
- Community + Cộng Đồng - Code of Conduct + Quy Tắc Ứng Xử - Meet the Team + Gặp Gỡ Đội Ngũ - Docs Contributors - - - Acknowledgements + Người Đóng Góp Tài Liệu + Lời Cảm Ơn
- More + Thêm Blog React Native - Privacy + Quyền Riêng Tư - Terms + Điều Khoản

- The library for web and native user interfaces + Thư viện để xây dựng giao diện người dùng web và native

- Learn React + label="Học React"> + Học React - API Reference + label="Tham khảo API"> + Tham khảo API
-
Create user interfaces from components
+
Tạo giao diện người dùng từ các component
- React lets you build user interfaces out of individual pieces - called components. Create your own React components like{' '} - Thumbnail, LikeButton, and{' '} - Video. Then combine them into entire screens, pages, - and apps. + React cho phép bạn xây dựng giao diện người dùng từ các phần riêng + lẻ được gọi là component. Tạo các React component của riêng bạn + như Thumbnail, LikeButton, và{' '} + Video. Sau đó, kết hợp chúng thành toàn bộ màn hình, + trang và ứng dụng.
@@ -174,22 +174,22 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other - developers, using React feels the same. It is designed to let you - seamlessly combine components written by independent people, - teams, and organizations. + Cho dù bạn làm việc một mình hay với hàng ngàn nhà phát triển + khác, việc sử dụng React đều mang lại cảm giác như nhau. Nó được + thiết kế để cho phép bạn kết hợp liền mạch các component được viết + bởi những người, nhóm và tổ chức độc lập.
-
Write components with code and markup
+
Viết component bằng code và markup
- React components are JavaScript functions. Want to show some - content conditionally? Use an if statement. - Displaying a list? Try array map(). Learning React is - learning programming. + React component là các hàm JavaScript. Bạn muốn hiển thị một số + nội dung có điều kiện? Sử dụng câu lệnh if. Hiển thị + một danh sách? Hãy thử map() của mảng. Học React là + học lập trình.
@@ -197,22 +197,21 @@ export function HomeContent() {
- This markup syntax is called JSX. It is a JavaScript syntax - extension popularized by React. Putting JSX markup close to - related rendering logic makes React components easy to create, - maintain, and delete. + Cú pháp đánh dấu này được gọi là JSX. Đây là phần mở rộng cú pháp + JavaScript được React phổ biến. Đặt đánh dấu JSX gần với logic kết + xuất liên quan giúp các thành phần React dễ tạo, bảo trì và xóa.
-
Add interactivity wherever you need it
+
Thêm tính tương tác ở bất cứ đâu bạn cần
- React components receive data and return what should appear on the - screen. You can pass them new data in response to an interaction, - like when the user types into an input. React will then update the - screen to match the new data. + React component nhận dữ liệu và trả về những gì sẽ xuất hiện trên + màn hình. Bạn có thể truyền cho chúng dữ liệu mới để đáp ứng một + tương tác, chẳng hạn như khi người dùng nhập vào một input. Sau + đó, React sẽ cập nhật màn hình để phù hợp với dữ liệu mới.
@@ -220,16 +219,16 @@ export function HomeContent() {
- You don’t have to build your whole page in React. Add React to - your existing HTML page, and render interactive React components - anywhere on it. + Bạn không cần phải xây dựng toàn bộ trang của mình bằng React. + Thêm React vào trang HTML hiện có của bạn và hiển thị các React + component tương tác ở bất kỳ đâu trên đó.
- Add React to your page + Thêm React vào trang của bạn
@@ -238,14 +237,15 @@ export function HomeContent() {
- Go full-stack
- with a framework + Đi full-stack
+ với một framework
- React is a library. It lets you put components together, but it - doesn’t prescribe how to do routing and data fetching. To build an - entire app with React, we recommend a full-stack React framework - like Next.js or{' '} + React là một thư viện. Nó cho phép bạn ghép các component lại với + nhau, nhưng nó không quy định cách thực hiện routing và tìm nạp dữ + liệu. Để xây dựng toàn bộ ứng dụng bằng React, chúng tôi khuyên + bạn nên sử dụng một React framework full-stack như{' '} + Next.js hoặc{' '} Remix.
@@ -254,17 +254,18 @@ export function HomeContent() {
- React is also an architecture. Frameworks that implement it let - you fetch data in asynchronous components that run on the server - or even during the build. Read data from a file or a database, and - pass it down to your interactive components. + React cũng là một kiến trúc. Các framework triển khai nó cho phép + bạn tìm nạp dữ liệu trong các component không đồng bộ chạy trên + server hoặc thậm chí trong quá trình build. Đọc dữ liệu từ một + file hoặc một database và chuyển nó xuống các component tương tác + của bạn.
- Get started with a framework + Bắt đầu với một framework
@@ -272,12 +273,13 @@ export function HomeContent() {
-
Use the best from every platform
+
Sử dụng những gì tốt nhất từ mọi nền tảng
- People love web and native apps for different reasons. React - lets you build both web apps and native apps using the same - skills. It leans upon each platform’s unique strengths to let - your interfaces feel just right on every platform. + Mọi người yêu thích các ứng dụng web và native vì những lý do + khác nhau. React cho phép bạn xây dựng cả ứng dụng web và ứng + dụng native bằng cách sử dụng cùng một kỹ năng. Nó dựa vào những + điểm mạnh riêng của mỗi nền tảng để cho phép giao diện của bạn + có cảm giác phù hợp trên mọi nền tảng.
@@ -291,15 +293,16 @@ export function HomeContent() {

- Stay true to the web + Luôn đúng với web

- People expect web app pages to load fast. On the server, - React lets you start streaming HTML while you’re still - fetching data, progressively filling in the remaining - content before any JavaScript code loads. On the client, - React can use standard web APIs to keep your UI - responsive even in the middle of rendering. + Mọi người mong đợi các trang ứng dụng web tải nhanh. + Trên server, React cho phép bạn bắt đầu streaming HTML + trong khi bạn vẫn đang tìm nạp dữ liệu, lần lượt điền + vào nội dung còn lại trước khi bất kỳ code JavaScript + nào được tải. Trên client, React có thể sử dụng các API + web tiêu chuẩn để giữ cho UI của bạn phản hồi nhanh ngay + cả khi đang hiển thị.

@@ -356,42 +359,25 @@ export function HomeContent() { fill="currentColor" /> - - - -

- Go truly native + Đi thật sự native

- People expect native apps to look and feel like their - platform.{' '} + Mọi người mong đợi các ứng dụng native trông và cảm + thấy giống như nền tảng của họ. React Native {' '} - and{' '} + và{' '} Expo{' '} - let you build apps in React for Android, iOS, and - more. They look and feel native because their UIs{' '} - are truly native. It’s not a web view—your - React components render real Android and iOS views - provided by the platform. + cho phép bạn xây dựng các ứng dụng bằng React cho + Android, iOS, v.v. Chúng trông và cảm thấy native vì + UI của chúng là thực sự native. Đó không phải + là một web view—các React component của bạn hiển thị + các view Android và iOS thực do nền tảng cung cấp.

@@ -401,14 +387,15 @@ export function HomeContent() {
- With React, you can be a web and a native developer. Your - team can ship to many platforms without sacrificing the user - experience. Your organization can bridge the platform silos, and - form teams that own entire features end-to-end. + Với React, bạn có thể trở thành một nhà phát triển web và{' '} + native. Nhóm của bạn có thể ship đến nhiều nền tảng mà không làm + giảm trải nghiệm người dùng. Tổ chức của bạn có thể thu hẹp các + silo nền tảng và thành lập các nhóm sở hữu toàn bộ các tính năng + đầu cuối.
- Build for native platforms + Xây dựng cho các nền tảng native
@@ -419,23 +406,24 @@ export function HomeContent() {
-
Upgrade when the future is ready
+
Nâng cấp khi tương lai đã sẵn sàng
- React approaches changes with care. Every React commit is - tested on business-critical surfaces with over a billion - users. Over 100,000 React components at Meta help validate - every migration strategy. + React tiếp cận những thay đổi một cách cẩn thận. Mọi commit + React đều được kiểm tra trên các bề mặt quan trọng đối với + doanh nghiệp với hơn một tỷ người dùng. Hơn 100.000 React + component tại Meta giúp xác thực mọi chiến lược di chuyển.
- The React team is always researching how to improve React. - Some research takes years to pay off. React has a high bar - for taking a research idea into production. Only proven - approaches become a part of React. + Nhóm React luôn nghiên cứu cách cải thiện React. Một số + nghiên cứu mất nhiều năm để đơm hoa kết trái. React có một + tiêu chuẩn cao để đưa một ý tưởng nghiên cứu vào sản xuất. + Chỉ những cách tiếp cận đã được chứng minh mới trở thành một + phần của React.
- Read more React news + Đọc thêm tin tức React
@@ -443,7 +431,7 @@ export function HomeContent() {

- Latest React News + Tin tức React mới nhất

@@ -461,7 +449,7 @@ export function HomeContent() {
- Read more React news + Đọc thêm tin tức React
@@ -474,13 +462,13 @@ export function HomeContent() {
- Join a community
- of millions + Tham gia một cộng đồng
+ của hàng triệu người
- You’re not alone. Two million developers from all over the - world visit the React docs every month. React is something - that people and teams can agree on. + Bạn không hề đơn độc. Hai triệu nhà phát triển từ khắp nơi + trên thế giới truy cập tài liệu React mỗi tháng. React là một + thứ mà mọi người và các nhóm có thể đồng ý.
@@ -488,13 +476,14 @@ export function HomeContent() {
- This is why React is more than a library, an architecture, or - even an ecosystem. React is a community. It’s a place where - you can ask for help, find opportunities, and meet new - friends. You will meet both developers and designers, - beginners and experts, researchers and artists, teachers and - students. Our backgrounds may be very different, but React - lets us all create user interfaces together. + Đây là lý do tại sao React không chỉ là một thư viện, một kiến + trúc hay thậm chí là một hệ sinh thái. React là một cộng đồng. + Đó là một nơi mà bạn có thể yêu cầu giúp đỡ, tìm kiếm cơ hội + và gặp gỡ những người bạn mới. Bạn sẽ gặp cả nhà phát triển và + nhà thiết kế, người mới bắt đầu và chuyên gia, nhà nghiên cứu + và nghệ sĩ, giáo viên và học sinh. Nền tảng của chúng ta có + thể rất khác nhau, nhưng React cho phép tất cả chúng ta cùng + nhau tạo ra giao diện người dùng.
@@ -511,15 +500,15 @@ export function HomeContent() {
- Welcome to the
- React community + Chào mừng đến với
+ cộng đồng React
- Get Started + label="Tham gia Hướng dẫn"> + Bắt đầu
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index cc5c654e3..d60628383 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -308,7 +308,7 @@ export default function TopNav({ )} onClick={onOpenSearch}> - Search + Tìm kiếm ⌘ @@ -321,15 +321,15 @@ export default function TopNav({
- Learn + Học - Reference + Tài liệu tham khảo - Community + Cộng đồng Blog @@ -339,7 +339,7 @@ export default function TopNav({
); @@ -68,22 +68,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Đọc **[Phản hồi các sự kiện](/learn/responding-to-events)** để tìm hiểu cách thêm trình xử lý sự kiện. -## State: a component's memory {/*state-a-components-memory*/} +## State: bộ nhớ của một component {/*state-a-components-memory*/} -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ì trên màn hình do kết quả của một tương tác. Nhập vào biểu mẫu sẽ cập nhật trường nhập liệu, nhấp vào "tiếp theo" trên băng chuyền hình ảnh sẽ thay đổi hình ảnh nào được hiển thị, nhấp vào "mua" sẽ đưa một sản phẩm vào giỏ hàng. Các component cần "ghi nhớ" mọi thứ: giá trị đầu vào hiện tại, hình ảnh hiện tại, giỏ hàng. Trong React, loại bộ nhớ dành riêng cho component này được gọi là *state.* -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +Bạn có thể thêm state vào một component bằng Hook [`useState`](/reference/react/useState). *Hook* là các hàm đặc biệt cho phép các component của bạn sử dụng các tính năng của React (state là một trong những tính năng đó). Hook `useState` cho phép bạn khai báo một biến state. Nó lấy state ban đầu và trả về một cặp giá trị: state hiện tại và một hàm setter state cho phép bạn cập nhật nó. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +Đây là cách một thư viện ảnh sử dụng và cập nhật state khi nhấp: @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + bởi {sculpture.artist}

- ({index + 1} of {sculptureList.length}) + ({index + 1} trên {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Đọc **[State: Bộ nhớ của một component](/learn/state-a-components-memory)** để tìm hiểu cách ghi nhớ một giá trị và cập nhật nó khi tương tác. -## Render and commit {/*render-and-commit*/} +## Render và commit {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Trước khi các component của bạn được hiển thị trên màn hình, chúng phải được render bởi React. Hiểu các bước trong quy trình này sẽ giúp bạn suy nghĩ về cách mã của bạn thực thi và giải thích hành vi của nó. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Hãy tưởng tượng rằng các component của bạn là những đầu bếp trong bếp, lắp ráp các món ăn ngon từ các nguyên liệu. Trong kịch bản này, React là người phục vụ đưa các yêu cầu từ khách hàng và mang chúng đến cho họ. Quá trình yêu cầu và phục vụ UI này có ba bước: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Kích hoạt** render (giao đơn đặt hàng của khách ăn tối cho nhà bếp) +2. **Rendering** component (chuẩn bị đơn hàng trong bếp) +3. **Committing** vào DOM (đặt hàng lên bàn) - + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Đọc **[Render và Commit](/learn/render-and-commit)** để tìm hiểu vòng đời của một bản cập nhật UI. -## State as a snapshot {/*state-as-a-snapshot*/} +## State như một snapshot {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +Không giống như các biến JavaScript thông thường, state của React hoạt động giống như một snapshot hơn. Đặt nó không thay đổi biến state bạn đã có, mà thay vào đó kích hoạt một lần render lại. Điều này có thể gây ngạc nhiên lúc đầu! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // Yêu cầu render lại với 1 +console.log(count); // Vẫn là 0! ``` -This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +Hành vi này giúp bạn tránh các lỗi tinh vi. Đây là một ứng dụng trò chuyện nhỏ. Hãy thử đoán điều gì xảy ra nếu bạn nhấn "Gửi" trước và *sau đó* thay đổi người nhận thành Bob. Tên của ai sẽ xuất hiện trong `alert` năm giây sau đó? @@ -279,14 +279,14 @@ export default function Form() { function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Bạn đã nói ${message} với ${to}`); }, 5000); } return (
` is not allowed. [Use `defaultValue` for initial content.](#providing-an-initial-value-for-a-text-area) -- If a text area receives a string `value` prop, it will be [treated as controlled.](#controlling-a-text-area-with-a-state-variable) -- A text area can't be both controlled and uncontrolled at the same time. -- A text area cannot switch between being controlled or uncontrolled over its lifetime. -- Every controlled text area needs an `onChange` event handler that synchronously updates its backing value. +* Không được phép truyền children như ``. [Sử dụng `defaultValue` cho nội dung ban đầu.](#providing-an-initial-value-for-a-text-area) +* Nếu một vùng văn bản nhận được một thuộc tính `value` chuỗi, nó sẽ được [xử lý như được kiểm soát.](#controlling-a-text-area-with-a-state-variable) +* Một vùng văn bản không thể vừa được kiểm soát vừa không được kiểm soát cùng một lúc. +* Một vùng văn bản không thể chuyển đổi giữa việc được kiểm soát hoặc không được kiểm soát trong suốt vòng đời của nó. +* Mỗi vùng văn bản được kiểm soát cần một trình xử lý sự kiện `onChange` để đồng bộ cập nhật giá trị sao lưu của nó. --- -## Usage {/*usage*/} +## Cách sử dụng {/*usage*/} -### Displaying a text area {/*displaying-a-text-area*/} +### Hiển thị một vùng văn bản {/*displaying-a-text-area*/} -Render `` is not supported. +Không giống như trong HTML, việc truyền văn bản ban đầu như `` không được hỗ trợ. --- -### Reading the text area value when submitting a form {/*reading-the-text-area-value-when-submitting-a-form*/} +### Đọc giá trị vùng văn bản khi gửi biểu mẫu {/*reading-the-textarea-value-when-submitting-a-form*/} + +Thêm một [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) xung quanh vùng văn bản của bạn với một [`