$3

!Logo
This is Pug/Jade like syntax library for React DOM written on LiveScript

$3

Wallet

1. BTC 19Uf4EjwXb2j2FvNvmgY3u7NtM7BYLmrR7
2. ETH 0x8d23C40C1703b99D0295b3277E4164cE3DAaF7b6
3. LTC LZFqabuJnk7VavgyTyKe8S9qqGVodbDkRe

$3

``Livescript
{ render } = require \react-dom
{ create, div, a, p } = require \lsx-pug

main = create do
render : ->
div do
a(href: \http://google.com
target: \blank) \hello
p \world

window.onload = ->
\app |> document.create-element |> document.body.append-child
render do
main ""
\app |> document.query-selector
`

---------

$3

Have Node.js installed.

`Bash
npm i lsx-pug
`

$3

1 Import plugin 'lsx-pug'.

`Livescript
{ create, div, a, p } = require \lsx-pug
`

2 Create class and bind. (example:Main)

`Livescript
main = create do
render : ->
div do
p \hello
a(href: \http://google.com ) \world
`

3 Custom Element. (example:Main)

`Livescript
{ create, div, a, p, button } = require \lsx-pug

CustomElement = (on-click: on-click)->
button(on-click: on-click)

main = create do
render : ->
div do
CustomElement
a(href: \http://google.com ) \world
`


4 Render.

`Livescript
{ render } = require \react-dom
render do
main ""
\app |> document.query-selector
`

---------
---------
---------

$3

Object Oriented Programming

`Livescript
{ create, Component, div, a, p } = require \lsx-pug

main = create class Main extends Component
render : ->
div do
a \hello
p \world
`

Component

`Livescript


div \hello

hello


`

Null Contents Component

`Livescript

div ""


`

Nested Component

`Livescript
div do
p ""
p \hello

hello