2c:null 2d:["$","title",null,{"children":"Demo of using React with Hooks in Observable | Albert Nazander | Observable"}] 32:[] 30:{"id":"d425a2f829b1dcfe","slug":"demo-of-using-react-with-hooks-in-observable","title":"Demo of using React with Hooks in Observable","thumbnail":"b2467d867560a3d55a2e655e96092b23fcf17485f51a504a474102668f03f753","access_level":"public","create_time":"$D2019-06-21T07:46:59.130Z","update_time":"$D2019-06-21T09:08:30.193Z","view_time":null,"first_public_time":"$D2019-06-21T09:10:11.728Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5373c6363e9da6de","login":"alizbazar","name":"Albert Nazander","avatar_url":"https://avatars-next.observableusercontent.com/6ff3812f437a7a71e56b7577568fd447028d7a27b5cdd0f17313595c3c9a91ff","tier":"starter_2024"},"version":116,"publish_version":116,"role":null,"authored":false,"authors":[{"type":"individual","id":"2454674ee27d71f3","login":"alizbazar","name":"Albert Nazander","avatar_url":"https://avatars-next.observableusercontent.com/6ff3812f437a7a71e56b7577568fd447028d7a27b5cdd0f17313595c3c9a91ff","tier":null}],"members":[{"type":"individual","id":"2454674ee27d71f3","login":"alizbazar","name":"Albert Nazander","avatar_url":"https://avatars-next.observableusercontent.com/6ff3812f437a7a71e56b7577568fd447028d7a27b5cdd0f17313595c3c9a91ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Demo of using React with Hooks in Observable","cells":[{"id":0,"value":"md`# Demo of using React with Hooks in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"md`Outputting React component:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"viewof result = render(() => jsx`\n <${ExampleCounter} number=${exampleCount} />\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`Displaying React view and managing internal state:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"viewof test1 = render(({useSetter}) => {\n const [value, setValue] = useState(0)\n useSetter(value)\n return jsx`\n \n `\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"test1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"viewof test2 = render(({useSetter}) => {\n const [value, setValue] = useState('hello')\n useSetter(value)\n return jsx`\n \n `\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"test2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`## Definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"ExampleCounter = component(({ number }) => jsx`\n

\n ${number} second${number === 1 ? ' has' : 's have'} elapsed
\n

\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"exampleCount = {\n let i = 0\n yield 0\n while (true) {\n yield Promises.delay(1000, ++i)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"import {jsx, render, component, memo, forwardRef, useState, htm} from \"@j-f1/react\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"