Hello World

Basic

Start by constructing a class expression as child of Keet. Supply a string argument to the component method mount. Within the string, you can assign a state within handlebars i.e: {{<myState>}}.

import Keet from 'keet'

class App extends Keet {
  el = 'app'
  state ='World'
  render() {
    return 'Hello {{state}}'
  }
}

const app = new App()

Codepen Sample

See the Pen Keetjs - Hello World by Shahrul Nizam b. Selamat (@syarul) on CodePen.

Updating a State

To update a state write a method in our class Expression that accept an argument.

import Keet from 'keet'

class App extends Keet {
  el = 'app'
  state ='World'
  // our method
  greeting(value) {
    this.state = value
  }
  render() {
    return 'Hello {{state}}'
  }
}

const app = new App()

Then we can update the state by invoking the method.

app.greeting('Keet')

Codepen Sample (updating state)

See the Pen Keetjs - Hello World ( updating state) by Shahrul Nizam b. Selamat (@syarul) on CodePen.

← PreviousNext →