0

Deku v1 cheatsheet

 2 years ago
source link: https://devhints.io/deku@1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Quick reference for Deku, a minimal virtual DOM library. Deprecated: This is for Deku v1. See deku for a more updated cheatsheet.

Example

/** @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) {}

See: https://www.npmjs.com/package/deku


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK