Deku est une bibliothèque de DOM virtuel fonctionnelle et élégante permettant de concevoir des interfaces utilisateur avec de simples fonctions JavaScript.
Composants fonctionnels et hooks de cycle de vie
/** @jsx element */
import { element } from 'deku';
function render({ props, children, context, path }) {
return (
<div class="card" hidden={props.hidden} style={{ color: context.theme.color }}>
<h2>{props.title}</h2>
{children}
</div>
);
}
function onCreate({ props, dispatch, path }) {
// Triggered on component mount
}
function onUpdate({ props, nextProps, dispatch }) {
// Triggered when props change
}
function onRemove({ props, dispatch }) {
// Triggered on component unmount
}
export default { render, onCreate, onUpdate, onRemove };
Rendu et intégration avec le store Redux
import { createStore } from 'redux';
import { dom, element } from 'deku';
import App from './app';
const store = createStore(reducer);
// Bind renderer to DOM mounting container
const render = dom.createRenderer(document.getElementById('root'), store.dispatch);
// Subscribe to store updates
function update() {
render(<App state={store.getState()} />, { theme: { color: '#333' } });
}
store.subscribe(update);
update();