Skip to content

Commit 323e8bb

Browse files
authored
[18] Switch code samples to createRoot (#4470)
* [18] Switch code samples to createRoot * Feedback fixes * Feedback updates
1 parent 996075f commit 323e8bb

27 files changed

+108
-188
lines changed

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -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)!
@@ -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

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,15 @@ Open **[this starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4
7777
7878
After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`:
7979

80-
```js{3,4}
80+
```js{3,4,5}
8181
// ... the starter code you pasted ...
8282
8383
const domContainer = document.querySelector('#like_button_container');
84-
ReactDOM.render(e(LikeButton), domContainer);
84+
const root = ReactDOM.createRoot(domContainer);
85+
root.render(e(LikeButton));
8586
```
8687

87-
These two lines of code find the `<div>` we added to our HTML in the first step, and then display our "Like" button React component inside of it.
88+
These three lines of code find the `<div>` we added to our HTML in the first step, create a React app with it, and then display our "Like" button React component inside of it.
8889

8990
### That's It! {#thats-it}
9091

content/docs/addons-shallow-renderer.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Shallow testing currently has some limitations, namely not supporting refs.
5959

6060
You can think of the shallowRenderer as a "place" to render the component you're testing, and from which you can extract the component's output.
6161

62-
`shallowRenderer.render()` is similar to [`ReactDOM.render()`](/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
62+
`shallowRenderer.render()` is similar to [`root.render()`](/docs/react-dom-client.html#createroot) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
6363

6464
### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput}
6565

content/docs/addons-test-utils.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ Here is how we can test it:
8989

9090
```js{3,20-22,29-31}
9191
import React from 'react';
92-
import ReactDOM from 'react-dom';
92+
import ReactDOM from 'react-dom/client';
9393
import { act } from 'react-dom/test-utils';
9494
import Counter from './Counter';
9595
@@ -108,7 +108,7 @@ afterEach(() => {
108108
it('can render and update a counter', () => {
109109
// Test first render and componentDidMount
110110
act(() => {
111-
ReactDOM.render(<Counter />, container);
111+
ReactDOM.createRoot(container).render(<Counter />);
112112
});
113113
const button = container.querySelector('button');
114114
const label = container.querySelector('p');
@@ -304,7 +304,7 @@ Render a React element into a detached DOM node in the document. **This function
304304

305305
```js
306306
const domContainer = document.createElement('div');
307-
ReactDOM.render(element, domContainer);
307+
ReactDOM.createRoot(domContainer).render(element);
308308
```
309309

310310
> Note:

content/docs/components-and-props.md

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,15 @@ function Welcome(props) {
7070
}
7171
7272
const element = <Welcome name="Sara" />;
73-
ReactDOM.render(
74-
element,
75-
document.getElementById('root')
76-
);
73+
const root = ReactDOM.createRoot(document.getElementById('root'));
74+
root.render(element);
7775
```
7876

7977
**[Try it on CodePen](https://codepen.io/gaearon/pen/YGYmEG?editors=1010)**
8078

8179
Let's recap what happens in this example:
8280

83-
1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
81+
1. We call `root.render()` with the `<Welcome name="Sara" />` element.
8482
2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
8583
3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
8684
4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
@@ -111,11 +109,6 @@ function App() {
111109
</div>
112110
);
113111
}
114-
115-
ReactDOM.render(
116-
<App />,
117-
document.getElementById('root')
118-
);
119112
```
120113

121114
**[Try it on CodePen](https://codepen.io/gaearon/pen/KgQKPr?editors=1010)**

content/docs/concurrent-mode-adoption.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ import ReactDOM from 'react-dom';
7474
//
7575
// You can opt into Concurrent Mode by writing:
7676

77-
ReactDOM.unstable_createRoot(
77+
ReactDOM.createRoot(
7878
document.getElementById('root')
7979
).render(<App />);
8080
```

content/docs/forms.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,10 +275,10 @@ Specifying the `value` prop on a [controlled component](/docs/forms.html#control
275275
The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
276276

277277
```javascript
278-
ReactDOM.render(<input value="hi" />, mountNode);
278+
ReactDOM.createRoot(mountNode).render(<input value="hi" />);
279279

280280
setTimeout(function() {
281-
ReactDOM.render(<input value={null} />, mountNode);
281+
ReactDOM.createRoot(mountNode).render(<input value={null} />);
282282
}, 1000);
283283

284284
```

content/docs/handling-events.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,6 @@ class Toggle extends React.Component {
8484
);
8585
}
8686
}
87-
88-
ReactDOM.render(
89-
<Toggle />,
90-
document.getElementById('root')
91-
);
9287
```
9388

9489
[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)

content/docs/hello-world.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@ next: introducing-jsx.html
88

99
The smallest React example looks like this:
1010

11-
```js
12-
ReactDOM.render(
13-
<h1>Hello, world!</h1>,
14-
document.getElementById('root')
15-
);
11+
```jsx
12+
ReactDOM
13+
.createRoot(document.getElementById('root'))
14+
.render(<h1>Hello, world!</h1>);
1615
```
1716

1817
It displays a heading saying "Hello, world!" on the page.

content/docs/hooks-faq.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ We'll test it using React DOM. To make sure that the behavior matches what happe
148148

149149
```js{3,20-22,29-31}
150150
import React from 'react';
151-
import ReactDOM from 'react-dom';
151+
import ReactDOM from 'react-dom/client';
152152
import { act } from 'react-dom/test-utils';
153153
import Counter from './Counter';
154154
@@ -167,7 +167,7 @@ afterEach(() => {
167167
it('can render and update a counter', () => {
168168
// Test first render and effect
169169
act(() => {
170-
ReactDOM.render(<Counter />, container);
170+
ReactDOM.createRoot(container).render(<Counter />);
171171
});
172172
const button = container.querySelector('button');
173173
const label = container.querySelector('p');

0 commit comments

Comments
 (0)