viewof option1 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function UserGreeting(props) {
return htm`<h1>Welcome back!</h1>`;
}
function GuestGreeting(props) {
return htm`<h1>Please sign up.</h1>`;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return htm`<${UserGreeting} />`;
}
return htm`<${GuestGreeting} />`;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
htm`<${Greeting} isLoggedIn=${true} />`,
root
);
return root;
}
{
const root = html`<div></div>`;
// from previous code examples ***********
function UserGreeting(props) {
return htm`<h1>Welcome back!</h1>`;
}
function GuestGreeting(props) {
return htm`<h1>Please sign up.</h1>`;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return htm`<${UserGreeting} />`;
}
return htm`<${GuestGreeting} />`;
}
// ************
function LoginButton(props) {
return htm`
<button onClick=${props.onClick}>
Login
</button>
`;
}
function LogoutButton(props) {
return htm`
<button onClick=${props.onClick}>
Logout
</button>
`;
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: true}; // try false or true
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = htm`<${LogoutButton} onClick=${this.handleLogoutClick} />`;
} else {
button = htm`<${LoginButton} onClick=${this.handleLoginClick} />`;
}
return htm`
<div>
<${Greeting} isLoggedIn=${isLoggedIn} />
${button}
</div>
`;
}
}
ReactDOM.render(
htm`<${LoginControl} />`,
root
);
return root;
}
viewof option3 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return htm`
<div>
<h1>Hello!</h1>
${unreadMessages.length > 0 &&
htm`<h2>
You have ${unreadMessages.length} unread messages.
</h2>`
}
</div>
`;
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
console.log(messages.length);
ReactDOM.render(
htm`<${Mailbox} unreadMessages=${messages} />`,
root
);
return root;
}
viewof option4 = DOM.select(none_doc);
{
const root = html`<div></div>`;
// from previous code examples ***********
function UserGreeting(props) {
return htm`<h1>Welcome back!</h1>`;
}
function GuestGreeting(props) {
return htm`<h1>Please sign up.</h1>`;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return htm`<${UserGreeting} />`;
}
return htm`<${GuestGreeting} />`;
}
// ************
function LoginButton(props) {
return htm`
<button onClick=${props.onClick}>
Login
</button>
`;
}
function LogoutButton(props) {
return htm`
<button onClick=${props.onClick}>
Logout
</button>
`;
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: true}; // try false or true
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
return htm`
<div>
The user is <b>${isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
`;
}
}
ReactDOM.render(
htm`<${LoginControl} />`,
root
);
return root;
}
{
const root = html`<div></div>`;
// from previous code examples ***********
function UserGreeting(props) {
return htm`<h1>Welcome back!</h1>`;
}
function GuestGreeting(props) {
return htm`<h1>Please sign up.</h1>`;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return htm`<${UserGreeting} />`;
}
return htm`<${GuestGreeting} />`;
}
// ************
function LoginButton(props) {
return htm`
<button onClick=${props.onClick}>
Login
</button>
`;
}
function LogoutButton(props) {
return htm`
<button onClick=${props.onClick}>
Logout
</button>
`;
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false}; // try false or true
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
// if (isLoggedIn) {
// button = htm`<${LogoutButton} onClick=${this.handleLogoutClick} />`;
// } else {
// button = htm`<${LoginButton} onClick=${this.handleLoginClick} />`;
// }
button = isLoggedIn ? htm`<${LogoutButton} onClick=${this.handleLogoutClick} />` :
htm`<${LoginButton} onClick=${this.handleLoginClick} />`;
return htm`
<div>
<${Greeting} isLoggedIn=${isLoggedIn} />
${button}
</div>
`;
}
}
ReactDOM.render(
htm`<${LoginControl} />`,
root
);
return root;
}
noRender = {
addList("noRender", "Preventing Component from Rendering", 6);
return md`
### Preventing Component from Rendering
https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering
`;
}
viewof option5 = DOM.select(none_doc);
{
const root = html`<div></div>`;
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return htm`
<div className="warning">
Warning!
</div>
`;
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning
}));
}
render() {
return htm`
<div>
<${WarningBanner} warn=${this.state.showWarning} />
<button onClick=${this.handleToggleClick}>
${this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
`;
}
}
const element = htm`<${Page} />`;
ReactDOM.render(
element,
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;
// 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 {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.
