31:[] 2f:{"title":"React in Observable In React In Observable","cells":[{"id":0,"value":"md`# React in Observable In React In Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`Using React in Observable may be a little messy - but it's totally doable! Here's a simple example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { React, jsx } from '@mbostock/hello-jsx'","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"React.render(jsx`

Hello!

`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`You can build components with this, too:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"function List(props) {\n const { items } = props;\n return jsx({ items })`

${item}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"React.render(jsx({ List, items: ['a', 'b', 'c'] })``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`Pretty cool!\n\nBut let's take it a step further - [this]() package has a component that can render Observable notebooks - let's see how it works:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"Notebook = (await require('@alex.garcia/observable-notebook-react@0.0.6/build/index.umd.js'))(\n React\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"React.render(\n jsx({\n Notebook,\n define: (await import(\n 'https://api.observablehq.com/@tmcw/hello-world.js?v=3'\n )).default\n })``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`Very cool! To quickly recape, the above is **an Observable notebook, rendered into a React component, in an Observable notebook.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`(More usage of the \\`\\` React component can be found [here](https://observablehq.com/d/61e441cdadb88e92)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`Now let's take it a step further - This notebook that you are reading right now is an Observable notebook. Can we use *this* notebook in the \\`\\` component??\n\n... yes!\n\n\nLet's define a cell in this notebook that renders a React component that just plainly says \"Hello\":`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"boxStyle = (color = \"#ccc\") => ({\n margin: '.5rem',\n border: `1px solid ${color}`,\n borderRadius: '.5rem'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"hello = React.render(\n jsx({\n style: boxStyle('#ccc')\n })`

Hello!

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`Now, let's import the \\`define\\` function for this notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"thisNotebookDefine = {\n await visibility(); // wait until reader scrolls down here to load (for faster TTI)\n return (await import(`https://api.observablehq.com/d/4df45c62fdc40249.js?v=3`))\n .default;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"hello2 = React.render(\n jsx({\n Notebook,\n define: thisNotebookDefine,\n targets: [\"hello\"],\n style: boxStyle('red')\n })`

\n \n

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`This above cell is a cell in an Observable notebook, that renders a React component that renders an Observable notebook that renders a React component that renders an Observable notebook that says \"Hello\". \n\n...\n\nLet's go deeper`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"hello3 = React.render(\n jsx({\n Notebook,\n define: thisNotebookDefine,\n targets: [\"hello2\"],\n style: boxStyle('red')\n })`

\n \n

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"hello4 = React.render(\n jsx({\n Notebook,\n define: thisNotebookDefine,\n targets: [\"hello3\"],\n style: boxStyle('red')\n })`

\n \n

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"hello5 = React.render(\n jsx({\n Notebook,\n define: thisNotebookDefine,\n targets: [\"hello4\"],\n style: boxStyle('red')\n })`

\n \n

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`${hlX.hello`hello`} is a cell that renders a React component. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`${hlX.hello2`hello2`} is a cell that renders a React component that ${hlX.hello`renders an Observable notebook that renders a React component`}. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`${hlX.hello3`hello3`} is a cell that renders a React component that ${hlX.hello2`renders an observable notebook that renders a React component that ${hlX.hello`renders an Observable notebook that renders a React \ncomponent`}`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`${hlX.hello4`hello4`} is a cell that renders a React component that ${hlX.hello3`renders an Observable notebook that renders a React component that ${hlX.hello2`renders an Observable notebook that renders a React component that ${hlX.hello`renders an Observable notebook that renders a React component`}`}`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"md`${hlX.hello5`hello5`} is a cell that renders a React component that ${hlX.hello4`renders an Observable notebook that renders a React component that ${hlX.hello3`renders an Observable notebook that renders a React component that ${hlX.hello2`renders an Observable notebook that renders a React component that ${hlX.hello`renders an Observable notebook that renders a React component`}`}`}.`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`Fun!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"hl = color =>\n function(args) {\n function transform(strings, ...values) {\n const d = html`

`;\n let s = strings[0];\n d.appendChild(document.createTextNode(strings[0]));\n for (let i = 0, n = values.length; i < n; ++i) {\n s += values[i] + strings[i + 1];\n typeof values[i] === 'string'\n ? d.appendChild(document.createTextNode(strings[i + 1]))\n : d.appendChild(values[i]);\n d.appendChild(document.createTextNode(strings[i + 1]));\n }\n return html`

${d}`;\n }\n return Array.isArray(args)\n ? ((args = {}), transform.apply(this, arguments))\n : transform;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"hlX = ({\n hello: hl('#1b9e77'),\n hello2: hl('#d95f02'),\n hello3: hl('#7570b3'),\n hello4: hl('#e7298a'),\n hello5: hl('#66a61e')\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}