30:[] 2e:{"title":"Hello, HTM & React","cells":[{"id":0,"value":"md`# Hello, HTM & React\n\nRef. \n\n_Note that [Jed Fox’s React notebook](https://observablehq.com/@j-f1/react) makes this all a lot easier, and sets you up to use the new React hooks architecture!_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"{\n const elem = html`

`;\n ReactDOM.render(htm`<${App} page=\"All\" />`, elem);\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"class App extends React.Component {\n constructor(props) {\n super(props);\n this.state = { todos: [] };\n }\n addTodo() {\n const { todos = [] } = this.state;\n this.setState({ todos: todos.concat(`Item ${todos.length}`) });\n }\n render() {\n const { todos } = this.state;\n const { page } = this.props;\n return htm`\n

\n <${Header} name=\"ToDo's (${page})\" />\n

${todo}

\n \n <${Footer}>footer content here\n

\n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"Header = ({ name }) => htm`

${name} List

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"Footer = props => htm`