Skip to content

Vietnamese translation for React components and props documentation #138

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Sep 11, 2021
Merged

Vietnamese translation for React components and props documentation #138

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4859f39
Vietnamese translation for React components and props documentation
tuananhhedspibk May 9, 2021
217c620
Vietnamese translation for React components and props documentation
tuananhhedspibk May 9, 2021
e716782
Vietnamese translation for React components and props documentation
tuananhhedspibk May 9, 2021
7a063c6
Vietnamese translation for React components and props documentation
tuananhhedspibk May 31, 2021
a85437b
Vietnamese translation for React components and props documentation
tuananhhedspibk Jun 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 44 additions & 44 deletions content/docs/components-and-props.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,23 @@ prev: rendering-elements.html
next: state-and-lifecycle.html
---

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
Components cho phép bạn chia UI thành các phần độc lập, có thể tái sử dụng, và hoàn toàn tách biệt nhau. Tài liệu này đem đến những giới thiệu sơ lược về components. Bạn có thể tìm [tài liệu chi tiết về API ở đây](/docs/react-component.html).

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
Về mặt khái niệm, components cũng giống như các hàm Javascript. Chúng nhận vào bất kì đầu vào nào (còn được gọi là "props") và trả về các React elements mô tả những gì sẽ xuất hiện trên màn hình.

## Function and Class Components {#function-and-class-components}
## Function Components và Class Components {#function-and-class-components}

The simplest way to define a component is to write a JavaScript function:
Cách đơn giản nhất để định nghĩa một component đó là viết một hàm JavaScript:

```js
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
```

This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
Hàm này là một React component hợp lệ về nó nhận đầu vào là một tham số object "props" (viết tắt của properties) với dữ liệu và trả về một React element. Chúng ta gọi các components này là "function components" vì chúng là các hàm JavaScript theo đúng nghĩa đen.

You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
Bạn cũng có thể sử dụng [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) để định nghĩa một component:

```js
class Welcome extends React.Component {
Expand All @@ -42,27 +42,27 @@ class Welcome extends React.Component {
}
```

The above two components are equivalent from React's point of view.
Hai components phía trên là tương đương nhau dưới góc độ của React.

Function and Class components both have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html).
Function và Class components đều có các tính năng bổ sung khác mà chúng ta sẽ thảo luận ở [phần tiếp theo](/docs/state-and-lifecycle.html).

## Rendering a Component {#rendering-a-component}
## Rendering một Component {#rendering-a-component}

Previously, we only encountered React elements that represent DOM tags:
Ở phần trước, chúng ta mới chỉ đề cập đến các React elements biểu diễn các DOM tags:

```js
const element = <div />;
```

However, elements can also represent user-defined components:
Thế nhưng, elements cũng có thể biểu diễn các components do người dùng định nghĩa:

```js
const element = <Welcome name="Sara" />;
```

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object "props".
Khi React thấy một element biểu diễn component do người dùng định nghĩa, nó ssẽ truyền các thuộc tính JSX và các phần tử con vào component này như là một object (đối tượng). Chúng ta gọi object đó là "props".

For example, this code renders "Hello, Sara" on the page:
Ví dụ, đoạn code này render ra "Hello, Sara" trên page:

