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

巴特西

[Hyperapp] Render Text with JSX in Hyperapp

最新文章

热门文章