hola-mundo.tsx

import {Component, State} from '@stencil/core'

@Component({
  tag: 'hola-mundo',
  styleUrl: 'hola-mundo.scss'
})
export class HolaMundo {
  @State() todo: string = '';
  @State() todos = [];

  inputChanged(event) {
    this.todo = event.target.value;
  }

  addTodo() {
    this.todos = [
      ...this.todos,
      this.todo
    ];
    this.todo = '';
  }

  render () {
    return (
      <div>
        <h1>Hola Mundo con StencilJS</h1>
        <input type="text" value={this.todo} onInput={() => this.inputChanged(event)} />
        <button onClick={this.addTodo.bind(this)}>Añadir todo</button>
        {this.todos.map((todo) =>
          <div>
            <div>{todo}</div>
          </div>
        )}
      </div>
    )
  }
}