deku@1.md

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