[18] Upgrade homepage examples (#4469)

content/home/examples/a-component-using-external-plugins.js

@@ -36,7 +36,4 @@ class MarkdownEditor extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <MarkdownEditor />,
-  document.getElementById('markdown-example')
-);
+root.render(<MarkdownEditor />);

content/home/examples/a-simple-component.js

@@ -1,14 +1,7 @@
 class HelloMessage extends React.Component {
   render() {
-    return (
-      <div>
-        Hello {this.props.name}
-      </div>
-    );
+    return <div>Hello {this.props.name}</div>;
   }
 }
 
-ReactDOM.render(
-  <HelloMessage name="Taylor" />,
-  document.getElementById('hello-example')
-);
+root.render(<HelloMessage name="Taylor" />);

content/home/examples/a-stateful-component.js

@@ -27,7 +27,4 @@ class Timer extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Timer />,
-  document.getElementById('timer-example')
-);
+root.render(<Timer />);

content/home/examples/an-application.js

@@ -60,7 +60,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <TodoApp />,
-  document.getElementById('todos-example')
-);
+root.render(<TodoApp />);

src/components/CodeEditor/CodeEditor.js

@@ -248,14 +248,23 @@ class CodeEditor extends Component {
 
   _render() {
     const {compiled} = this.state;
+    const {containerNodeID} = this.props;
+
+    // Until we upgrade Gatsby to React 18, fake the new root API.
+    const root = {
+      render: element => {
+        ReactDOM.render(element, document.getElementById(containerNodeID));
+      },
+    };
 
     try {
       // Example code requires React, ReactDOM, and Remarkable to be within scope.
       // It also requires a "mountNode" variable for ReactDOM.render()
       // eslint-disable-next-line no-new-func
-      new Function('React', 'ReactDOM', 'Remarkable', compiled)(
+      new Function('React', 'ReactDOM', 'root', 'Remarkable', compiled)(
         React,
         ReactDOM,
+        root,
         Remarkable,
       );
     } catch (error) {