31:T655,html` `32: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}

` })33:T77e,html` Follow @fredericrous`34:[] 2f:{"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"},{"id":147,"value":"React.render(jsx({IngredientComponent, ingredients})`<>`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"md`Click all 3 ingredients to bake a pizza!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"ingredients = [\n {'id': 'bowl', 'value': '🥣'},\n {'id': 'tomato', 'value': '🍅'},\n {'id': 'cheeze', 'value': '🧀'}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":195,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":140,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":527,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":3,"value":"Babel = require(\"@babel/standalone@7.8.4/babel.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}