2d:null 2e:["$","title",null,{"children":"React in Observables | Benjamin Atkin | Observable"}] 33:[] 31:{"id":"24a30600849c97b5","slug":"react-in-observables","title":"React in Observables","thumbnail":"4df05bb2240c58965ee677014c51c9a5baa03a1bcfd7b08d6f7acad3f31f694f","access_level":"public","create_time":"$D2018-08-12T22:06:09.165Z","update_time":"$D2018-08-12T22:06:09.165Z","view_time":null,"first_public_time":"$D2018-08-12T22:10:46.925Z","has_unpublished_edits":null,"fork":{"id":"ba458a5cf28a59c5","slug":"react-in-observables","title":"React in Observables","owner":{"id":"0762f0cb40decbe8","login":"renaudtertrais","name":"Renaud TERTRAIS"}},"stars":0,"starred":false,"owner":{"type":"team","id":"037d14fb7fd36dd8","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":"starter_2024"},"version":337,"publish_version":337,"role":null,"authored":false,"authors":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null}],"members":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"React in Observables","cells":[{"id":0,"value":"md`# React in Observables\n\nAn idea on how to use React here.
\nOverkill? For sure! but why not?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`## First let's create some variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"name = 'React'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"color = 'steelblue'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`\n
\n

\n
\n## Usage without jsx\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`
\n### Rendering\n(\\`e\\` is a shortcut to \\`React.createElement\\`)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"render(e(Greatings, { name, color }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`
\n### Simple Component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"Greatings = ({ name, color }) => e('h1', { style: { color }}, 'Hello ', name, '!')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`
\n### Statefull Component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"render(e(StateProvider, { state: { name, color }}, ({ name, color }, setState) => Fragment(\n\te('h1', {}, 'Advanced component in ', e('span', { style: { color }}, name), '!'),\n \te('label', {}, 'name: '),\n \te('input', { type: 'text', value: name, onChange: e => setState({ name: e.target.value})}),\n \te('br'),\n \te('label', {}, 'color: '),\n \te('input', { type: 'text', value: color, onChange: e => setState({ color: e.target.value})}),\n \te('br'),\n \te('br'),\n)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`\n
\n

\n
\n## Usage with jsx\n
\nPrettier but:\n- 😒 Need to manually pass the \"global vars\"\n- 😞 No syntax highlighting (like \"html\" or \"md\")\n- 😱 Uses \\`eval()\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`
\n### Rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"renderJSX('global', { GreatingJSX, color, name })`\n\t\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`
\n### Component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"GreatingJSX = jsx`({ color, name }) => (\n

\n Hello {name} with jsx!\n

\n)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`
\n### Statefull Component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"renderJSX('global', { StateProvider, state: {color, name }})`\n\n\t{({color, name }, setState) => (\n\t\t\n\t\t\t

Advanced component in {name}!

\n\t\t\tname: \n\t\t\t setState({ name: e.target.value})} />\n\t\t\t
\n\t\t\tcolor: \n\t\t\t setState({ color: e.target.value})} />\n\t\t\t
\n\t\t\t
\n\t\t\n\t)}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md`\n
\n

\n
\n## Helpers\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"class StateProvider extends react.Component {\n constructor(props) {\n super(props);\n\n this.state = props.state;\n this.setState = this.setState.bind(this);\n }\n\n componentWillReceiveProps(nextProps) {\n if(nextProps.state !== this.props.state) {\n this.setState(nextProps.state);\n }\n }\n\n render() {\n return this.props.children(this.state, this.setState);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"e = react.createElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"Fragment = (...children) => e(react.Fragment, {}, ...children)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"render = element => {\n const root = document.createElement('div');\n reactdom.render(element, root);\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"jsx = (str, varsName, vars) => {\n const { code } = Babel.transform(str, { presets: ['es2015', 'react'] });\n const React = react\n if (varsName)\n \twindow[varsName] = vars\n return eval(code)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"renderJSX = (varsName, vars) => str => render(jsx(str, varsName, vars))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`\n
\n

\n
\n## Libs\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"reactdom = require(\"https://bundle.run/react-dom\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"react = require(\"https://unpkg.com/react@16.2.0/umd/react.production.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"Babel = require('https://unpkg.com/@babel/standalone/babel.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"