Update more examples for 18 (#4607)

* Update more examples for 18

* blargh

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,7 +95,7 @@ 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}
 
@@ -103,7 +103,7 @@ Commonly, you might want to display React components in multiple places on the H
 
 [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);

examples/uncontrolled-components/input-type-file.js

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