LiveScript vs JavaScript

MyComponent.js

import react, {useState, createElement as h} from "react";

// With JSX

function MyComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1 className="heading" onClick={() => setCount(count + 1)}>
        Hello world!
      </h1>
      <p>Howdy</p>
      <div>
        <p>How do you do?</p>
      </div>
    </div>
  );
}

// Without JSX

function MyComponent() {
  const [count, setCount] = useState(0);
  return (
    h("div", {},
      h("h1", {className: "heading", onClick: () => setCount(count + 1)}, "Hello world!"),
      h("p", {}, "Howdy"),
      h("div", {},
        h("p", {}, "How do you do?")
      )
    )
  );
}


export default MyComponent

MyComponent.ls

require! {
  react: use-state
  'ls-react': { div, h1, p }
}

MyComponent = ->
  [count, set-count] = use-state(0)
  div {},
    h1 {
      class-name: 'heading'
      on-click: -> set-count count + 1} 'Hello world!'
    p {} 'Howdy'
    div {},
      p {} 'How do you do?'

module.exports.default = MyComponent