Published
Edited
Apr 10, 2019
Fork of Hello, HTM
1 fork
14 stars
Insert cell
Insert cell
{
const elem = html`<div></div>`;
ReactDOM.render(htm`<${App} page="All" />`, elem);
return elem;
}
Insert cell
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>
`;
}
}
Insert cell
Insert cell
Insert cell
md`Unlike the fork parent, I keep htm as html, so that I can still use the html builtin.`
Insert cell
htm = import('https://unpkg.com/htm@2?module').then(r => r.default.bind(React.createElement))
Insert cell
r = require.alias({
react: "react@16/umd/react.development.js",
"react-dom": "react-dom@16/umd/react-dom.development.js"
})
Insert cell
React = r("react")
Insert cell
ReactDOM = r("react-dom")
Insert cell

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.
Learn more