jorgebucaran / superfine

Absolutely minimal view layer for building web interfaces
https://git.io/super
MIT License
1.57k stars 78 forks source link

How to use with JSX? #114

Closed jorgebucaran closed 6 years ago

jorgebucaran commented 6 years ago

JSX is an optional language syntax extension that lets you write HTML tags interspersed with JavaScript. Because browsers don't understand JSX, you must use a compiler like Babel to transform it into ultradom.h function calls.

import { h, render } from "ultradom"

setInterval(
  () =>
    render(
      <div>
        <h1>Hello World!</h1>
        <h2>The time is: {new Date().toLocaleTimeString()}</h2>
      </div>,
      document.body
    ),
  1000
)

To use JSX install the JSX transform plugin and add a pragma option to your .babelrc file.

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