Riot component with all the basics

riot-template.html

<my-todos>
  <p>Todo count: {state.todos.length}</p>
  <input ref="newTodo" type="text">
  <button onclick="{add}">Add</button>
  <ul if="{state.todos.length}">
    <li each="{(todo, i) in state.todos}" key="{i}">{todo} <button onclick="{e => remove(i)}">Remove</button></li>
  </ul>

  <script>
    export default {
      // Lifecycle methods: https://riot.js.org/api/#lifecycle
      
      state: {
        todos: []
      },

      add(e) {
        const todo = this.$('[ref="newTodo"]').value;
        this.state.todos.push(todo);
        this.update();
      },
      
      remove(i) {
        this.state.todos.splice(i, 1);
        this.update();
      }
    }
  </script>

  <style>
    ul { list-style: none }
  </style>
</my-todos>