Published
Edited
Dec 13, 2019
{
const root = html`<div></div>`;
const display = htm`<h1>Hello, world!</h1>`;
ReactDOM.render(display, root);
return root;
}
viewof option2 = DOM.select(none_doc);
{
const root = html`<div></div>`;
const name = "深度碎片";
const elementDisplay = htm`<h1>Hello, ${name}</h1>`;
ReactDOM.render(elementDisplay, root);
return root;
}
{
const root = html`<div></div>`;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Daniel',
lastName: '深度碎片'
};
const element = htm`
<h1>
Hello, ${formatName(user)}!
</h1>
`;
ReactDOM.render(
element,
root
);
return root;
}
{
const root = html`<div></div>`;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
function getGreeting(user) {
if (user) {
return htm`<h1>Hello, ${formatName(user)}!</h1>`;
}
return htm`<h1>Hello, Stranger.</h1>`;
}
const user = {
firstName: 'Daniel',
lastName: '深度碎片'
};
// const element = htm`
// <h1>
// Hello, ${formatName(user)}!
// </h1>
// `;
const element = getGreeting(user);
ReactDOM.render(
element,
root
);
return root;
}
viewof option5 = DOM.select(none_doc)
{
const root = html`<div></div>`;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
function getGreeting(user) {
if (user) {
return htm`
<h1 tabIndex="0">Hello, ${formatName(user)}!</h1>
<img src=${user.avatarUrl} width=200></img>
`; // add a focus on h1, and add src and width to an image
}
return htm`<h1>Hello, Stranger.</h1>`;
}
const user = {
firstName: 'Daniel',
lastName: '深度碎片',
avatarUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576175657854&di=afd4fa75732860dcb8edec256957c4da&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201605%2F19%2F20160519221924_RuxQZ.thumb.700_0.jpeg'
};
const element = getGreeting(user);
ReactDOM.render(
element,
root
);
return root;
}
viewof option6 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
function getGreeting(user) {
if (user) {
return htm`
<div>
<h1 tabIndex="0">Hello, ${formatName(user)}!</h1>
<img src=${user.avatarUrl} width=200 />
</div>
`; // add a focus on h1, and add src and width to an image
}
return htm`<h1>Hello, Stranger.</h1>`;
}
const user = {
firstName: 'Daniel',
lastName: '深度碎片',
avatarUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576175657854&di=afd4fa75732860dcb8edec256957c4da&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201605%2F19%2F20160519221924_RuxQZ.thumb.700_0.jpeg'
};
const element = getGreeting(user);
ReactDOM.render(
element,
root
);
return root;
}
viewof option7 = DOM.select(none_doc);
viewof option8 = DOM.select(none_doc)
{
const root = html`<div></div>`;
const element1 = htm`
<h1 className="greeting">
Hello, world!
</h1>
`;
const element2 = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
const display = htm`
<div>
${element1}
${element2}
</div>
`
ReactDOM.render(display, root);
return root
}
import { React, ReactDOM, htm, none_doc, hide_display } from "@embracelife/tutorial-utilities"
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.
