viewof option1 = DOM.select(none_doc);
{
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
return doubled;
}
{
const root = html`<div></div>`;
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
htm`<li>${number}</li>`
);
ReactDOM.render(
htm`<ul>${listItems}</ul>`,
root
);
return root;
}
viewof option3 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
htm`<li>${number}</li>`
);
return htm`
<ul>${listItems}</ul>
`;
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
htm`<${NumberList} numbers=${numbers} />`,
root
);
return root; // option + cmd + j to see the warning message is gone
}
{
const root = html`<div></div>`;
// debugger;
const exp = htm`<li key=${[0].toString()}>
${0}
</li>`;
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
jsx`<li key=${number.toString()}>
${number}
</li>`
);
return jsx`
<ul>${listItems}</ul>
`;
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
jsx`<${NumberList} numbers=${numbers} />`,
root
);
return root; // option + cmd + j to see the warning message
}
viewof option4 = DOM.select(none_doc);
viewof option5 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function ListItem(props) {
// Correct! There is no need to specify the key here:
return jsx`<li>${props.value}</li>`;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
jsx`<${ListItem} key=${number.toString()}
value=${number} />`
);
return jsx`
<ul>
${listItems}
</ul>
`;
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
jsx`<${NumberList} numbers=${numbers} />`,
root
);
return root;
}
viewof option6 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function Blog(props) {
const sidebar = jsx`
<ul>
${props.posts.map((post) =>
jsx`<li key=${post.id}>
${post.id + " " + post.title}
</li>`
)}
</ul>
`;
const content = props.posts.map((post) =>
jsx`<div key=${post.id}>
<h3>${post.title}</h3>
<p>${post.content}</p>
</div>
`);
return jsx`
<div>
${sidebar}
<hr />
${content}
</div>
`;
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
jsx`<${Blog} posts=${posts} />`,
root
);
return root;
}
viewof option7 = DOM.select(none_doc);
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;
// feature: make sure no replicate of id
if (list.filter(item => id === item.id).length > 0) {
return ;// don't add anything to the list
}
list.push({id: id, des: des, idx: idx});
mutable list = list;
}
list.filter(item => "utils" === item.id)
d3 = require("d3")
// import {html, svg} from "@observablehq/htl"
import { htm, none_doc, hide_display} from "@embracelife/tutorial-utilities"
import {React, ReactDOM, jsx } from "@j-f1/react"
jsx`<h1>jsx</h1>`
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.
