2d:null 2e:["$","title",null,{"children":"React in Observables | Renaud TERTRAIS | Observable"}] 33:[] 31:{"id":"ba458a5cf28a59c5","slug":"react-in-observables","title":"React in Observables","thumbnail":"89c40c32b75e981c0c365162b4b9d5516af632098b1c5b63aec3f84a6cdc078a","access_level":"public","create_time":"$D2018-03-06T11:08:50.488Z","update_time":"$D2018-06-20T19:26:42.652Z","view_time":null,"first_public_time":"$D2018-03-07T07:24:05.267Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"0762f0cb40decbe8","login":"renaudtertrais","name":"Renaud TERTRAIS","avatar_url":"https://avatars-next.observableusercontent.com/3146b1c6f35ca7fc85a108959c56c23d346901768e9f506778f2bae6655d95e1","tier":"starter_2024"},"version":336,"publish_version":336,"role":null,"authored":false,"authors":[{"type":"individual","id":"905868098df04a01","login":"renaudtertrais","name":"Renaud TERTRAIS","avatar_url":"https://avatars-next.observableusercontent.com/3146b1c6f35ca7fc85a108959c56c23d346901768e9f506778f2bae6655d95e1","tier":null}],"members":[{"type":"individual","id":"905868098df04a01","login":"renaudtertrais","name":"Renaud TERTRAIS","avatar_url":"https://avatars-next.observableusercontent.com/3146b1c6f35ca7fc85a108959c56c23d346901768e9f506778f2bae6655d95e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"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://wzrd.in/standalone/react-dom@latest\")","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"