deku.md

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