Skip to content

Instantly share code, notes, and snippets.

@sean-clayton
Last active June 29, 2019 04:06
Show Gist options
  • Save sean-clayton/aaadf804062db047648d17bde75e182d to your computer and use it in GitHub Desktop.
Save sean-clayton/aaadf804062db047648d17bde75e182d to your computer and use it in GitHub Desktop.
LiveScript vs JavaScript
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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment