34:["$","title",null,{"children":"Observable for React.js developers | David Mora | Observable"}] 3c:T530,md`# Observable for React.js developers React rocks because it lets us represent a webpage as **a modular, composable tree made of pure functions**: immutable props as inputs, JSX as outputs, and nothing mutated in between. (And, yes, hooks let break out of FP and handle state, but in an explicit & careful way. Also, I refuse to even remember the React.Component days 😉) Even better, React handles all the details rendering and *re-rendering* our DOM tree for us. On a high level, React use this functional approach and it's resulting uni-directional data flow to do render in an optimized way: if props or state changes mid-tree, **it only re-render the affected downstream components.** This automatic, targetted re-rendinerg is so core to React we almost forget it exists. But without it, we'd have to manually specify when and how to update the DOM. 😱 As the great Dan Abramov wrote: > React is a programming runtime for stateful functions that represent a UI tree Building a webpage UI is great. But what would it look like to build a programming runtime for interactive dataviz? Well, you're kind of looking at it... (*Fun fact: Observable is actually built using React 😆 *) # Think of an Observable Notebook like a React App where each cell is a React Component... only with a few key differences: `3d:[] 38:{"id":"d3d7a33818a803b3","slug":"observable-notebooks-explained-for-react-js-developers","title":"Observable for React.js developers","thumbnail":"95a766dca5b8079a78702d8cd1487412b0b4bbacc1af2e6e33c0bd66b939eccc","access_level":"public","create_time":"$D2020-10-09T03:34:58.076Z","update_time":"$D2021-10-22T19:45:11.781Z","view_time":null,"first_public_time":"$D2020-10-09T05:17:57.687Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"ca5fdab65538f148","login":"davidnmora","name":"David Mora","avatar_url":"https://avatars-next.observableusercontent.com/05e764a7aea9b9b56f7aeb269af5ff1f9e1b461105f5f05fd7bd2e42e84bb04a","tier":"starter_2024","bio":"Passionate about viz & systems thinking. Stanford CS 2017","followed_by_you":false,"follows_you":false},"version":335,"publish_version":335,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd1e7381399c13b3","login":"davidnmora","name":"David Mora","avatar_url":"https://avatars-next.observableusercontent.com/05e764a7aea9b9b56f7aeb269af5ff1f9e1b461105f5f05fd7bd2e42e84bb04a","tier":null,"bio":"Passionate about viz & systems thinking. Stanford CS 2017","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cd1e7381399c13b3","login":"davidnmora","name":"David Mora","avatar_url":"https://avatars-next.observableusercontent.com/05e764a7aea9b9b56f7aeb269af5ff1f9e1b461105f5f05fd7bd2e42e84bb04a","tier":null,"role":"editor"}],"comments":[{"id":"e15ea0d9e36ec33a","reply_to_id":null,"content":"\"fitures\" should be \"figures\"","create_time":"$D2021-01-18T23:32:57.584Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"061d7bea4b9535b9","login":"anchpop","name":"Chad Nauseam","avatar_url":"https://avatars-next.observableusercontent.com/631db6913bbef8cd58406196aad9cc7c6a74a4c04e20bf62197f02aa24e1aada","tier":null}},{"id":"5127c1326d032872","reply_to_id":null,"content":"\"nodule\" should be \"module\"","create_time":"$D2021-05-18T17:56:55.736Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"f99a01d0e64049ad","login":"avanslaars","name":"Andy Van Slaars","avatar_url":"https://avatars-next.observableusercontent.com/9224b204f1d6aea55eb11c5a24932730e76297bc88683622683d6335c7daf87a","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"c78c34f8bfe559ab","slug":"learn-dataviz-fundamentals","title":"Learn dataviz fundamentals!","owner":{"id":"ca5fdab65538f148","login":"davidnmora","name":"David Mora"}},"type":"notebook","body":{"titling":"auto","title":"Observable for React.js developers","cells":[{"id":0,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`Psst, if you're totally new to Observable, I'd start with this gentle video: https://www.youtube.com/watch?v=M1xMRkb89oM. If you want to dig deeper into a specific Observable-ism, checkout: https://github.com/observablehq/stdlib`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md` ## 1. Observable not only renders the interdependent cells into a dynamic notebook, *but it also assembles the linear notebook into the dependency tree itself*. Meaning, if cell A depends on cell B, you can actually define cell B *after* cell A and Observable figures out it needs to run B first, then A. Next level!\n\nAnd, just like React, if a cell changes, Observable intelligently updates only the cells that depend on it, keeping the notebook in sync.\n\nThe dependency tree is \"smooshed\" on the top right margin of the notebook -->\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"a = `I show up first, depend on the value of \"b\" defined later: ${b}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"b = '\"Cell b\" here! Wow, observable knew to run me first. 🧠!'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`## 2. Cells, the building blocks of Observable, are way smarter than React's functional components: each is a \"function\" that can return a JS value, function, generator or even a promise(!) The \"function body\" (what you put in the cell) is JS Land. What gets \"returned\" or put on the left side of an \\`=\\`s is immutable Observable Land. Check it out:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"\"Implicitely, this naked string gets 'returned' from this cell and Observable displays it\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`If you want to re-use the output of a cell (which is pretty much always), save it to an Observable Land immutable variable:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"immuteyTheObservableVariable = \"Haha, I'm still in JS land\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"immuteyTheObservableVariable + ' 😊'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"new Promise(resolve =>\n setTimeout(\n () =>\n resolve(\n `${new Date()} -- Async code is native to Observable: it just waits patiently for it to resolve. Re-run this cell...`\n ),\n 1000\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`Just don't forget what Land you're in...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"const whoops = \"I forgot that left of = is Observable Land, no JS-style variable declarations allowed 😛\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`If you want to write a block of JS, wrap it in {}s and specify a \\`return\\` a value:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"outputReturned = {\n const x = 40;\n const y = 2;\n return x + y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`If you want to write a block of JS, wrap it in {}s and specify a ~~\\`return\\`~~ \\`yield\\` value:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"outputYielded = {\n const x = 40;\n const y = 2;\n yield x + y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`... \\`return\\` *and* \\`yield\\`?!? 😐 Yep, that's because Observable detects and handles [Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) as well as functions. And it's a greedy lil' gal: it calls \\`cell.next()\\` *every animation frame* until there are no yield statements left (and renders in new yeilds that appear later, say from a Promise). Try re-running this cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"{\n yield 1;\n yield 2;\n yield 3;\n yield \"Yowza, 1,2, and 3 were yielded so fast I didn't even see the numbers!\";\n\n const p = new Promise(resolve =>\n setTimeout(\n () =>\n resolve(\n 'If you yield a promise, Observable waits for it to fetch, then displays it 🐶 '\n ),\n 2000\n )\n );\n yield p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`... which may seem stupid, until you start to do animations: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"opacity = {\n let opacity = 0;\n while (true) {\n if (opacity > 1) {\n opacity = 0;\n }\n opacity += 0.01;\n yield opacity;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"html`

Weeeee, I love generatorsssss

You can use regular () style function calls

\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"html`... but the cool kids use template literals`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`## 3. Modern JS imports from other files or node modules. Observable does too ... but \"other files\" in Observable Land means you can pull from any public Observable Notebook, and using \"Nodules\" like \\`lodash\\` is as easy as`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"_.camelCase('I love lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`... or arguably the most common module import:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"{\n const color = d3\n .scaleLinear()\n .domain([0, 1])\n .range(['red', 'blue'])(opacity);\n\n yield html`

D3 scales numbers into colors, wowow

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`### Second, import from other Observable Notebook's (oh my!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"import { slider } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"html`

Weeeee ... can't let generators have all the fun. Slider time!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof sliderOutput = slider()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`\\`viewof\\` is a special operator you put in front of a variable if it's being set by an interactive user input ... cuz Observable makes interaction a first class citizen!\n\n#### Oh, and here's an import of a chart that visualizes notebook dependencies:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"import { chart } from '@observablehq/notebook-visualizer'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`# ... now get to playing with Observable a bit! ❤️ \n\n[Or, check out Anjana Vakil's excellent Youtube intros!](https://www.youtube.com/watch?v=M1xMRkb89oM&list=PLOHIJAFwtkEfEsafMd9BY3KWsRrz7FV5e)\n\nOr, here about [Observable vs JS described by Mikey Bostocky himself](https://observablehq.com/@observablehq/observables-not-javascript)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null