2c:null 2d:["$","title",null,{"children":"Golden Number Calculator in React | Scott Vorthmann | Observable"}] 32:T553,md` This is a port of an experiment I originally built [in CodePen][pen], when I was first learning [React][react]. It is simple enough to serve as starting point for learning to use React in Observable, without being so trivial that patterns are hard to see. [Jed Fox's notebook][fox] is awesome, and defines all the infrastructure I'm using here, but when I first saw it, I'll admit I was lost. It turns out that I was missing some important facts: 1. What appear to be JSX tagged template literals are not actually using JSX syntax; [htm][htm] syntax is slightly different, or more precisely, tagged template literals force certain syntax changes relative to JSX. 1. Jed's example uses the new [hooks][hooks] mechanism in React. (Now that I understand it, I'm using hooks for the one stateful component here, GoldenCalculator.) 1. Jed's example illustrates how to pass data between the notebook cells and the React component. My components are self-contained, and thus simpler. Hopefully, this notebook will help you get up to speed faster than I did. It may help to compare the components here with those in [my CodePen version][pen]. [hooks]: https://reactjs.org/docs/hooks-intro.html [fox]: https://observablehq.com/@j-f1/react [htm]: https://github.com/developit/htm [pen]: https://codepen.io/scottvorthmann/pen/xrVaPw [react]: https://reactjs.org/ `33:T930,GoldenCalculator = component(({}) => { const [ stack, setStack ] = useState( { x:[0,1], y:[0,0], z:[0,0], t:[0,0] } ) const [ enableStackLift, setEnableStackLift ] = useState( false ) const [ enteringDigits, setEnteringDigits ] = useState( false ) function setX( value ) { setStack( { x:value, y:stack.y, z:stack.z, t:stack.t } ) setEnableStackLift( true ) setEnteringDigits( false ) } function setXdropY( value ) { setStack( { x:value, y:stack.z, z:stack.t, t:stack.t } ) setEnableStackLift( true ) setEnteringDigits( false ) } function handleClearX() { setX( [0,0] ) setEnableStackLift( false ) setEnteringDigits( false ) } function handleEnter() { setStack( { x:stack.x, y:stack.x, z:stack.y, t:stack.z } ) setEnableStackLift( false ) setEnteringDigits( false ) } function handlePlus() { let ones = stack .y[ 1 ] + stack .x[ 1 ]; let phis = stack .y[ 0 ] + stack .x[ 0 ]; setXdropY( [ phis, ones ] ) } function handleMinus() { let ones = stack .y[ 1 ] - stack .x[ 1 ]; let phis = stack .y[ 0 ] - stack .x[ 0 ]; setXdropY( [ phis, ones ] ) } function handleTimes() { let a = stack .x[ 0 ]; let b = stack .x[ 1 ]; let c = stack .y[ 0 ]; let d = stack .y[ 1 ]; setXdropY( [ a*c + a*d + b*c, a*c + b*d ] ) } function handleDivPhi() { let ones = stack .x[ 1 ]; let phis = stack .x[ 0 ]; setX( [ ones, phis-ones ] ) } function handleTimesPhi() { let ones = stack .x[ 1 ]; let phis = stack .x[ 0 ]; setX( [ ones+phis, phis ] ) } function handleDigit(d) { let ones = stack .x[ 1 ]; if ( ! enteringDigits ) { ones = 0; } let x = [ 0, ones*10+d ]; if ( enableStackLift ) { setStack( { x:x, y:stack.x, z:stack.y, t:stack.z } ) } else { setStack( { x:x, y:stack.y, z:stack.z, t:stack.t } ) } setEnableStackLift( false ) setEnteringDigits( true ) } return jsx`

<${StackDisplay} stack=${stack}/> <${KeyPad} onClearX=${handleClearX} onEnter=${handleEnter} onPlus=${handlePlus} onMinus=${handleMinus} onTimes=${handleTimes} onDigit=${handleDigit} onDivPhi=${handleDivPhi} onTimesPhi=${handleTimesPhi} />

` })34:T563,html``35:[] 30:{"id":"850bd48d907e69db","slug":"react-golden-calculator","title":"Golden Number Calculator in React","thumbnail":"944266d6c46ee1bc385da1df62bbf57cc021cea2a0a1bbf7f3e59296a8139883","access_level":"public","create_time":"$D2019-07-24T01:11:01.551Z","update_time":"$D2019-07-30T04:38:21.888Z","view_time":null,"first_public_time":"$D2019-07-24T06:10:07.290Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":"starter_2024"},"version":222,"publish_version":222,"role":null,"authored":false,"authors":[{"type":"individual","id":"c80882137d4e42a5","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":null}],"members":[{"type":"individual","id":"c80882137d4e42a5","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"7dcfe21fc64f1cc6","slug":"techniques","title":"Techniques","owner":{"id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann"}},"type":"notebook","body":{"titling":"auto","title":"Golden Number Calculator in React","cells":[{"id":43,"value":"md`# Golden Number Calculator in React`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"render( () => jsx`<${GoldenCalculator}/>` )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`\n## What Kind of Calculator is This?\n\nFirst, this is an [RPN][rpn] calculator, modeled roughly after my old [HP29C][hp29c].\nIt has a four-element stack, displayed such that the \"top\" of the stack\nis the bottom row. Once a value gets pushed to the top row (the bottom stack element),\nit will get duplicated as the stack collapses during arithmetic operations.\n\nUnlike any HP calculators, this one operates on *Golden numbers*,\nwhich have the form ${tex`(a\\phi+b)`}, where ${tex`a`} and ${tex`b`} are both integers,\nand ${tex`\\phi\\approx 1.61803`} is the [Golden ratio][golden].\nThese numbers form an algebraic structure called a [ring][ring], so we can multiply by\nany number, but only divide by ${tex`\\phi`} and its powers.\n\n[ring]: https://en.wikipedia.org/wiki/Ring_(mathematics)\n[golden]: https://en.wikipedia.org/wiki/Golden_ratio\n[rpn]: https://en.wikipedia.org/wiki/Reverse_Polish_notation\n[hp29c]: https://en.wikipedia.org/wiki/HP-19C/-29C\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## React Function Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md `The **GoldenCalculator** component is the only one holding state, and uses the new\n*hooks* mechanism in React. The other components will be easier to understand first.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"KeyPad = component(( props ) => jsx`\n

\n <${FieldKeys}\n onDivPhi=${props.onDivPhi}\n onTimesPhi=${props.onTimesPhi}/>\n <${NumberKeys}\n onClearX=${props.onClearX}\n onEnter=${props.onEnter}\n onDigit=${props.onDigit}/>\n <${OperatorKeys}\n onPlus=${props.onPlus}\n onTimes=${props.onTimes}\n onMinus=${props.onMinus}/>\n

\n `\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"OperatorKeys = component( (props) => jsx`\n

\n <${Key} label=\"+\" onClick=${()=>props.onPlus()}/>\n <${Key} label=\"\\u2212\" onClick=${()=>props.onMinus()}/>\n <${Key} label=\"\\u00d7\" onClick=${()=>props.onTimes()}/>\n

\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"NumberKeys = component( (props) => jsx`\n

\n <${Key} label=\"7\" onClick=${()=>props.onDigit(7)}/>\n <${Key} label=\"8\" onClick=${()=>props.onDigit(8)}/>\n <${Key} label=\"9\" onClick=${()=>props.onDigit(9)}/>\n <${Key} label=\"4\" onClick=${()=>props.onDigit(4)}/>\n <${Key} label=\"5\" onClick=${()=>props.onDigit(5)}/>\n <${Key} label=\"6\" onClick=${()=>props.onDigit(6)}/>\n <${Key} label=\"1\" onClick=${()=>props.onDigit(1)}/>\n <${Key} label=\"2\" onClick=${()=>props.onDigit(2)}/>\n <${Key} label=\"3\" onClick=${()=>props.onDigit(3)}/>\n <${Key} label=\"0\" onClick=${()=>props.onDigit(0)}/>\n <${Key} label=\"enter\" special=\"true\"\n onClick=${()=>props.onEnter()}/>\n <${Key} label=\"clear\" special=\"true\"\n onClick=${()=>props.onClearX()}/>\n

\n`)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"FieldKeys = component( (props) => {\n return jsx`\n

\n <${Key} label=\"\\u00f7\\u03d5\" onClick=${()=>props.onDivPhi()}/>\n <${Key} label=\"\\u00d7\\u03d5\" onClick=${()=>props.onTimesPhi()}/>\n

\n `}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"Key = component( (props) => {\n \n function onClick( e ) {\n e.preventDefault();\n props.onClick();\n }\n \n return jsx`\n \n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"StackDisplay = component(({ stack }) => \n jsx`\n

\n coefficients\n expression\n value\n \n <${StackEntryDisplay} number=${stack.t}/>\n <${StackEntryDisplay} number=${stack.z}/>\n <${StackEntryDisplay} number=${stack.y}/>\n <${StackEntryDisplay} number=${stack.x}/>\n \n `)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"StackEntryDisplay = component(({ number }) => {\n let phis=number[0];\n let ones=number[1];\n return jsx`\n

\n <${CoefficientsDisplay} phis=${phis} ones=${ones}/>\n <${ExpressionDisplay} phis=${phis} ones=${ones}/>\n <${ValueDisplay} phis=${phis} ones=${ones}/>\n \n `\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"\nValueDisplay = component(({ phis, ones }) => {\n const phi = ( 1 + Math.sqrt( 5 ) ) / 2;\n let result = phis * phi + ones;\n return jsx`\n

\n ${ result.toFixed( 5 ) } \n \n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"ExpressionDisplay = component(({ phis, ones }) => {\n \n function toString( phis, ones ) {\n let expr = '';\n let empty = true;\n if ( phis != 0 ) {\n expr += ( phis > 0 )? '' : '\\u2212';\n phis = Math.abs(phis);\n let coeff = ( phis == 1 )? '' : phis;\n expr += coeff + '\\u03C6';\n empty = false;\n }\n if ( ones != 0 ) {\n if ( ones < 0 ) {\n expr += '\\u2212';\n } else if ( !empty ) {\n expr += '+';\n }\n expr += Math.abs(ones);\n } else if ( empty ) {\n expr = '0';\n }\n return expr;\n }\n \n return jsx`\n

\n ${ toString( phis, ones ) }\n \n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"CoefficientsDisplay = component(({ phis, ones }) => jsx`\n

${phis}\n

${ones}\n \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {jsx, component, Fragment, render, useState} from '@j-f1/react'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"