Skip to content

Commit 0261356

Browse files
carburocarburo
authored
Merge pull request #509 from reactjs/sync-707f22d2
Sync with reactjs.org @ 707f22d
2 parents ff032d9 + 95cee0c commit 0261356

Some content is hidden

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

56 files changed

+1186
-356
lines changed

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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ You can place a "container" element like this `<div>` anywhere inside the `<body
3030

3131
In the HTML page, right before the closing `</body>` tag, add three `<script>` tags for the following files:
3232

33-
- [**react.development.js**](https://unpkg.com/react@17/umd/react.development.js) loads the core of React
34-
- [**react-dom.development.js**](https://unpkg.com/react-dom@17/umd/react-dom.development.js) lets React render HTML elements to the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model).
33+
- [**react.development.js**](https://unpkg.com/react@18/umd/react.development.js) loads the core of React
34+
- [**react-dom.development.js**](https://unpkg.com/react-dom@18/umd/react-dom.development.js) lets React render HTML elements to the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model).
3535
- **like_button.js** is where you'll write your component in step 3!
3636

3737
<Gotcha>
@@ -42,8 +42,8 @@ When deploying, replace "development.js" with "production.min.js".
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
### Step 4: Add your React Component to the page {/*step-4-add-your-react-component-to-the-page*/}
7676

77-
Lastly, add two lines to the bottom of **like_button.js**. These two lines of code find the `<div>` you added to your HTML in the first step and then display the "Like" button React component inside of it.
77+
Lastly, add three lines to the bottom of **like_button.js**. These three lines of code find the `<div>` you added to your HTML in the first step, create a React app with it, and then display the "Like" button React component inside of it.
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
**Congratulations! You have just rendered your first React component to your website!**
@@ -88,21 +89,21 @@ ReactDOM.render(React.createElement(LikeButton), domContainer);
8889

8990
#### You can reuse components! {/*you-can-reuse-components*/}
9091

91-
You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.render()` multiple times with multiple container elements.
92+
You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.createRoot()` multiple times with multiple container elements.
9293

9394
1. In **index.html**, add an additional container element `<div id="component-goes-here-too"></div>`.
9495
2. In **like_button.js**, add an additional `ReactDOM.render()` for the new container element:
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
Check out [an example that displays the "Like" button three times and passes some data to it](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)!
@@ -115,8 +116,8 @@ Unminified JavaScript can significantly slow down page load times for your users
115116
- **If you already minify** your application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in `production.min.js` like so:
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
## Try React with JSX {/*try-react-with-jsx*/}
@@ -144,8 +145,8 @@ The quickest way to try JSX in your project is to add the Babel compiler to your
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 @@ Now you can use JSX in any `<script>` tag by adding `type="text/babel"` attribut
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

Lines changed: 1 addition & 1 deletion
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

‎content/authors.yml

Lines changed: 3 additions & 0 deletions
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)