Quick reference for Deku, a minimal virtual DOM library.

### Components

    /** @jsx element */
    import { element } from 'deku'

    function render ({ props, children, context, path }) {
      // props    = properties object
      // children = children array
      // path     = path to current component (like 0.1.5.2)
      // context  = common properties in all components
      return (
        <div class='App' hidden={props.hidden} color={context.theme.color}>
          {children}
        </div>
      }
    }

    function onCreate ({ props, dispatch, path }) { ... }
    function onUpdate ({ props, dispatch, path }) { ... }
    function onRemove ({ props, dispatch, path }) { ... }
    // actually { children, props, path, context }

    export default { render, onCreate, onRemove }

### Rendering

    import { createStore } from 'redux'
    import { dom, element } from 'deku'

    // Create a Redux store to handle all UI actions and side-effects
    let store = createStore(reducer)

    // Create a renderer that can turn vnodes into real DOM elements
    let render = createRenderer(document.body, store.dispatch)

    // Update the page and add redux state to the context
    render(<MyButton>Hello World!</MyButton>, store.getState())

0 Comments for this cheatsheet. Write yours!