Clarify DOM container in homepage examples (#1526)

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 />,
-ReactDOM.render(<MarkdownEditor />, mountNode);
+  document.getElementById('markdown-example')
+);

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.

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')
 );

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`.

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

@@ -27,6 +27,7 @@ class Timer extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#timer')
+ReactDOM.render(
-
+  <Timer />,
-ReactDOM.render(<Timer />, mountNode);
+  document.getElementById('timer-example')
+);

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()`.

content/home/examples/an-application.js

@@ -60,6 +60,7 @@ class TodoList extends React.Component {
   }
 }
 
-// let mountNode = document.querySelector('#app')
+ReactDOM.render(
-
+  <TodoApp />,
-ReactDOM.render(<TodoApp />, mountNode);
+  document.getElementById('todos-example')
+);

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.

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 = {

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>
     );
   }

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
         }