Skip to content

Commit 72e7547

Browse files
committed
Embed examples using gatsby-remark-embed-snippet
1 parent cdecba1 commit 72e7547

File tree

2 files changed

+3
-23
lines changed

2 files changed

+3
-23
lines changed

content/docs/rendering-elements.md

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,7 @@ Applications built with just React usually have a single root DOM node. If you a
3535

3636
To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
3737

38-
```js
39-
const element = <h1>Hello, world</h1>;
40-
ReactDOM.render(
41-
element,
42-
document.getElementById('root')
43-
);
44-
```
38+
`embed:rendering-elements/render-an-element.js`
4539

4640
[](codepen://rendering-elements/render-an-element)
4741

@@ -55,22 +49,7 @@ With our knowledge so far, the only way to update the UI is to create a new elem
5549

5650
Consider this ticking clock example:
5751

58-
```js{8-11}
59-
function tick() {
60-
const element = (
61-
<div>
62-
<h1>Hello, world!</h1>
63-
<h2>It is {new Date().toLocaleTimeString()}.</h2>
64-
</div>
65-
);
66-
ReactDOM.render(
67-
element,
68-
document.getElementById('root')
69-
);
70-
}
71-
72-
setInterval(tick, 1000);
73-
```
52+
`embed:rendering-elements/update-rendered-element.js`
7453

7554
[](codepen://rendering-elements/update-rendered-element)
7655

examples/rendering-elements/update-rendered-element.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ function tick() {
88
</h2>
99
</div>
1010
);
11+
// highlight-range{1-4}
1112
ReactDOM.render(
1213
element,
1314
document.getElementById('root')

0 commit comments

Comments
 (0)