Skip to content
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ The documentation is divided into several sections with a different tone and pur
1. `git push my-fork-name the-name-of-my-branch`
1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
1. Follow GitHub's instructions.
1. If possible, include screenshots of visual changes. A Netlify build will also be automatically created once you make your PR so other people can see your change.
1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.

## Translation

Expand Down
2 changes: 1 addition & 1 deletion content/community/courses.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ permalink: community/courses.html

- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.

- [Frontend Masters](https://frontendmasters.com/courses/) - Video courses on React and other frontend frameworks.
- [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.

- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.

Expand Down
4 changes: 2 additions & 2 deletions content/community/videos.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ Videos dedicated to the discussion of React and the React ecosystem.
### React Conf 2019 {#react-conf-2019}

A playlist of videos from React Conf 2019.
<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>
<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>

### React Conf 2018 {#react-conf-2018}

A playlist of videos from React Conf 2018.
<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>
<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>

### React.js Conf 2017 {#reactjs-conf-2017}

Expand Down
4 changes: 4 additions & 0 deletions content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ console.log(add(16, 26)); // 42

Nếu bạn đang sử dụng [Create React App](https://create-react-app.dev/), [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/), hay một công cụ tương tự, bạn sẽ được thiết lập sẵn webpack để đóng gói ứng dụng của mình.

<<<<<<< HEAD
Nếu không, bạn sẽ cần phải tự thiết lập. Ví dụ, tham khảo [Cách cài đặt](https://webpack.js.org/guides/installation/) và [Làm thê nào để bắt đầu sử dụng](https://webpack.js.org/guides/getting-started/) hướng dẫn ở tài liệu Webpack.
=======
If you aren't, you'll need to set up bundling yourself. For example, see the [Installation](https://webpack.js.org/guides/installation/) and [Getting Started](https://webpack.js.org/guides/getting-started/) guides on the Webpack docs.
>>>>>>> c3c93e2a7ff1b1f7b8735a3a87d4b10937eaaf91

## Phân chia Code {#code-splitting}

Expand Down
4 changes: 4 additions & 0 deletions content/docs/concurrent-mode-adoption.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ next: concurrent-mode-reference.html
>
>This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now.

>Caution:
>
>All references below to "blocking mode" and `createBlockingRoot` are outdated and should be ignored.

</div>

- [Installation](#installation)
Expand Down
13 changes: 0 additions & 13 deletions content/docs/concurrent-mode-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ This page is an API reference for the React [Concurrent Mode](/docs/concurrent-m

- [Enabling Concurrent Mode](#concurrent-mode)
- [`createRoot`](#createroot)
- [`createBlockingRoot`](#createblockingroot)
- [Suspense](#suspense)
- [`Suspense`](#suspensecomponent)
- [`SuspenseList`](#suspenselist)
Expand All @@ -47,18 +46,6 @@ Replaces `ReactDOM.render(<App />, rootNode)` and enables Concurrent Mode.

For more information on Concurrent Mode, check out the [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html)

### `createBlockingRoot` {#createblockingroot}

```js
ReactDOM.createBlockingRoot(rootNode).render(<App />)
```

Replaces `ReactDOM.render(<App />, rootNode)` and enables [Blocking Mode](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).

Opting into Concurrent Mode introduces semantic changes to how React works. This means that you can't use Concurrent Mode in just a few components. Because of this, some apps may not be able to migrate directly to Concurrent Mode.

Blocking Mode only contains a small subset of Concurrent Mode features and is intended as an intermediary migration step for apps that are unable to migrate directly.

## Suspense API {#suspense}

### `Suspense` {#suspensecomponent}
Expand Down
1 change: 1 addition & 0 deletions content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ If your update function returns the exact same value as the current state, the s
> Unlike the `setState` method found in class components, `useState` does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:
>
> ```js
> const [state, setState] = useState({});
> setState(prevState => {
> // Object.assign would also work
> return {...prevState, ...updatedValues};
Expand Down
2 changes: 1 addition & 1 deletion content/docs/reference-react-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ Note that this method is fired on *every* render, regardless of the cause. This
getSnapshotBeforeUpdate(prevProps, prevState)
```

`getSnapshotBeforeUpdate()` is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to `componentDidUpdate()`.
`getSnapshotBeforeUpdate()` is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle method will be passed as a parameter to `componentDidUpdate()`.

This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.

Expand Down
4 changes: 4 additions & 0 deletions content/tutorial/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -524,7 +524,11 @@ Chú ý rằng trong hàm `handleClick`, chúng ta sử dụng `.slice()` để

### Tại sao tính bất biến là quan trọng {#why-immutability-is-important}

<<<<<<< HEAD
Trong phần code ví dụ trước, ta đã sử dụng hàm `.slice()` để tạo ra bản sao của mảng `squares` thay vì sửa trực tiếp nó. Giờ ta sẽ thảo luận về tính bất biến và vì sao tính bất biến lại quan trọng.
=======
In the previous code example, we suggested that you use the `.slice()` method to create a copy of the `squares` array to copy instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
>>>>>>> c3c93e2a7ff1b1f7b8735a3a87d4b10937eaaf91

Thông thường, ta có 2 hướng tiếp cận đối với việc thay đổi dữ liệu. Hướng tiếp cận đầu tiên đó là *thay đổi (mutate)* trực tiếp giá trị của dữ liệu. Hướng tiếp cận thứ hai đó là thay dữ liệu hiện có bằng một bản sao của nó và sửa đổi trên bản sao đó.

Expand Down