deku@1.md

   1 ---
   2 title: Deku v1
   3 category: JavaScript libraries
   4 layout: 2017/sheet
   5 intro: |
   6   Quick reference for [Deku](https://www.npmjs.com/package/deku), a minimal virtual DOM library. **Deprecated:** This is for Deku v1. See [deku](./deku) for a more updated cheatsheet.
   7 ---
   8
   9 ### Example
  10
  11 ```js
  12 /** @jsx element */
  13 import element from 'virtual-element' // replacement for React.createElement
  14 import { render, tree } from 'deku'
  15
  16 var app = <div class='my-app'>Hello World!</div>
  17
  18 render(tree(app), document.body)
  19 ```
  20
  21 ### Components
  22
  23 ```js
  24 Button = {
  25   render() {
  26     return <button>Submit</button>
  27   }
  28 }
  29
  30 App = {
  31   render() {
  32     return (
  33       <div>
  34         <Button />
  35       </div>
  36     )
  37   }
  38 }
  39
  40 render(tree(<App />), document.body)
  41 render(tree(element(App)), document.body)
  42 ```
  43
  44 ### Component props/state
  45
  46 ```js
  47 App = {
  48   render ({ props, state }) {
  49     return <div>{ /*...use state.store here*/ }</div>
  50   }
  51
  52   initialState (props) {
  53     return { store: store.getState() }
  54   },
  55
  56   afterMount (comp, el, setState) {
  57     store.subscribe(() => setState({ store: store.getState() }))
  58   }
  59 }
  60
  61 render(tree(<App />), document.body)
  62 ```
  63
  64 ### Events
  65
  66 ```js
  67 <a onClick={onClick}>{props.text}</a>
  68 ```
  69
  70 ### Magic virtual element
  71
  72 Use [magic-virtual-element](https://github.com/dekujs/magic-virtual-element) to enable nice classnames.
  73
  74 ```
  75 import element from 'magic-virtual-element'
  76 <div style={style} class={[ 'button', '-active' ]}>
  77 ```
  78
  79 ### Reference
  80
  81 ```
  82 name = 'MyComponent'
  83
  84 // Defaults
  85 initialState (props) {...} // return initial state
  86 defaultProps = { hi: 'hello' }
  87
  88 // Render
  89 render ({props, state}, setState) {...}
  90
  91 // Lifecycle
  92 beforeUpdate  ({props, state, id}, nextProps, nextState) {}
  93 afterRender   ({props, state, id}, el) {}
  94 afterUpdate   ({props, state, id}, prevProps, prevState, setState) {}
  95 afterMount    ({props, state, id}, el, setState) {}
  96 beforeUnmount ({props, state, id}, el) {}
  97 ```
  98
  99 See: <https://www.npmjs.com/package/deku>