Browse Source

Clarify DOM container in homepage examples (#1526)

main
Dan Abramov 6 years ago
committed by GitHub
parent
commit
ea03fe7163
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 7
      content/home/examples/a-component-using-external-plugins.js
  2. 1
      content/home/examples/a-component-using-external-plugins.md
  3. 4
      content/home/examples/a-simple-component.js
  4. 1
      content/home/examples/a-simple-component.md
  5. 7
      content/home/examples/a-stateful-component.js
  6. 1
      content/home/examples/a-stateful-component.md
  7. 7
      content/home/examples/an-application.js
  8. 1
      content/home/examples/an-application.md
  9. 17
      src/components/CodeEditor/CodeEditor.js
  10. 8
      src/components/CodeExample/CodeExample.js
  11. 2
      src/pages/index.js

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

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

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

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

7
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);
ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);

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

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

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

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

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

2
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
}

Loading…
Cancel
Save