[jbucaran]

It's called JSX. I used it in the example because it's popular among the JavaScript crowd, popularized by React.

That code is not directly consumed by the browser, instead, it's compiled into the code below by a compiler like Babel, minified and bundled into a tiny blob of code we ship to the browser.

    app({
      state: {
        count: 0
      },
      view: (state, actions) =>
        h("main", {}, [
          h("h1", {}, [state.count]),
          h("button", { onclick: actions.down }, "-"),
          h("button", { onclick: actions.up }, "+"),
        ]),
      actions: {
        down: state => ({ count: state.count - 1 }),
        up: state => ({ count: state.count + 1 })
      }
    })

So, I used JSX for "familiarity", but you don't need to use it to build your own apps. You can just write the code shown in the snippet above and you'd do just as well. You can also minimize and bundle your code to tap into the JavaScript ecosystem, code using a modular style and still not have to use JSX at all.

Hope that helps :)

[majewsky]

Indeed. Thanks very much.

Coincidentally, the h() function up there looks very similar to what we used to render HTML in a 15-year-old Perl application that I maintained at work.