Table of Contents - Next Section

Create Reception component

$ mkdir -p app/assets/javascripts/components
$ touch app/assets/javascripts/components/reception.es6

Edit app/assets/javascripts/components/reception.es6 so that its content becomes like as:

class Reception extends Cape.Component {
  render(m) {
    m.p("Hi, I am Greeter. Nice to meet you!")
  }
}

---

$ touch app/assets/javascripts/routes.es6

Add these lines to app/assets/javascripts/routes.es6:

var $router = new Cape.Router()

$router.draw(m => {
  m.root('reception')
})

document.addEventListener("DOMContentLoaded", event => {
  $router.mount('main')
  $router.start()
})

Reload your browser to see if the page is rendered without errors. Below the heading you will see a <p> element with following content:

Hi, I am Greeter. Nice to meet you!

Table of Contents - Next Section