Published
Edited
Dec 15, 2019
1 fork
viewof option1 = DOM.select(none_doc);
{
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;
}
{
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
);
}
while (true) {
await Promises.tick(1000);
tick();
yield root;
}
}
{
const root = html`<div></div>`;
function Clock(props) {
return htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${props.date.toLocaleTimeString()}.</h2>
</div>
`;
}
function tick() {
ReactDOM.render(
htm`<${Clock} date=${new Date()} />`,
root
);
}
setInterval(tick, 1000);
return root;
}
{
const root = html`<div></div>`;
function Clock(props) {
return htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${props.date.toLocaleTimeString()}.</h2>
</div>
`;
}
function tick() {
ReactDOM.render(
htm`<${Clock} date=${new Date()} />`,
root
);
}
while (true) {
await Promises.tick(1000);
tick();
yield root;
}
}
{
const root = html`<div></div>`;
class Clock extends React.Component {
render(){
return htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${this.props.date.toLocaleTimeString()}.</h2>
</div>
`;
}
}
function tick() {
ReactDOM.render(
htm`<${Clock} date=${new Date()} />`,
root
);
}
setInterval(tick, 1000);
return root;
}
{
const root = html`<div></div>`;
class Clock extends React.Component {
render() {
return htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${this.props.date.toLocaleTimeString()}.</h2>
</div>
`;
}
}
function tick() {
ReactDOM.render(
htm`<${Clock} date=${new Date()} />`,
root
);
}
while (true) {
await Promises.tick(1000);
tick();
yield root;
}
}
localState = {
addList("localState", "Adding Local State to a Class", 3);
return md`
## Adding Local State to a Class
https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
`
}
viewof option3 = DOM.select(none_doc);
{
const root = html`<div></div>`;
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${this.state.date.toLocaleTimeString()}.</h2>
</div>
`;
}
}
ReactDOM.render(
htm`<${Clock} />`,
root
);
return root;
}
viewof option4 = DOM.select(none_doc);
{
const root = html`<div></div>`;
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() { // how to remove the Clock element?
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return htm`
<div>
<h1>Hello, world!</h1>
<h2>It is ${this.state.date.toLocaleTimeString()}.</h2>
</div>
`;
}
}
ReactDOM.render(
htm`<${Clock} />`,
root
);
return root;
}
viewof option5 = DOM.select(none_doc);
viewof option6 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function FormattedDate(props) {
return htm`<h2>It is ${props.date.toLocaleTimeString()}.</h2>`;
}
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() { // how to remove the Clock element?
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
// FormattedDate(props) {
// return htm`<h2>It is ${props.date.toLocaleTimeString()}.</h2>`;
// }
render() {
return htm`
<div>
<h1>Hello, world!</h1>
<!--<h2>It is ${this.state.date.toLocaleTimeString()}.</h2>-->
<!--<${this.FormattedDate} date=${this.state.date}/>-->
<${FormattedDate} date=${this.state.date}/>
</div>
`;
}
}
function App() {
return htm`
<div>
<${Clock} />
<${Clock} />
<${Clock} />
</div>
`;
}
ReactDOM.render(
htm`<${App} />`,
root
);
return root;
}
mutable list = [];
// toc = html`<ol>
// ${list.sort((a, b) => a.idx - b.idx).map((d, idx) =>
// html`
// <li>
// <a href=${"#"+d.id}>${d.id + " =>"}</a>
// <span>${d.des}</span>
// </li>`)}
// </ol>`
html`<table style="width: 180px;">
<thead><tr><th>#</th><th>Color</th><th>Swatch</th></tr></thead>
<tbody>${d3.schemeCategory10.map((color, i) => html`<tr>
<td>${i}</td>
<td>${color}</td>
<td style=${{background: color}}></td>
</tr>`)}</tbody>
</table>`
function addList(id, des, idx) {
let list = mutable list;
// todo: make sure no replicate of id
list.push({id: id, des: des, idx: idx});
mutable list = list;
}
d3 = require("d3")
import {html, svg} from "@observablehq/htl"
import {React, ReactDOM, htm, none_doc, hide_display} from "@embracelife/tutorial-utilities"
html`<div class="pure-menu custom-restricted-width">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>
</ul>
</div>`
html`<style>
.custom-restricted-width {
display: inline-block;
}
</style>`
require("https://unpkg.com/purecss@1.0.1/build/pure-min.css")
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.
