31:[] 2f:{"title":"React.js","cells":[{"id":0,"value":"md`# React.js\nExamples and info https://observablehq.com/@j-f1/react,\nhttps://observablehq.com/@asg017/react-in-observable-in-react-in-observable\n[Observable Notebook](https://observablehq.com/@asg017/a-react-component-for-rendering-observable-notebooks)\n\n[React Hooks](https://observablehq.com/@herrstucki/react-hooks-and-d3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"graphic = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { React, jsx } from '@mbostock/hello-jsx'","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"React.render(jsx`

I am using React!

`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md `Let's make a list`","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"function List(props) {\n const { items } = props;\n return jsx({ items })`

${item}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"React.render(jsx({ List, items: ['a', 'b', 'c'] })``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"myBox = (color = \"#ccc\") => ({\n margin: '.5rem',\n border: `2px solid ${color}`,\n borderRadius: '.5rem'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"hello = React.render(\n jsx({\n style: myBox('#ccc')\n })`

Hello!

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}