[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)