Simple Functional Hypothetical React Example

simple-functional-hypothetical-react-example.js

import { Box } from 'respond'

export function Items(props) {
  return Box({
    style: { margin: 20, padding: 10 }, 
    children: [
      Item({ name: 'svelte' }),
      Item({ name: 'react' }),
      Item({ name: 'vue' }),
    ],
  })
}

function Item(props) {
  let color = 'blue'
  
  function toggleColor() {
    if (color === 'blue') {
      color = 'red'   // yea, the reactive "assignment" Evan You was apprehensive about in October
    }
    else {
      color = 'blue'  // re: https://twitter.com/Rich_Harris/status/1057290365395451905
    }
  }
  
  return Box({
    style: { padding: 5, background: color },
    onClick: toggleColor,
    children: [
      props.name,
    ],
  })
}

Lastly, don't underestimate the importance of this juncture for learners. It's getting over this juncture that's equivalent to the White Walkers breaking through The Wall. This is where everyone gives up. If they can get their fiddle on at this stage, they will be hooked and continue with the challenging, yet rewarding, craft of programming. That's the premise at least.

Reactivity is a great way to learn programming. Way better than rendering HTML on a server and spitting out it to the browser in days of old. The instant feedback it provides is paramount. So if it can become easy to do this, my hunch is it's more addicting (and confidence building) than just being able to turn angle bracketed tags into things on a page. In other words, change is the lynchpin, not drawing. The drawing can be minimal. Re-Activity is higher value.

But with traditional variable assignment, the magic of programming isn't immediately clear. It runs so fast, all you initially see is what you assigned it to, or what math you did in your first practice functions. Being able to easily see those values change (as represented on the page) via your own actions (clicks and taps) makes it far more real the work you have done in those assignments. In essence, variables aren't recognized as variable until they actually change. And variables and functions are the cornerstones of programming.

So being able to setup as quickly as possible a GUI to toggle a variable perhaps is the most important aim. That's the hook of the song.