diff --git a/package.json b/package.json
index 1f63eb121b..ad9b9baa42 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
- "@docsearch/css": "3.0.0-alpha.41",
- "@docsearch/react": "3.0.0-alpha.41",
+ "@docsearch/css": "^3.6.1",
+ "@docsearch/react": "^3.6.1",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 9669e5f4f5..7d7cdc5a75 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -113,7 +113,7 @@ export function Preview({
/**
* The spinner component transition might be longer than
* the bundler loading, so we only show the spinner if
- * it takes more than 1s to load the bundler.
+ * it takes more than 500s to load the bundler.
*/
timeout = setTimeout(() => {
setShowLoading(true);
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index cff7f88529..f5c963f67c 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -94,7 +94,17 @@ export function Search({
onOpen,
onClose,
searchParameters = {
- hitsPerPage: 5,
+ hitsPerPage: 30,
+ attributesToHighlight: [
+ 'hierarchy.lvl0',
+ 'hierarchy.lvl1',
+ 'hierarchy.lvl2',
+ 'hierarchy.lvl3',
+ 'hierarchy.lvl4',
+ 'hierarchy.lvl5',
+ 'hierarchy.lvl6',
+ 'content',
+ ],
},
}: SearchProps) {
useDocSearchKeyboardEvents({isOpen, onOpen, onClose});
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index f464df9590..5ead75a204 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -353,7 +353,7 @@ npm install react-shallow-renderer --save-dev
##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/}
-Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started).
+Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro).
@@ -524,7 +524,7 @@ We are deprecating `react-test-renderer` because it implements its own renderer
The test renderer was created before there were more viable testing strategies available like [React Testing Library](https://testing-library.com), and we now recommend using a modern testing library instead.
-In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience.
+In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) for a modern and well supported testing experience.
## Notable changes {/*notable-changes*/}
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index cd0862b197..aaa7612185 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -35,11 +35,21 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)
[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
+### reactjsday 2024 {/*reactjsday-2024*/}
+October 25, 2024. In-person in Verona, Italy + online (hybrid event)
+
+[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+### React Native London Conf 2024 {/*react-native-london-2024*/}
+November 14 & 15, 2024. In-person in London, UK
+
+[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+
### React Summit US 2024 {/*react-summit-us-2024*/}
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index d8887c3de7..bc058dc1ac 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -117,6 +117,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Italy {/*italy*/}
* [Milan](https://www.meetup.com/React-JS-Milano/)
+## Japan {/*japan*/}
+* [Osaka](https://react-osaka.connpass.com/)
+
## Kenya {/*kenya*/}
* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index c546ae063c..309163f533 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -126,35 +126,35 @@ export default function CatFriends() {
<>
@@ -950,7 +950,7 @@ const catList = [];
for (let i = 0; i < 10; i++) {
catList.push({
id: i,
- imageUrl: 'https://placekitten.com/250/200?image=' + i
+ imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
});
}
@@ -1067,7 +1067,7 @@ const catList = [];
for (let i = 0; i < 10; i++) {
catList.push({
id: i,
- imageUrl: 'https://placekitten.com/250/200?image=' + i
+ imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
});
}
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index c959e27752..94ccc64e98 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -627,7 +627,11 @@ React 有意在开发环境下重新挂载你的组件，来找到类似上例
### 管理非 React 小部件 {/*controlling-non-react-widgets*/}
+<<<<<<< HEAD
有时你需要添加不是用 React 实现的 UI 小部件。比如说你想在你的页面添加一个地图组件。它有一个 `setZoomLevel()` 方法，然后你希望地图的缩放比例和代码中的 `zoomLevel` state 保持同步。你的 Effect 应该类似于：
+=======
+Sometimes you need to add UI widgets that aren't written in React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
+>>>>>>> 589a1d3a8182d851718840f91bec80b0a13e2495
```js
useEffect(() => {
diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md
index a011d058fd..f5442a5d4e 100644
--- a/src/content/learn/thinking-in-react.md
+++ b/src/content/learn/thinking-in-react.md
@@ -270,11 +270,19 @@ props 和 state 是不同的，但它们可以共同工作。父组件将经常
现在为这个 state 贯彻我们的策略:
+<<<<<<< HEAD
1. **验证使用 state 的组件**：
* `ProductTable` 需要基于 state (搜索文本和复选框值) 过滤产品列表。
* `SearchBar` 需要展示 state (搜索文本和复选框值)。
2. **寻找它们的父组件**：它们的第一个共同父组件为 `FilterableProductTable`。
3. **决定 state 放置的地方**：我们将放置过滤文本和勾选 state 的值于 `FilterableProductTable`。
+=======
+1. **Identify components that use state:**
+ * `ProductTable` needs to filter the product list based on that state (search text and checkbox value).
+ * `SearchBar` needs to display that state (search text and checkbox value).
+2. **Find their common parent:** The first parent component both components share is `FilterableProductTable`.
+3. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`.
+>>>>>>> 589a1d3a8182d851718840f91bec80b0a13e2495
所以 state 将被放置在 `FilterableProductTable`。
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index e04ec03a7d..0c499ac6a8 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1133,7 +1133,11 @@ export default function Board() {
+<<<<<<< HEAD
JavaScript 支持闭包，这意味着内部函数（例如 `handleClick`）可以访问外部函数（例如 `Board`）中定义的变量和函数。`handleClick` 函数可以读取 `squares` state 并调用 `setSquares` 方法，因为它们都是在 `Board` 函数内部定义的。
+=======
+JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in an outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
+>>>>>>> 589a1d3a8182d851718840f91bec80b0a13e2495
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 5d2e3be616..51ce4a775c 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -61,6 +61,7 @@ position.x = 5;
```js
import { useState } from 'react';
+
export default function MovingDot() {
const [position, setPosition] = useState({
x: 0,
@@ -131,6 +132,7 @@ onPointerMove={e => {
```js
import { useState } from 'react';
+
export default function MovingDot() {
const [position, setPosition] = useState({
x: 0,
@@ -381,7 +383,11 @@ input { margin-left: 5px; margin-bottom: 5px; }
#### 使用一个事件处理函数来更新多个字段 {/*using-a-single-event-handler-for-multiple-fields*/}
+<<<<<<< HEAD
你也可以在对象的定义中使用 `[` 和 `]` 括号来实现属性的动态命名。下面是同一个例子，但它使用了一个事件处理函数而不是三个：
+=======
+You can also use the `[` and `]` braces inside your object definition to specify a property with a dynamic name. Here is the same example, but with a single event handler instead of three different ones:
+>>>>>>> 589a1d3a8182d851718840f91bec80b0a13e2495
diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md
index e2e35bf147..157d878d48 100644
--- a/src/content/reference/react-dom/preinitModule.md
+++ b/src/content/reference/react-dom/preinitModule.md
@@ -51,12 +51,21 @@ function AppRoot() {
#### 参数 {/*parameters*/}
+<<<<<<< HEAD
* `href`：字符串，要下载并执行的模块的 URL。
* `options`：对象，可以包含以下属性：
* `as`：必需的字符串，只能是 `script`。
* `crossOrigin`：字符串，表示要使用的 [CORS 策略](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin)，可能的值为 `anonymous` 与 `use-credentials`。
* `integrity`：字符串，为资源的加密哈希，用于 [验证其真实性](https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity)。
* `nonce`：字符串，表示使用严格内容安全策略时允许资源的 [加密随机数](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/nonce)。
+=======
+* `href`: a string. The URL of the module you want to download and execute.
+* `options`: an object. It contains the following properties:
+ * `as`: a required string. It must be `'script'`.
+ * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
+ * `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+ * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
+>>>>>>> 589a1d3a8182d851718840f91bec80b0a13e2495
#### 返回值 {/*returns*/}
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index a40c0892e3..770cac65b3 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -48,6 +48,7 @@ const { pipe } = renderToPipeableStream(, {
* `reactNode`：想要将其渲染为 HTML 的 React 节点，比如像 `` 这样的 JSX 元素。这样做意味着整个页面文档都将被渲染，所以这里提到的 `App` 组件将渲染 `` 标签.
+<<<<<<< HEAD
* **可选** `options`：用于配置流的对象.
* **可选** `bootstrapScriptContent`：指定一个字符串，这个字符串将被放入 `