Merge pull request #240 from reactjs/sync-9b3c3f4e

Sync with reactjs.org @ 9b3c3f4

Author: Ryan-LT

content/community/support.md

@@ -24,11 +24,18 @@ Có rất nhiều diễn đàn online là nơi tuyệt vời để thảo luận
 
 Mỗi cộng đồng bao gồm hàng nghìn người dùng React.
 
+<<<<<<< HEAD
 * [Cộng đồng React của DEV](https://dev.to/t/react)
 * [Cộng đồng React của Hashnode](https://hashnode.com/n/reactjs)
 * [Trò chuyện online với Reactiflux](https://discord.gg/reactiflux)
 * [Cộng đồng React của Reddit](https://www.reddit.com/r/reactjs/)
 * [Cộng đồng React của Spectrum](https://spectrum.chat/react)
+=======
+* [DEV's React community](https://dev.to/t/react)
+* [Hashnode's React community](https://hashnode.com/n/reactjs)
+* [Reactiflux online chat](https://discord.gg/reactiflux)
+* [Reddit's React community](https://www.reddit.com/r/reactjs/)
+>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f
 
 ## Tin tức {#news}
 

content/docs/add-react-to-a-website.md

@@ -149,7 +149,11 @@ return (
 
 Hai đoạn code trên là tương đương nhau. Trong khi **JSX [hoàn toàn là tuỳ chọn](/docs/react-without-jsx.html)**, nhiều người thấy rằng nó khá hữu ích cho việc viết UI code -- cả với React và với các thư viện khác.
 
+<<<<<<< HEAD
 Bạn có thể trải nghiệm với JSX bằng cách sử dụng [bộ chuyển đổi online](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).
+=======
+You can play with JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7).
+>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f
 
 ### Thử nhanh JSX {#quickly-try-jsx}
 

content/docs/hooks-faq.md

@@ -912,9 +912,13 @@ Lưu ý bạn có thể chọn giữa truyền *state* của ứng dụng xuốn
 
 >Lưu ý
 >
+<<<<<<< HEAD
 >Chúng tôi đề xuất [truyền `dispatch` xuống các context](#how-to-avoid-passing-callbacks-down) thay vì các callback độc lập qua prop. Cách tiếp cận bên dưới chỉ đề cập ở đây để đầy đủ và như là một cách hatch.
 >
 >Cũng lưu ý rằng pattern này có thể gây ra vấn đề trong [chế độ concurrent ](/blog/2018/03/27/update-on-async-rendering.html). Chúng tôi có kế hoạch cung cấp một cách làm khác hữu hiệu trong tương lai, nhưng giải pháp an toàn nhất hiện nay là luôn luôn vô hiệu hóa callback nếu một vài giá trị phụ thuộc vào thay đổi.
+=======
+>We recommend to [pass `dispatch` down in context](#how-to-avoid-passing-callbacks-down) rather than individual callbacks in props. The approach below is only mentioned here for completeness and as an escape hatch.
+>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f
 
 Trong vài trường hợp các biệt, bạn cần nhớ 1 callback với   [`useCallback`](/docs/hooks-reference.html#usecallback) nhưng việc nhớ này không làm việc tốt bởi vì hàm bên trong bị re-create quá nhiều lần. Nếu hàm bạn nhớ là một hàm xử lý sự kiện và không được sử dụng trong quá trình render, bạn có thể sử dụng [ref như một biến instance](#is-there-something-like-instance-variables), và lưu giá trị lần commit sau cùng một cách thủ công:
 

content/docs/thinking-in-react.md

@@ -138,7 +138,11 @@ React làm cho luồng dữ liệu trở nên rõ ràng và dễ hiểu hơn ch
 
 Nếu bạn thử gõ hoặc lựa chọn giá trị trong ví dụ hiện thời, bạn sẽ thấy rằng React bỏ qua những giá trị đầu vào này. Điều này sảy ra có chủ ý, vì chúng ta gán `value` prop của `input` luôn luôn bằng với `state` truyền từ `FilterableProductTable`.
 
+<<<<<<< HEAD
 Hãy nghĩ xem chúng ta muốn thực hiện điều gì. Chúng ta muốn chắc chắn rằng khi nào người dùng thay đổi form, chúng ta cập nhật state dựa trên dữ liệu đầu vào. Vì những component chỉ nên cập nhật state cuả chúng, `FilterableProductTable` sẽ truyền vào callbacks tới `SearchBar` để kích hoạt mỗi khi dữ liệu cần cập nhật. Chúng ta có thể sử dụng sự kiện `onChange` trong input để nhận được thông báo. Callbacks truyền xuống bởi `FilterableProductTable` sẽ gọi hàm `setState()`, và ứng dụng sẽ được cập nhật.
+=======
+If you try to type or check the box in the previous version of the example (step 4), you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
+>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f
 
 Mặc dù nó nghe phức tạp, nhưng thật ra chỉ cần vài dòng lệnh. Và nó chỉ ra rất rõ ràng luồng dữ liệu được truyền đi trong ứng dụng như thế nào.
 

content/tutorial/tutorial.md

@@ -1045,7 +1045,13 @@ Hãy `map` mảng `history` trong phương thức `render` của Game component:
 
 **[Xem code chi tiết tại bước này](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)**
 
+<<<<<<< HEAD
 Với mỗi lịch sử bước đi trong game tic-tac-toe, ta tạo ra một danh sách các `<li>` chứa một `<button>`. Button sẽ có một hàm xử lý `onClick`, hàm này sẽ gọi phương thức `this.jumpTo()`. Hiện tại ta chưa có hàm `jumpTo()`. Đến bước này, bạn sẽ thấy một danh sách các bước đi được hiển thị trên màn hình và cảnh báo trong console của công cụ cho nhà phát triển với thông điệp như sau:
+=======
+As we iterate through `history` array, `step` variable refers to the current `history` element value, and `move` refers to the current `history` element index. We only interested in `move` here, hence `step` is not getting assigned to anything.
+
+For each move in the tic-tac-toe game's history, we create a list item `<li>` which contains a button `<button>`. The button has a `onClick` handler which calls a method called `this.jumpTo()`. We haven't implemented the `jumpTo()` method yet. For now, we should see a list of the moves that have occurred in the game and a warning in the developer tools console that says:
+>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f
 
 >  Warning:
 >  Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".

vercel.json

@@ -3,6 +3,8 @@
   "trailingSlash": false,
   "redirects": [
     { "source": "/tips/controlled-input-null-value.html", "destination": "/docs/forms.html#controlled-input-null-value", "permanent": false },
+    { "source": "/link/switch-to-createroot", "destination": "https://github.com/reactwg/react-18/discussions/5", "permanent": false },
+    { "source": "/server-components", "destination": "/blog/2020/12/21/data-fetching-with-react-server-components.html", "permanent": false },
     { "source": "/concurrent", "destination": "/docs/concurrent-mode-intro.html", "permanent": false },
     { "source": "/hooks", "destination": "/docs/hooks-intro.html", "permanent": false },
     { "source": "/tutorial", "destination": "/tutorial/tutorial.html", "permanent": false },