Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
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.
>>>>>>> 5119600cf6f7a5dcbd4d2cc23f6b4ff55d2969b2

## 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.
>>>>>>> 5119600cf6f7a5dcbd4d2cc23f6b4ff55d2969b2

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