Components

Components are functions that return JSX objects (not classes!). Here’s an example of a pure component:

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

function Button ({props}) {
  return <button class='btn'>{props.label}</button>
}

module.exports = Button

Lifecycle hooks

Components can also be objects that implement a render() function. In this form, it can have additional lifecycle hooks.

function render ({props}) {
  return <button>{props.label}</button>
}

function onCreate ({props}) {
  ...
}

module.exports = { render, onCreate }

An object component can have these functions:

Function	Description
render()	Called every render() pass.
onCreate()	Called after first render() when the DOM is constructed. Use this for side-effects like DOM bindings.
onUpdate()	Called after every render() except the first one.
onRemove()	Called after the component is removed. Use this for side effects like cleaning up document DOM bindings.

Model

A model is an Object passed onto every function in a component. It has these properties:

Property	Description
props	An Object with the properties passed to the component.
children	An array of children in a component.
context	The context object passed onto render()
dispatch	The dispatch object passed onto dom.createRenderer().
path	A unique ID of the component instance.

Nesting components

Well, yes, of course you can.

/** @jsx element */
import { dom, element } from 'decca'

const App = {
  render () {
    return <div>
      <Button label='Press me'></Button>
    </div>
  }
}

const Button = {
  render ({props}) {
    return <button>{props.label}</button>
  }
}

// Render the app tree
render = dom.createRenderer(document.body)
render(<App />)

Pure components

You may define a component as a function. This is useful if you don’t need any of the lifecycle hooks (onCreate, onUpdate, onRemove). It will act like a component’s render() function. (Version v2.2+)

function Message ({props}) {
  return <div>Hello, {props.name}</div>
}

render = dom.createRenderer(document.body)
render(<Message name='John' />)

JSX

Decca supports JSX syntax. See JSX for details on how to set it up.

Further references

See Deku’s documentation:

• Lifecycle hooks