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()
)