diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 343823aa4..2176bfef2 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -1,24 +1,24 @@ --- -title: Your First Component +title: Component đầu tiên của bạn --- -*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +*Component* là một trong những khái niệm cơ bản của React. Chúng là nền tảng bạn dựa vào để xây dựng giao diện (UI) và điều đó khiến chúng là một khởi đầu hoàn hảo để bắt đầu hành trình React của bạn! -* What a component is -* What role components play in a React application -* How to write your first React component +* Một component là gì +* Vai trò của component trong một ứng dụng React +* Cách để viết React component đầu tiên của bạn -## Components: UI building blocks {/*components-ui-building-blocks*/} +## Component: Những viên gạch để xây dựng UI {/*components-ui-building-blocks*/} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +Ở Web, HTML cho chúng ta tạo ra các tài liệu với cấu trúc phong phú sử dụng các thẻ có sẵn như `

    ` và `
  • `: ```html
    @@ -31,11 +31,11 @@ On the Web, HTML lets us create rich structured documents with its built-in set
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +Phần markup này bao gồm bài viết này `
      `, tiêu đề của nó `

      `, và một bảng mục lục (tóm tắt) được biểu diễn bằng một danh sách có thứ tự `
        `. Markup như thế này, kết hợp với CSS để thêm các styles, và JavaScript để tạo tính tương tác, nằm phía sau sidebar, ảnh đại diện (avatar), modal, dropdown — mỗi phần của UI bạn thấy trên Web. -React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
        `, `

        `, etc. +React cho phép bạn kết hợp markup, CSS, và JavaScript để tạo nên các "component" tự làm, **những phần tử UI có thể tái sử dụng cho ứng dụng của bạn.** Bảng mục lục bạn thấy ở trên có thể được chuyển thành một component `` mà bạn có thể render trên mọi trang. Phía sau cánh gà, nó vẫn sử dụng các thẻ HTML như `
        `, `

        `, v.v. -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +Giống như với các thẻ HTML, bạn có thể tạo, sắp xếp và lồng các component để thiết kế nên các trang hoàn chỉnh. Ví dụ, trang tài liệu bạn đang đọc được tạo từ các React component như: ```js @@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/) +Khi mà dự án của bạn phát triển, bạn sẽ nhận thấy rất nhiều các thiết kế của bạn có thể được xây dựng bằng cách tái sử dụng các component bạn đã viết, từ đó đẩy nhanh tốc độ phát triển. Mục lục của chúng tôi ở trên có thể được thêm vào bất cứ màn hình nào với ``! Bạn thậm chí còn có thể bắt đầu dự án của mình với hàng ngàn các component được chia sẻ bởi cộng đồng mã nguồn mở React như [Chakra UI](https://chakra-ui.com/) và [Material UI.](https://material-ui.com/) -## Defining a component {/*defining-a-component*/} +## Định nghĩa một component {/*defining-a-component*/} -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below): +Theo truyền thống, khi tạo ra các trang web, các nhà phát triển web markup nội dung của họ và sau đó thêm khả năng tương tác bằng cách sử dụng thêm JavaScript. Cách này hoạt động tốt khi các tương tác vẫn còn là một thứ "có thì tốt" ở web. Bây giờ thì điều đó được kỳ vọng là sẵn có ở rất nhiều trang và mọi ứng dụng. React đặt tính tương tác lên đầu trong khi vẫn sử dụng các công nghệ tương tự: **một React component là một hàm JavaScript mà bạn có thể _dùng markup_.** Đây là một ví dụ (bạn có thể chỉnh sửa ví dụ bên dưới): @@ -76,33 +76,33 @@ img { height: 200px; } -And here's how to build a component: +Và đây là cách để xây dựng một component: -### Step 1: Export the component {/*step-1-export-the-component*/} +### Bước 1: Xuất (Export) component {/*step-1-export-the-component*/} -The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) +Tiền tố `export default` là một [cú pháp JavaScript tiêu chuẩn](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (không cụ thể cho React). Nó cho phép bạn đánh dấu hàm chính của một file để bạn có thể nhập (import) nó từ những file khác. (Thêm thông tin về importing ở trong [Import và Export các component](/learn/importing-and-exporting-components)!) -### Step 2: Define the function {/*step-2-define-the-function*/} +### Bước 2: Định nghĩa hàm {/*step-2-define-the-function*/} -With `function Profile() { }` you define a JavaScript function with the name `Profile`. +Với `function Profile() { }` bạn định nghĩa một hàm JavaScript với tên là `Profile`. -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! +React component là những hàm JavaScript bình thường, tuy nhiên **tên của chúng phải bắt đầu bằng một chữ cái in hoa**. Nếu không, chúng sẽ không hoạt động! -### Step 3: Add markup {/*step-3-add-markup*/} +### Bước 3: Thêm markup {/*step-3-add-markup*/} -The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. +Component trả về một thẻ `` với thuộc tính `src` và `alt`. `` được viết như HTML, nhưng chúng thật ra là JavaScript ở phía sau hậu trường! Cú pháp này được gọi là [JSX](/learn/writing-markup-with-jsx), và nó cho phép bạn nhúng markup vào trong JavaScript. -Return statements can be written all on one line, as in this component: +Câu lệnh return có thể được viết hết ở trong một dòng, như trong component này: ```js return Katherine Johnson; ``` -But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses: +Nhưng nếu markup của bạn không ở cùng một dòng với từ khóa `return`, bạn sẽ phải bao nó ở trong một cặp dấu ngoặc: ```js return ( @@ -114,13 +114,13 @@ return ( -Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! +Nếu không có cặp ngoặc, bất kỳ code nào ở sau `return` [sẽ bị bỏ qua](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! -## Using a component {/*using-a-component*/} +## Sử dụng một component {/*using-a-component*/} -Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: +Giờ thì bạn đã định nghĩa component `Profile`, bạn có thể lồng nó bên trong các component khác. Ví dụ, bạn có thể export một component `Gallery` sử dụng nhiều component `Profile` bên trong nó: @@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; } -### What the browser sees {/*what-the-browser-sees*/} +### Những gì mà trình duyệt nhìn thấy {/*what-the-browser-sees*/} -Notice the difference in casing: +Chú ý đến sự khác biệt về chữ hoa/chữ thường: -* `
        ` is lowercase, so React knows we refer to an HTML tag. -* `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +* `
        ` viết thường, vì vậy React biết rằng chúng ta đang nói đến một thẻ HTML. +* `` bắt đầu bằng chữ hoa, vì vậy React biết rằng chúng ta muốn sử dụng một component của chúng ta có tên là `Profile`. -And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: +Và `Profile` thì lại chứa nhiều HTML hơn nữa: ``. Cuối cùng, đây là những gì mà trình duyệt nhìn thấy: ```html
        @@ -170,15 +170,15 @@ And `Profile` contains even more HTML: ``. In the end, this is what the b
        ``` -### Nesting and organizing components {/*nesting-and-organizing-components*/} +### Lồng và sắp xếp các component {/*nesting-and-organizing-components*/} -Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components) +Component là các hàm JavaScript bình thường, nên bạn có thể có nhiều component ở trong cùng một file. Điều này tiện lợi khi các component vẫn còn nhỏ và liên quan đến nhau một cách chặt chẽ. Nếu file này càng ngày càng lớn, bạn luôn có thể dời `Profile` ra một file riêng. Bạn sẽ học cách làm điều này trong [Import và Export các component](/learn/importing-and-exporting-components) -Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like. +Bởi vì các component `Profile` được render bên trong `Gallery`—thậm chí nhiều lần!—chúng ta có thể nói rằng `Gallery` là một **component cha (parent component),** render mỗi `Profile` như một "con" (child). Đây là phần kỳ diệu của React: bạn có thể định nghĩa component một lần và sử dụng nó ở khắp các nơi và với số lần tùy thích. -Components can render other components, but **you must never nest their definitions:** +Component có thể render các component khác, nhưng **bạn không bao giờ được lồng các định nghĩa của chúng:** ```js {2-5} export default function Gallery() { @@ -190,7 +190,7 @@ export default function Gallery() { } ``` -The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level: +Phần code ở trên [chạy rất chậm và gây ra bug](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Thay vào đó, hãy định nghĩa component ở đầu file: ```js {5-8} export default function Gallery() { @@ -203,34 +203,34 @@ function Profile() { } ``` -When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions. +Khi mà một component con cần dữ liệu từ cha, [hãy truyền nó qua props](/learn/passing-props-to-a-component) thay vì lồng các định nghĩa. -#### Components all the way down {/*components-all-the-way-down*/} +#### Sử dụng Component từ đầu đến cuối {/*components-all-the-way-down*/} -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. +Ứng dụng React của bạn bắt đầu từ một component "gốc" (root). Thường thì component này được tạo ra tự động khi mà bạn bắt đầu một dự án mới. Ví dụ, nếu bạn dùng [CodeSandbox](https://codesandbox.io/) hay [Create React App](https://create-react-app.dev/), component gốc sẽ được định nghĩa ở `src/App.js`. Nếu bạn sử dụng framework [Next.js](https://nextjs.org/), component gốc sẽ được định nghĩa ở `pages/index.js`. Trong những ví dụ này, bạn đã export các component gốc. -Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. +Hầu hết các ứng dụng React đều sử dụng component từ đầu đến cuối. Điều này có nghĩa là bạn không chỉ sử dụng component cho những phần có thể tái sử dụng như các nút (button) mà còn cho các phần lớn hơn như sidebar, các danh sách và đích đến cuối, các trang hoàn chỉnh! Component là một cách tiện lợi để tổ chức code UI và markup, ngay cả khi một số chúng chỉ được sử dụng một lần. -[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +[Các framwork React](/learn/start-a-new-react-project) nâng điều này lên một tầm cao mới. Thay vì chỉ sử dụng một trang HTML rỗng và để React "điều khiển" việc quản lý trang với JavaScript, chúng *cũng* tạo ra HTML tự động từ các React component của bạn. Điều này khiến cho ứng dụng của bạn có thể hiển thị một số nội dung trước khi code JavaScript chạy. -Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. +Tuy vậy, rất nhiều website chỉ dùng React để [thêm tương tác cho các trang HTML đã có sẵn](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). Họ có rất nhiều các root component thay vì một cái cho cả trang. Bạn có thể dùng nhiều hoặc ít React tùy thích. -You've just gotten your first taste of React! Let's recap some key points. +Bạn vừa có được một cái nhìn đầu tiên về React! Hãy tóm tắt lại một số điểm quan trọng. -* React lets you create components, **reusable UI elements for your app.** -* In a React app, every piece of UI is a component. -* React components are regular JavaScript functions except: +* React cho bạn tạo ra các component, **các thành phần UI có thể tái sử dụng cho ứng dụng của bạn.** +* Ở trong ứng dụng React, mỗi phần của UI là một component. +* React component là các hàm JavaScript ngoại trừ việc: - 1. Their names always begin with a capital letter. - 2. They return JSX markup. + 1. Tên của chúng luôn bắt đầu bằng chữ cái viết hoa. + 2. Chúng trả về JSX markup. @@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points. -#### Export the component {/*export-the-component*/} +#### Export component {/*export-the-component*/} -This sandbox doesn't work because the root component is not exported: +Phần sandbox này không chạy vì root component chưa được export: @@ -261,11 +261,11 @@ img { height: 181px; } -Try to fix it yourself before looking at the solution! +Hãy thử tự mình sửa code trước khi tham khảo lời giải! -Add `export default` before the function definition like so: +Thêm `export default` trước định nghĩa hàm như sau: @@ -286,17 +286,17 @@ img { height: 181px; } -You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components) +Bạn có thể tự hỏi tại sao viết `export` một mình là không đủ để sửa ví dụ này. Bạn có thể tìm hiểu sự khác biệt giữa `export` và `export default` ở trong phần [Import và Export các component.](/learn/importing-and-exporting-components) -#### Fix the return statement {/*fix-the-return-statement*/} +#### Sửa câu lệnh return {/*fix-the-return-statement*/} -Something isn't right about this `return` statement. Can you fix it? +Có điều gì đó không đúng về câu lệnh `return` này. Bạn có thể sửa nó không? -You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. +Bạn có thể gặp lỗi "Unexpected token" khi đang cố sửa lỗi này. Trong trường hợp đó, kiểm tra dấu chấm phẩy xuất hiện *sau* dấu đóng ngoặc. Để lại dấu chấm phẩy trong `return ( )` sẽ gây ra lỗi. @@ -318,7 +318,7 @@ img { height: 180px; } -You can fix this component by moving the return statement to one line like so: +Bạn có thể sửa component này bằng cách di chuyển câu lệnh `return` như sau: @@ -334,7 +334,7 @@ img { height: 180px; } -Or by wrapping the returned JSX markup in parentheses that open right after `return`: +Hoặc bằng cách bao JSX markup ở trong ngoặc đơn với mở ngoặc đơn xuất hiện ngay sau `return`: @@ -357,9 +357,9 @@ img { height: 180px; } -#### Spot the mistake {/*spot-the-mistake*/} +#### Phát hiện lỗi sai {/*spot-the-mistake*/} -Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!) +Có gì đó không đúng với cách khai báo và sử dụng component `Profile`. Bạn có thể phát hiện ra lỗi sai không? (Hãy nhớ lại cách React phân biệt các component với các thẻ HTML thông thường!) @@ -393,9 +393,9 @@ img { margin: 0 10px 10px 0; height: 90px; } -React component names must start with a capital letter. +Tên React component phải bắt đầu bằng một chữ cái in hoa. -Change `function profile()` to `function Profile()`, and then change every `` to ``: +Thay đổi `function profile()` thành `function Profile()`, và sau đó thay đổi mọi chỗ dùng `` thành ``: @@ -429,9 +429,9 @@ img { margin: 0 10px 10px 0; } -#### Your own component {/*your-own-component*/} +#### Component của riêng bạn {/*your-own-component*/} -Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `

        Good job!

        `. Don't forget to export it! +Viết một component từ đầu. Bạn có thể cho nó bất cứ tên nào và trả về bất kỳ markup nào. Nếu bạn bí ý tưởng, bạn có thể viết một component `Congratulations` hiển thị `

        Good job!

        `. Đừng quên export nó!