{
const elem = html`<div></div>`;
class Car extends React.Component { // without constructor
render() {
return htm`<h2>I am a ${this.props.brand}!</h1>`;
}
}
const myelement = htm`<${Car} brand="Ford"/>`;
ReactDOM.render(myelement, elem);
return elem;
}
{
const root = html`<div id="root"></div>`;
class Car extends React.Component {
render() {
return htm`<h2>I am a ${this.props.brand}!</h2>`;
}
}
class Garage extends React.Component {
render() { // pass data from Garage to Car
return htm`
<div>
<h1>Who lives in my garage?</h1>
<${Car} brand="Ford" />
</div>
`;
}
}
ReactDOM.render(htm`<${Garage} />`, root);
return root;
}
{
const root = html`<div></div>`;
class Car extends React.Component {
render() {
return htm`<h2>I am a ${this.props.brand}!</h2>`;
}
}
class Garage extends React.Component {
render() {
const brandName = "Ford"; // must be defined inside render()
return htm`
<div>
<h1>Who lives in my garage?</h1>
<${Car} brand=${brandName} />
</div>
`;
}
}
ReactDOM.render(htm`<${Garage} />`, root);
return root;
}
{
const root = html`<div></div>`;
class Car extends React.Component {
render() {
// return htm`<h2>I am a ${this.props.brand.name}!</h2>`; // brandObj is assigned to this.props.brand
return htm`<h2>I am a ${this.props.brand}!</h2>`; // brandObj is assigned to this.props.brand
}
}
class Garage extends React.Component {
render() {
const brandObj = {name: "Ford"}; // must be defined inside render()
return htm`
<div>
<h1>Who lives in my garage?</h1>
<!-- <${Car} brand=${brandObj} // comment out /> -->
<${Car} brand=${brandObj.name} />
</div>
`;
}
}
ReactDOM.render(htm`<${Garage} />`, root);
return root;
}
{
const elem = html`<div></div>`;
class Car extends React.Component { // with constructor, passing props is a must
constructor(props) {
super(props);
}
render() {
return htm`<h2>I am a Car of ${this.props.model}!</h2>`;
}
}
ReactDOM.render(htm`<${Car} model="Mustang"/>`, elem);
return elem;
}
import {htm, React, ReactDOM, none_doc, hide_display} from "@embracelife/tutorial-utilities"
{
const elem = html`<div></div>`;
ReactDOM.render(htm`<${App} page="All" />`, elem);
return elem;
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { todos: [] };
}
addTodo() {
const { todos = [] } = this.state;
this.setState({ todos: todos.concat(`Item ${todos.length}`) });
}
render() {
const { todos } = this.state;
const { page } = this.props;
return htm`
<div class="app">
<${Header} name="ToDo's (${page})" />
<ul>
${todos.map(
todo => htm`
<li>${todo}</li>
`
)}
</ul>
<button onClick=${() => this.addTodo()}>Add Todo</button>
<${Footer}>footer content here<//>
</div>
`;
}
}
Header = ({ name }) => htm`<h1>${name} List</h1>`
md`Unlike the fork parent, I keep htm as html, so that I can still use the html builtin.`
// htm = import('https://unpkg.com/htm@2?module').then(r => r.default.bind(React.createElement))
// r = require.alias({
// react: "react@16/umd/react.development.js",
// "react-dom": "react-dom@16/umd/react-dom.development.js"
// })
// React = r("react")
// ReactDOM = r("react-dom")
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.
