[Hyperapp] Render Text with JSX in Hyperapp

Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies.

In this lesson, we learn how to use JSX with Hyperapp. By installing a Babel plugin, we can instruct it to transpile JSX to Hyperapp's h method for a better developer experience.

 

install:

npm i -D babel-plugin-transform-react-jsx

 

.babelrc file:

{
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }]
  ],
  "presets": [
    "env"
  ]
}

 

import { h, app } from 'hyperapp'

const view = () => (
  <div>
    <h1>Hyperapp is sweet!</h1>
  </div>
)

const main = app({}, {}, view, document.body)