Deku v1 cheatsheet

Example

/** @jsx element */
import element from 'virtual-element' // replacement for React.createElement
import { render, tree } from 'deku'

var app = <div class='my-app'>Hello World!</div>

render(tree(app), document.body)

Components

Button = {
  render() {
    return <button>Submit</button>
  }
}

App = {
  render() {
    return (
      <div>
        <Button />
      </div>
    )
  }
}

render(tree(<App />), document.body)
render(tree(element(App)), document.body)

Component props/state

App = {
  render ({ props, state }) {
    return <div>{ /*...use state.store here*/ }</div>
  }

  initialState (props) {
    return { store: store.getState() }
  },

  afterMount (comp, el, setState) {
    store.subscribe(() => setState({ store: store.getState() }))
  }
}

render(tree(<App />), document.body)

Events

<a onClick={onClick}>{props.text}</a>

Magic virtual element

Use magic-virtual-element to enable nice classnames.

import element from 'magic-virtual-element'
<div style={style} class={[ 'button', '-active' ]}>

Reference

name = 'MyComponent'

// Defaults
initialState (props) {...} // return initial state
defaultProps = { hi: 'hello' }

// Render
render ({props, state}, setState) {...}

// Lifecycle
beforeUpdate  ({props, state, id}, nextProps, nextState) {}
afterRender   ({props, state, id}, el) {}
afterUpdate   ({props, state, id}, prevProps, prevState, setState) {}
afterMount    ({props, state, id}, el, setState) {}
beforeUnmount ({props, state, id}, el) {}

See: https://www.npmjs.com/package/deku