deku.md

   1 ---
   2 title: Deku v2
   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.
   7 ---
   8
   9 ### Components
  10
  11 ```js
  12 /** @jsx element */
  13 import { element } from 'deku'
  14
  15 function render ({ props, children, context, path }) {
  16   // props    = properties object
  17   // children = children array
  18   // path     = path to current component (like 0.1.5.2)
  19   // context  = common properties in all components
  20   return (
  21     <div class='App' hidden={props.hidden} color={context.theme.color}>
  22       {children}
  23     </div>
  24   }
  25 }
  26
  27 function onCreate ({ props, dispatch, path }) { ... }
  28 function onUpdate ({ props, dispatch, path }) { ... }
  29 function onRemove ({ props, dispatch, path }) { ... }
  30 // actually { children, props, path, context }
  31
  32 export default { render, onCreate, onRemove }
  33 ```
  34
  35 ### Rendering
  36
  37 ```js
  38 import { createStore } from 'redux'
  39 import { dom, element } from 'deku'
  40
  41 // Create a Redux store to handle all UI actions and side-effects
  42 let store = createStore(reducer)
  43
  44 // Create a renderer that can turn vnodes into real DOM elements
  45 let render = createRenderer(document.body, store.dispatch)
  46
  47 // Update the page and add redux state to the context
  48 render(<MyButton>Hello World!</MyButton>, store.getState())
  49 ```