Published
Edited
Dec 13, 2019
Insert cell
Insert cell
Insert cell
Insert cell
{
const root = html`<div></div>`;

const element = htm`<h1>Hello World</h1>`; // ***
ReactDOM.render(element, root);
return root;
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const root = html`<div></div>`;

const element = htm`<h1>Hello World</h1>`;
ReactDOM.render(element, root); // ***
return root;
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const root = html`<div></div>`;
function tick() {
const element = htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${new Date().toLocaleTimeString()}.</h2>
</div>
`;
ReactDOM.render(element, root);
}

setInterval(tick, 1000);
return root;
}
Insert cell
{
const root = html`<div></div>`;
function tick() {
const element = htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${new Date().toLocaleTimeString()}.</h2>
</div>
`;
ReactDOM.render(element, root);
}
// to replace setTimeout or setInterval
while (true) {
await Promises.tick(1000);
tick();
yield root;
}
// return root;
}
Insert cell
Insert cell
viewof option4 = DOM.select(none_doc);
Insert cell
Insert cell
import { none_doc, hide_display, React, ReactDOM, htm } from "@embracelife/tutorial-utilities"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more