Update more examples for 18 (reactjs#4607)

* Update more examples for 18

* blargh

Author: gaearon

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

@@ -25,7 +25,7 @@ In this section, we will show how to add a React component to an existing HTML p
 
 There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.**
 
-Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
+Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)
 
 ### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html}
 
@@ -75,7 +75,7 @@ Open **[this starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4
 >
 >This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen!
 
-After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`:
+After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add three lines to the bottom of `like_button.js`:
 
 ```js{3,4,5}
 // ... the starter code you pasted ...
@@ -95,15 +95,15 @@ Check out the next sections for more tips on integrating React.
 
 **[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)**
 
-**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)**
+**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)**
 
 ### Tip: Reuse a Component {#tip-reuse-a-component}
 
 Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it:
 
 [View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda)
 
-[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip)
+[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/279839cb9891bd41802ebebc5365e9dec08eeb9f.zip)
 
 >Note
 >

content/docs/components-and-props.md

@@ -64,13 +64,13 @@ When React sees an element representing a user-defined component, it passes JSX
 
 For example, this code renders "Hello, Sara" on the page:
 
-```js{1,5}
+```js{1,6}
 function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
 }
 
-const element = <Welcome name="Sara" />;
 const root = ReactDOM.createRoot(document.getElementById('root'));
+const element = <Welcome name="Sara" />;
 root.render(element);
 ```
 

content/docs/error-boundaries.md

@@ -66,7 +66,7 @@ Note that **error boundaries only catch errors in the components below them in t
 
 ## Live Demo {#live-demo}
 
-Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html).
+Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010).
 
 
 ## Where to Place Error Boundaries {#where-to-place-error-boundaries}

content/docs/integrating-with-other-libraries.md

@@ -246,20 +246,22 @@ You can have as many such isolated components as you like, and use `ReactDOM.cre
 
 Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.createRoot()`](/docs/react-dom-client.html#createroot):
 
-```js{1,5,8-9,13}
+```js{7,11,15}
 function Paragraph(props) {
   return <p>{props.text}</p>;
 }
 
 const ParagraphView = Backbone.View.extend({
+  initialize(options) {
+    this.reactRoot = ReactDOM.createRoot(this.el);
+  },
   render() {
     const text = this.model.get('text');
-    this.root = ReactDOM.createRoot(this.el);
-    this.root.render(<Paragraph text={text} />);
+    this.reactRoot.render(<Paragraph text={text} />);
     return this;
   },
   remove() {
-    this.root.unmount();
+    this.reactRoot.unmount();
     Backbone.View.prototype.remove.call(this);
   }
 });

content/versions.yml

@@ -1,5 +1,7 @@
+- title: '18.1.0'
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1810-april-26-2022
 - title: '18.0.0'
-  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022
 - title: '17.0.2'
   changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021
   url: https://17.reactjs.org

examples/context/theme-detailed-app.js

@@ -46,4 +46,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.root);
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(<App />);

examples/context/updating-nested-context-app.js

@@ -42,4 +42,7 @@ function Content() {
   );
 }
 
-ReactDOM.render(<App />, document.root);
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(<App />);

examples/hello-world.js

@@ -1,4 +1,4 @@
-ReactDOM.render(
-  <h1>Hello, world!</h1>,
+const root = ReactDOM.createRoot(
   document.getElementById('root')
 );
+root.render(<h1>Hello, world!</h1>);

examples/introducing-jsx.js

@@ -9,4 +9,7 @@ const user = {
 
 const element = <h1>Hello, {formatName(user)}!</h1>;
 
-ReactDOM.render(element, document.getElementById('root'));
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(element);

examples/rendering-elements/render-an-element.js

@@ -1,5 +1,5 @@
-const element = <h1>Hello, world</h1>;
 const root = ReactDOM.createRoot(
   document.getElementById('root')
 );
+const element = <h1>Hello, world</h1>;
 root.render(element);