Skip to content

Commit

Permalink
[18] Upgrade homepage examples (#4469)
Browse files Browse the repository at this point in the history
  • Loading branch information
rickhanlonii committed Mar 29, 2022
1 parent 9081a48 commit 2610a05
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 22 deletions.
5 changes: 1 addition & 4 deletions content/home/examples/a-component-using-external-plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,4 @@ class MarkdownEditor extends React.Component {
}
}

ReactDOM.render(
<MarkdownEditor />,
document.getElementById('markdown-example')
);
root.render(<MarkdownEditor />);
11 changes: 2 additions & 9 deletions content/home/examples/a-simple-component.js
Original file line number Diff line number Diff line change
@@ -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" />);
5 changes: 1 addition & 4 deletions content/home/examples/a-stateful-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,4 @@ class Timer extends React.Component {
}
}

ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);
root.render(<Timer />);
5 changes: 1 addition & 4 deletions content/home/examples/an-application.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,4 @@ class TodoList extends React.Component {
}
}

ReactDOM.render(
<TodoApp />,
document.getElementById('todos-example')
);
root.render(<TodoApp />);
11 changes: 10 additions & 1 deletion src/components/CodeEditor/CodeEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 2610a05

Please sign in to comment.