Skip to content

Commit f5fc6a2

Browse files
neighborhood999neighborhood999
authored
Merge pull request #296 from reactjs/sync-707f22d2
2 parents e5217e8 + f2874d7 commit f5fc6a2

File tree

65 files changed

+1261
-2467
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1261
-2467
lines changed

‎beta/public/html/single-file-example.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Hello World</title>
6-
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
7-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
8-
6+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
8+
99
<!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
1010
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1111
</head>

‎beta/src/pages/apis/reactdom.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ npm install react-dom
2222

2323
```js
2424
// Importing a specific API:
25-
import { render } from 'react-dom';
25+
import { createRoot } from 'react-dom/client';
2626

2727
// Importing all APIs together:
28-
import * as ReactDOM from 'react';
28+
import * as ReactDOMClient from 'react-dom/client';
2929
```
3030

3131
</PackageImport>

‎beta/src/pages/apis/usereducer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const [state, dispatch] = useReducer(reducer, initialArg, init)
3636
Call `useReducer` at the top level of your component to manage state with a [reducer](/learn/extracting-state-logic-into-a-reducer).
3737

3838
```js [[1, 8, "state"], [2, 8, "dispatch"], [4, 8, "reducer"], [3, 8, "{ age: 42 }"]]
39-
import { useState } from 'react';
39+
import { useReducer } from 'react';
4040

4141
function reducer(state, action) {
4242
// ...

‎beta/src/pages/learn/add-react-to-a-website.md

+18-17
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ React 從一開始就被設計成逐步採用的方式，你可以根據你的
3030

3131
在 HTML 頁面的 `</body>` 標籤結束之前，為以下檔案加入三個 `<script>` 標籤：
3232

33-
- [**react.development.js**](https://unpkg.com/react@17/umd/react.development.js) 載入 React 的核心
34-
- [**react-dom.development.js**](https://unpkg.com/react-dom@17/umd/react-dom.development.js) 讓 React render HTML element 到 [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)。
33+
- [**react.development.js**](https://unpkg.com/react@18/umd/react.development.js) 載入 React 的核心
34+
- [**react-dom.development.js**](https://unpkg.com/react-dom@18/umd/react-dom.development.js) 讓 React render HTML element 到 [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)。
3535
- **like_button.js** 是你在第三步將要撰寫 component 的地方！
3636

3737
<Gotcha>
@@ -42,8 +42,8 @@ React 從一開始就被設計成逐步採用的方式，你可以根據你的
4242

4343
```html
4444
<!-- end of the page -->
45-
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
46-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
45+
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
46+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
4747
<script src="like_button.js"></script>
4848
</body>
4949
```
@@ -74,11 +74,12 @@ function LikeButton() {
7474

7575
### 第四步：把你的 React Component 加入到頁面 {/*step-4-add-your-react-component-to-the-page*/}
7676

77-
最後，在 **like_button.js** 底部加入兩行。這兩行程式碼找到你在第一步中加入 HTML 到 `<div>`，然後在其中顯示「Like」按鈕的 React component。
77+
最後，在 **like_button.js** 底部加入三行程式碼。這三行程式碼找到你在第一步中加入 HTML 到 `<div>`，用它建立一個 React app，然後在裡面顯示「Like」按鈕的 React component。
7878

7979
```js
8080
const domContainer = document.getElementById('component-goes-here');
81-
ReactDOM.render(React.createElement(LikeButton), domContainer);
81+
const root = ReactDOM.createRoot(domContainer);
82+
root.render(React.createElement(LikeButton));
8283
```
8384

8485
**恭喜你/妳！你剛剛在你的網站上 render 了你的第一個 React component！**
@@ -88,21 +89,21 @@ ReactDOM.render(React.createElement(LikeButton), domContainer);
8889

8990
#### 你可以重複使用 Component！ {/*you-can-reuse-components*/}
9091

91-
你可能想要在同一個 HTML 頁面的多個地方顯示一個 React component。當頁面中由 React 驅動的部分彼此隔離時，這是最有用的。你可以透過多次呼叫 `ReactDOM.render()` 和多個 container element 來做到這一點。
92+
你可能想要在同一個 HTML 頁面的多個地方顯示一個 React component。當頁面中由 React 驅動的部分彼此隔離時，這是最有用的。你可以透過多次呼叫 `ReactDOM.createRoot()` 和多個 container element 來做到這一點。
9293

9394
1. 在 **index.html** 中，加入一個額外的 `<div id="component-goes-here-too"></div>` container element。
9495
2. 在 **like_button.js** 中，為新的 container element 加入一個額外的 `ReactDOM.render()`：
9596

9697
```js {6,7,8,9}
97-
ReactDOM.render(
98-
React.createElement(LikeButton),
98+
const root1 = ReactDOM.createRoot(
9999
document.getElementById('component-goes-here')
100100
);
101+
root1.render(React.createElement(LikeButton));
101102

102-
ReactDOM.render(
103-
React.createElement(LikeButton),
103+
const root2 = ReactDOM.createRoot(
104104
document.getElementById('component-goes-here-too')
105105
);
106+
root2.render(React.createElement(LikeButton));
106107
```
107108

108109
請查看[一個顯示了三次「Like」按鈕並向它傳送了一些資料的範例](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)！
@@ -115,8 +116,8 @@ ReactDOM.render(
115116
- **如果你已經將你的應用程式 script 進行 minify**，如果你確保部署的 HTML 是載入 `production.min.js` 結尾的 React 版本，你的網站將是 proudction-ready 的，像是如下：
116117

117118
```html
118-
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
119-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
119+
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
120+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
120121
```
121122

122123
## 嘗試 React 與 JSX {/*try-react-with-jsx*/}
@@ -144,8 +145,8 @@ return <button onClick={() => setLiked(true)}>Like</button>;
144145
```html {6}
145146
<!-- ... rest of <head> ... -->
146147

147-
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
148-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
148+
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
149+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
149150

150151
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
151152

@@ -157,8 +158,8 @@ return <button onClick={() => setLiked(true)}>Like</button>;
157158

158159
```jsx {1}
159160
<script type="text/babel">
160-
ReactDOM.render(
161-
<h1>Hello, world!</h1>, document.getElementById('root') );
161+
const root = ReactDOM.createRoot(document.getElementById('root'));
162+
root.render(<h1>Hello, world!</h1>);
162163
</script>
163164
```
164165

‎beta/src/pages/learn/choosing-the-state-structure.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2019,7 +2019,7 @@ export default function App() {
20192019
20202020
### Fix a broken packing list {/*fix-a-broken-packing-list*/}
20212021
2022-
This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark a place as completed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
2022+
This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark an item as packed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
20232023
20242024
<Hint>
20252025

‎beta/src/pages/learn/sharing-state-between-components.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ Lifting state up often changes the nature of what you're storing as state.
166166

167167
<img alt="The parent component passes the state setting function to both child components." src="/images/docs/sketches/s_passing-functions-down.png" />
168168

169-
In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use an number as the index of the active `Panel` for the state variable:
169+
In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable:
170170

171171
```js
172172
const [activeIndex, setActiveIndex] = useState(0);

‎content/authors.yml

+3
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ petehunt:
7676
rachelnabors:
7777
name: Rachel Nabors
7878
url: https://twitter.com/rachelnabors
79+
reactteam:
80+
name: The React Team
81+
url: https://reactjs.org/community/team.html
7982
rickhanlonii:
8083
name: Rick Hanlon
8184
url: https://twitter.com/rickhanlonii

0 commit comments

Comments
 (0)