```js{1,5}
function Welcome(props) {
Expand All @@ -78,24 +78,24 @@ ReactDOM.render(

[](codepen://components-and-props/rendering-a-component)

Let's recap what happens in this example:
Chúng ta hãy cùng xem những gì diễn ra ở ví dụ này:

1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
1. Chúng ta gọi `ReactDOM.render()` với `<Welcome name="Sara" />` element.
2. React gọi đến `Welcome` component với `{name: 'Sara'}` là props.
3. `Welcome` component của chúng ta trả về kết quả là `<h1>Hello, Sara</h1>` element.
4. React DOM sẽ cập nhật DOM để hiển thị `<h1>Hello, Sara</h1>`.

>**Note:** Always start component names with a capital letter.
>**Chú ý:** Luôn luôn bắt đầu tên của component bằng chữ in hoa.
>
>React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
>React xử lí các components bắt đầu với chữ thường giống như các DOM tags. Ví dụ, `<div />` biểu diễn HTML div tag, nhưng `<Welcome />` biểu diễn một component và yêu cầu `Welcome` nằm trong scope.
>
>To learn more about the reasoning behind this convention, please read [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
>Để hiểu hơn về cách viết này, hãy đọc [JSX Chuyên Sâu](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).

## Composing Components {#composing-components}
## Tạo Components {#composing-components}

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
Các components có thể tham chiếu đến các components khác tại đầu ra của chúng. Điều này cho phép chúng ta sử dụng cùng một component abstraction cho mọi mức độ chi tiết. Một button, form, dialog, màn hình: trong React apps, chúng đều được hiển thị như là các components.

For example, we can create an `App` component that renders `Welcome` many times:
Ví dụ, chúng ta có thể tạo ra `App` component mà nó sẽ render ra `Welcome` nhiều lần:

```js{8-10}
function Welcome(props) {
Expand All @@ -120,13 +120,13 @@ ReactDOM.render(

[](codepen://components-and-props/composing-components)

Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
Thông thường, các React apps mới tạo sẽ có một `App` component ở tầng cao nhất. Thế nhưng, nếu bạn tích hợp React vào ứng dụng hiện có, bạn có thể bắt đầu bằng cách tiếp cận bottom-up với một component nhỏ như là `Button` và dần dần đi lên các tầng trên cùng của cây kế thừa giao diện.

## Extracting Components {#extracting-components}
## Tách Components {#extracting-components}

Don't be afraid to split components into smaller components.
Đừng ngại ngần việc tách components thành các components nhỏ hơn.

For example, consider this `Comment` component:
Ví dụ, cùng xem component `Comment` dưới đây:

```js
function Comment(props) {
Expand Down Expand Up @@ -154,11 +154,11 @@ function Comment(props) {

[](codepen://components-and-props/extracting-components)

It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
Nó nhận `author` (một object), `text` (một sâu kí tự), và `date` (ngày tháng) làm props, và mô phỏng lại một bình luận trên mạng xã hội.

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
Component này có thể khó để thay đổi vì cấu trúc lồng nhau, đồng thời cũng khó có thể tái sử dụng lại các thành phần con bên trong nó. Hãy thử chia một vài components từ nó.

First, we will extract `Avatar`:
Đầu tiên, chúng ta sẽ chia `Avatar`:

```js{3-6}
function Avatar(props) {
Expand All @@ -171,11 +171,11 @@ function Avatar(props) {
}
```

The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
`Avatar` không cần phải biết nó đang được render bên trong `Comment`. Đây là lí do tại sao chúng ta truyền vào nó một prop với cái tên tổng quát là: `user` thay vì `author`.

We recommend naming props from the component's own point of view rather than the context in which it is being used.
Chúng tôi khuyến khích việc đặt tên cho props dựa trên góc nhìn từ chính component hơn là ngữ cảnh mà component được sử dụng.

We can now simplify `Comment` a tiny bit:
Chúng ta có thể đơn giản hoá `Comment` đi một chút:

```js{5}
function Comment(props) {
Expand All @@ -198,7 +198,7 @@ function Comment(props) {
}
```

Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
Tiếp theo, chúng ta sẽ chia component `UserInfo`, component này sẽ render `Avatar` bên cạnh tên của user:

```js{3-8}
function UserInfo(props) {
Expand All @@ -213,7 +213,7 @@ function UserInfo(props) {
}
```

This lets us simplify `Comment` even further:
Điều này giúp chúng ta có thể đơn giản hoá `Comment` hơn nữa:

```js{4}
function Comment(props) {
Expand All @@ -233,30 +233,30 @@ function Comment(props) {

[](codepen://components-and-props/extracting-components-continued)

Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be extracted to a separate component.
Chia các components ngay từ đầu là một công việc không đơn giản, nhưng bù lại chúng ta sẽ có được một tập hợp các components có thể tái sử dụng trong các ứng dụng lớn hơn khác. Một nguyên tắc quan trọng đó là nếu một phần UI của bạn được sử dụng lại nhiều lần (`Button`, `Panel`, `Avatar`), hoặc đủ phức tạp (`App`, `FeedStory`, `Comment`), thì đó là thời điểm thích hợp để chia chúng thành các component riêng.

## Props are Read-Only {#props-are-read-only}
## Props chỉ dùng để đọc {#props-are-read-only}

Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
Khi bạn định nghĩa một component [dưới dạng function hoặc class](#function-and-class-components), thì nó không được phép thay đổi props của chính nó. Hãy cùng phân tích hàm `sum` dưới đây:

```js
function sum(a, b) {
return a + b;
}
```

Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
Các hàm này được gọi là ["pure"](https://en.wikipedia.org/wiki/Pure_function) vì chúng không thay đổi giá trị của tham số đầu vào, và luôn trả về cùng một kết quả với các tham số đầu vào giống nhau.

In contrast, this function is impure because it changes its own input:
Ngược lại, hàm dưới đây được gọi là impure vì nó thay đổi giá trị của tham số đầu vào:

```js
function withdraw(account, amount) {
account.total -= amount;
}
```

React is pretty flexible but it has a single strict rule:
React có tính khả chuyển cao nhưng nó cũng có một quy tắc riêng:

**All React components must act like pure functions with respect to their props.**
**Mọi React components đều phải giống như các pure functions đối với props của chúng.**

Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
Tất nhiên, giao diện của ứng dụng là động và luôn luôn thay đổi theo thời gian. Trong [phần tiếp theo](/docs/state-and-lifecycle.html), chúng tôi sẽ giới thiệu một khái niệm mới, đó là "state". State cho phép React components thay đổi đầu ra của chúng theo thời gian tương ứng với các hành động của người dùng, network responses, và bất kì thứ gì khác, mà không vi phạm quy tắc đối với React component.