2d:null 2e:["$","title",null,{"children":"Bake a pizza with JSX | fredericrous | Observable"}] 33:T655,html` `34:T5af,IngredientComponent = (({ ingredients, ok, ko }) => { const [count, setCount] = React.useState(new Set()); const [icon, setIcon] = React.useState(ko); const hideElement = id => (after, delay) => setTimeout(_ => { document.querySelector(id).style['visibility'] = 'hidden' after() }, delay * 1000) const animate = ({ elem, className, destination }) => { const x = distanceBetweenCircles(document.querySelector(destination), elem) document.documentElement.style.setProperty('--translate', x/2 + 'px') elem.classList.add(className) return hideElement('#' + elem.id) } const clickFunc = event => { const elem = event.target const className = 'moveToResult' if (elem.classList.contains(className)) return const afterAnimation = animate({ elem, className, destination: '#result'}) afterAnimation(() => count.size === ingredients.length && setIcon(ok), /* --animation-delay */ 1.8) setCount(new Set(count.add(event.target.innerText))) } return jsx({ingredients, count, clickFunc, icon})`

{ingredients.map(x =>

{x.value}

).reduce((acc, curr) => acc.concat(curr,

), []).slice(0,-1)}

{icon}

` })35:T77e,html` Follow @fredericrous`36:[] 31:{"id":"32e3f44c0b69e22d","slug":"bake-a-pizza-with-jsx","title":"Bake a pizza with JSX","thumbnail":"ce351e409e70bb3550a1165cac96f373fecc23df8e274fd7758223fe6f73ab11","access_level":"public","create_time":"$D2020-03-04T22:32:40.978Z","update_time":"$D2020-03-10T12:43:24.308Z","view_time":null,"first_public_time":"$D2020-03-06T16:42:32.313Z","has_unpublished_edits":null,"fork":{"id":"1450d4c04f15a93b","slug":"hello-jsx","title":"Hello, JSX","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"631be40688c47bfe","login":"fredericrous","name":"fredericrous","avatar_url":"https://avatars-next.observableusercontent.com/d0824bddc6a0c11c498f8f7a64e4cdd70e766ad16b980097975fc4f32a9a41c3","tier":"starter_2024"},"version":553,"publish_version":553,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3521d10409c706a","login":"fredericrous","name":"fredericrous","avatar_url":"https://avatars-next.observableusercontent.com/d0824bddc6a0c11c498f8f7a64e4cdd70e766ad16b980097975fc4f32a9a41c3","tier":null}],"members":[{"type":"individual","id":"c3521d10409c706a","login":"fredericrous","name":"fredericrous","avatar_url":"https://avatars-next.observableusercontent.com/d0824bddc6a0c11c498f8f7a64e4cdd70e766ad16b980097975fc4f32a9a41c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Bake a pizza with JSX","cells":[{"id":0,"value":"md`# Bake a pizza with JSX\n\nBasic React Component with hooks.\n\nWhen you click an element it get's added to the place where there's a question mark and disappears. If all elements are clicked, the question mark is replaced by a pizza`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"React.render(jsx({IngredientComponent, ingredients})`<>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`Click all 3 ingredients to bake a pizza!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"ingredients = [\n {'id': 'bowl', 'value': '🥣'},\n {'id': 'tomato', 'value': '🍅'},\n {'id': 'cheeze', 'value': '🧀'}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`The below stylesheet (click at the left of *style* tag to open) contains these interesting stuff:\n\n- css variables\n- uses keyframes for animation\n- animation speed is controled with cubic-bezier property\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`Interesting thins about this piece of code:\n\n- uses React Hooks with useState function\n - The *count* variable remembers if a button was clicked at least once\n - The *icon* contains the results of our recipe\n- Notice that whenever *setCount* is called, we create a new Set. *useState* doesn't rerender if the reference of the object stays the same.\n- set css variable from javascript\n- *animate* is a Higher Order Function. It returns a closure function that remembers the id of the element that was animated. Once executed this new function hides the element and execute a custom function after a delay`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"distanceBetweenCircles = (elem1, elem2) => {\n const e1Rect = elem1.getBoundingClientRect();\n const e2Rect = elem2.getBoundingClientRect();\n const dx = (e1Rect.left + e1Rect.right)/2 - (e2Rect.left + e2Rect.right)/2;\n const dy = (e1Rect.bottom - e1Rect.top)/2 - (e2Rect.bottom - e2Rect.top)/2;\n return Math.sqrt(dx*dx + dy*dy);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`Last word, I just liked [Mike Bostock](https://observablehq.com/@mbostock/hello-jsx) way of using JSX within ObservableHQ. It uses Babel so React template engine stay the same with *{}* and no *\\${}*\n\nHowever, the most popular implementation of React within ObservableHQ is [@j-f1/react](https://observablehq.com/@j-f1/react). It comes with *useSetter*. This method, in association with *viewof* keyword displays the value of a *useState*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function jsx(args = {}) {\n function transform(strings, ...values) {\n let s = strings[0];\n for (let i = 0, n = values.length; i < n; ++i) s += values[i] + strings[i + 1];\n const f = eval(Babel.transform(`(React,${Object.keys(args)})=>${s}`, {presets: [\"es2015\", \"react\"]}).code);\n return f(React, ...Object.values(args));\n }\n return Array.isArray(args) \n ? (args = {}, transform.apply(this, arguments)) \n : transform;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"React = {\n const r = require.alias({\n \"react\": \"react@16/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.production.min.js\"\n });\n const React = await r(\"react\");\n const ReactDOM = await r(\"react-dom\");\n React.render = root => {\n const div = html`

`;\n ReactDOM.render(root, div);\n return div;\n };\n return React;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"Babel = require(\"@babel/standalone@7.8.4/babel.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"