This is for Deku v1. See deku for a more updated cheatsheet.
/** @jsx element */
import element from 'virtual-element' // replacement for React.createElement
import {render, tree} from 'deku'
var app = <div class='my-app'>Hello World!</div>
render(tree(app), document.body)
Components
Button = {
render () { return <button>Submit</button> }
}
App = {
render () { return <div><Button /></div> }
}
render(tree(<App />), document.body)
render(tree(element(App)), document.body)
Component props/state
App = {
render ({ props, state }) {
return <div>{ /*...use state.store here*/ }</div>
}
initialState (props) {
return { store: store.getState() }
},
afterMount (comp, el, setState) {
store.subscribe(() => setState({ store: store.getState() }))
}
}
render(tree(<App />), document.body)
Events
<a onClick={onClick}>{props.text}</a>
Magic virtual element
Use magic-virtual-element to enable nice classnames.
import element from 'magic-virtual-element'
<div style={style} class={[ 'button', '-active' ]}>
Reference
name = 'MyComponent'
// Defaults
initialState (props) {...} // return initial state
defaultProps = { hi: 'hello' }
// Render
render ({props, state}, setState) {...}
// Lifecycle
beforeUpdate ({props, state, id}, nextProps, nextState) {}
afterRender ({props, state, id}, el) {}
afterUpdate ({props, state, id}, prevProps, prevState, setState) {}
afterMount ({props, state, id}, el, setState) {}
beforeUnmount ({props, state, id}, el) {}