2c:null 2d:["$","title",null,{"children":"Hello, HTM & React | Tom MacWright | Observable"}] 32:[] 30:{"id":"be380b43aaaa4e54","slug":"hello-htm-react","title":"Hello, HTM & React","thumbnail":"ef3ab7b26ef01537bd0c1b4017c9a13f1fc18c2005f8516a7e2e0e2936b2a637","access_level":"public","create_time":"$D2018-11-23T20:27:23.633Z","update_time":"$D2019-04-10T20:34:53.068Z","view_time":null,"first_public_time":"$D2018-11-23T20:42:39.525Z","has_unpublished_edits":null,"fork":{"id":"ac677a0249b0f0ac","slug":"hello-htm","title":"Hello, HTM","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":14,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":106,"publish_version":106,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"Header = ({ name }) => htm`

${name} List

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Footer = props => htm`