From 00d3d671fef47cfba29d602cc350f34f4bf4eb45 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 2 Jan 2019 18:57:56 +0000
Subject: [PATCH] Clarify DOM container in homepage examples

---
 .../a-component-using-external-plugins.js       |  7 ++++---
 .../a-component-using-external-plugins.md       |  1 +
 content/home/examples/a-simple-component.js     |  4 +---
 content/home/examples/a-simple-component.md     |  1 +
 content/home/examples/a-stateful-component.js   |  7 ++++---
 content/home/examples/a-stateful-component.md   |  1 +
 content/home/examples/an-application.js         |  7 ++++---
 content/home/examples/an-application.md         |  1 +
 src/components/CodeEditor/CodeEditor.js         | 17 +++--------------
 src/components/CodeExample/CodeExample.js       |  8 ++++++--
 src/pages/index.js                              |  2 ++
 11 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 25ad6f55563..09868cfbb06 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -36,6 +36,7 @@ class MarkdownEditor extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#markdown')
-
-ReactDOM.render(<MarkdownEditor />, mountNode);
\ No newline at end of file
+ReactDOM.render(
+  <MarkdownEditor />,
+  document.getElementById('markdown-example')
+);
diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index f0fc29ecc13..a8c35bbd643 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,6 +1,7 @@
 ---
 title: A Component Using External Plugins
 order: 3
+domid: markdown-example
 ---
 
 React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 9849a573eb4..90c31b960f7 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -8,9 +8,7 @@ class HelloMessage extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#message')
-
 ReactDOM.render(
   <HelloMessage name="Taylor" />,
-  mountNode
+  document.getElementById('hello-example')
 );
\ No newline at end of file
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index ea2a1535a4c..d791856d4df 100644
--- a/content/home/examples/a-simple-component.md
+++ b/content/home/examples/a-simple-component.md
@@ -1,6 +1,7 @@
 ---
 title: A Simple Component
 order: 0
+domid: hello-example
 ---
 
 React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index dba6de4fecc..25d5a914594 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -27,6 +27,7 @@ class Timer extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#timer')
-
-ReactDOM.render(<Timer />, mountNode);
\ No newline at end of file
+ReactDOM.render(
+  <Timer />,
+  document.getElementById('timer-example')
+);
\ No newline at end of file
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index 1919226f409..a68ab0a517e 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/content/home/examples/a-stateful-component.md
@@ -1,6 +1,7 @@
 ---
 title: A Stateful Component
 order: 1
+domid: timer-example
 ---
 
 In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 3f43373ff71..43f777dc2af 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -60,6 +60,7 @@ class TodoList extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#app')
-
-ReactDOM.render(<TodoApp />, mountNode);
+ReactDOM.render(
+  <TodoApp />,
+  document.getElementById('todos-example')
+);
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index f6370b0d97b..227d0621b1b 100644
--- a/content/home/examples/an-application.md
+++ b/content/home/examples/an-application.md
@@ -1,6 +1,7 @@
 ---
 title: An Application
 order: 2
+domid: todos-example
 ---
 
 Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 9c1aab34ee6..6e42fff7e01 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -27,8 +27,6 @@ class CodeEditor extends Component {
   }
 
   componentDidMount() {
-    // Initial render() will always be a no-op,
-    // Because the mountNode ref won't exist yet.
     this._render();
   }
 
@@ -45,7 +43,7 @@ class CodeEditor extends Component {
   }
 
   render() {
-    const {children} = this.props;
+    const {children, containerNodeID} = this.props;
     const {
       compiledES6,
       code,
@@ -205,6 +203,7 @@ class CodeEditor extends Component {
                 <MetaTitle>Result</MetaTitle>
               </div>
               <div
+                id={containerNodeID}
                 css={{
                   padding: 10,
                   maxHeight: '340px !important',
@@ -233,7 +232,6 @@ class CodeEditor extends Component {
                     padding: 5,
                   },
                 }}
-                ref={this._setMountRef}
               />
             </div>
           )}
@@ -243,21 +241,16 @@ class CodeEditor extends Component {
   }
 
   _render() {
-    if (!this._mountNode) {
-      return;
-    }
-
     const {compiled} = this.state;
 
     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', 'mountNode', compiled)(
+      new Function('React', 'ReactDOM', 'Remarkable', compiled)(
         React,
         ReactDOM,
         Remarkable,
-        this._mountNode,
       );
     } catch (error) {
       console.error(error);
@@ -269,10 +262,6 @@ class CodeEditor extends Component {
     }
   }
 
-  _setMountRef = ref => {
-    this._mountNode = ref;
-  };
-
   _updateState(code, showJSX = true) {
     try {
       let newState = {
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 31fe7e2c605..bc5d6ed10f8 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -6,7 +6,7 @@ import CodeEditor from '../CodeEditor/CodeEditor';
 
 class CodeExample extends Component {
   render() {
-    const {children, code, id, loaded} = this.props;
+    const {children, code, id, containerNodeID, loaded} = this.props;
     return (
       <div
         id={id}
@@ -58,7 +58,11 @@ class CodeExample extends Component {
             {children}
           </div>
         )}
-        {loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
+        {loaded ? (
+          <CodeEditor code={code} containerNodeID={containerNodeID} />
+        ) : (
+          <h4>Loading code example...</h4>
+        )}
       </div>
     );
   }
diff --git a/src/pages/index.js b/src/pages/index.js
index ea091857605..bc2d732fd46 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -263,6 +263,7 @@ class Home extends Component {
                         key={index}
                         id={snippet.id}
                         code={snippet.code}
+                        containerNodeID={node.frontmatter.domid}
                         loaded={babelLoaded}>
                         <h3 css={headingStyles}>{node.frontmatter.title}</h3>
                         <div dangerouslySetInnerHTML={{__html: node.html}} />
@@ -368,6 +369,7 @@ export const pageQuery = graphql`
           }
           frontmatter {
             title
+            domid
           }
           html
         }