3f:null 40:["$","title",null,{"children":"React in Observable with JSX | zq | Observable"}] 46:T68b,reactJSX`{ function Square(props) { return ( ); } class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), xIsNext: true, }; } handleClick(i) { const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); } renderSquare(i) { return ( this.handleClick(i)} /> ); } render() { const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); return (

{status}

{this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)}

{this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)}

{this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)}

); } } class Game extends React.Component { render() { return (

{/* status */}

{/* TODO */}

); } } ReactDOM.render( , target ); return target; }`47:[] 44:{"id":"6c28531aafa6cd3d","slug":"react-in-observable-with-jsx","title":"React in Observable with JSX","thumbnail":"282c519dc88050c23e61c8f171965cc3ed03da23bcb7e73665dd6f5e417295ea","access_level":"public","create_time":"$D2021-01-15T05:37:00.211Z","update_time":"$D2021-12-02T09:46:28.620Z","view_time":null,"first_public_time":"$D2021-01-25T00:39:12.745Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":834,"publish_version":834,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"React in Observable with JSX","cells":[{"id":0,"value":"md`# React in Observable with JSX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"md`## JSX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md `### example1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"reactJSX`{\n class Welcome extends React.Component {\n render(){\n return (

Hello World

)\n }\n }\n ReactDOM.render(,target)\n return target;\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"md`### example2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"{\n const app = html`

`;\n\n const RootCompoent = () =>React.createElement(\"div\", null,[\n React.createElement(\"label\", null,\"time\"),\n React.createElement(Timer, null)\n ]);\n\n ReactDOM.render(React.createElement(RootCompoent, null), app);\n return app\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"class Timer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n seconds: 0\n };\n }\n\n tick() {\n this.setState(state => ({\n seconds: state.seconds + 1\n }));\n }\n\n componentDidMount() {\n this.interval = setInterval(() => this.tick(), 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n return /*#__PURE__*/React.createElement(\"div\", null, \"Seconds: \", this.state.seconds);\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"md`## function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"md`\n### reactParse\n~~~js\nreactParse\\`(React,ReactDOM,target)=>{\n function Welcome(props) {\n return (\n

Hello

\n );\n }\n ReactDOM.render(,target)\n return target;\n}\\`\n~~~\n### reactJSX\n~~~js\nreactJSX\\`{\n function Welcome(props) {\n return (\n

Hello

\n );\n }\n ReactDOM.render(,target)\n return target;\n}\\`\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function reactParse(...args){\n let code = String.raw(...args)\n let target = html`

`;\n const jscode = jsx`const ___fn = ${code}`;\n const funBody = `${jscode} return ___fn(React, ReactDOM, target)`;\n return new Function(\"React\",\"ReactDOM\",\"target\",funBody)(\n React,\n ReactDOM,\n target\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"function reactJSX(...args){\n return reactParse`()=>${String.raw(...args)};`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"function jsx(...args){\n return Babel.transform(String.raw(...args), { presets: ['react'] }).code;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"md`## import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"React = require('react@17.0.1/umd/react.development.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"ReactDOM = require.alias({react:React})(\"react-dom@17.0.1/umd/react-dom.development.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"Babel = require('@babel/standalone@7.12.12/babel.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"