Showing the Reception Component - How to make a SPA with Cape.JS and Rails

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 => {

document.addEventListener("DOMContentLoaded", event => {

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