Published
Edited
Dec 14, 2019
viewof option2 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function Welcome(props) { // props as func inputs
return htm`<h1>Hello, ${props.name}</h1>`; // element as function output
}
const element = htm`<${Welcome} name="深度碎片" />`;
ReactDOM.render(element, root);
return root;
}
{
const root = html`<div></div>`;
class Welcome extends React.Component { // use class instead of function
render() {
return htm`<h1>Hello, ${this.props.name}</h1>`; // ${}
}
}
const element = htm`<${Welcome} name="深度碎片" />`; // ${}
ReactDOM.render(element, root);
return root;
}
viewof option3 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function Welcome(props) {
return htm`<h1>Hello, ${props.name}</h1>`;
}
const element = htm`<${Welcome} name="Daniel" />`; // make sure custom tag starts with Capital letter
ReactDOM.render(
element,
root
);
return root;
}
{
const root = html`<div> </div>`;
function Welcome(props) { // why function? => for passing props
return htm`<h1>Hello, ${props.name}</h1>`;
}
function App() { // no props here
return htm`
<div>
<${Welcome} name="Sara" />
<${Welcome} name="Cahal" />
<${Welcome} name="Edite" />
</div>
`;
}
const element = htm`<${App} />`; // assignment provides no props
ReactDOM.render(
element,
root
);
return root;
}
{
const root = html`<div></div>`;
function Comment(props) {
return htm`
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src=${props.author.avatarUrl}
alt=${props.author.name}
width=300
/>
<div className="UserInfo-name">
${props.author.name}
</div>
</div>
<div className="Comment-text">
${props.text}
</div>
<div className="Comment-date">
${props.date}
</div>
</div>
`;
}
const args = {
author: {
avatarUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576322534005&di=936c748c2c002016040e161504f92ec4&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Fcrop.0.48.1059.595.1000%2F6ed8a358gy1fe5r3oy6r0j20tf0jqtak.jpg",
name: "google"
},
text: "do no evil",
date: "2007"
}
const element = htm`<${Comment} author=${args.author} text=${args.text} date=${args.date} />`// must not forget /> // note the multiple props
ReactDOM.render(element, root);
return root;
}
{
const root = html`<div></div>`;
const args = {
author: {
avatarUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576322534005&di=936c748c2c002016040e161504f92ec4&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Fcrop.0.48.1059.595.1000%2F6ed8a358gy1fe5r3oy6r0j20tf0jqtak.jpg",
name: "google"
},
text: "do no evil",
date: "2007"
}
function CommentImg(props) {
return htm`
<img className="Avatar"
src=${props.author.avatarUrl}
alt=${props.author.name}
width=300
/>
`
}
function CommentUserInfo(props) {
return htm`
<div className="UserInfo-name">
${props.author.name}
</div>
`;
}
function CommentText(props) {
return htm`
<div className="Comment-text">
${props.text}
</div>
`;
}
function CommentDate(props) {
return htm`
<div className="Comment-date">
${props.date}
</div>
`;
}
function Comment(props) {
return htm`
<div className="Comment">
<div className="UserInfo">
<${CommentImg} author=${args.author} />
<${CommentUserInfo} author=${args.author} />
</div>
<${CommentText} text=${args.text} />
<${CommentDate} date=${args.date} />
</div>
`;
}
const element = htm`<${Comment} author=${args.author} text=${args.text} date=${args.date} />`// must not forget /> // note the multiple props
ReactDOM.render(element, 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.
