Components

In the metal-tutorial-todo boilerplate there are already three components defined to help get you started. Each component is defined as an ES6 class that extends from Metal's Component class:

class TodoApp extends Component {
}

Each component registers a Soy template that renders the component's HTML. This is done with the Soy.register method:

import templates from './TodoApp.soy.js';
import Component from 'metal-component';
import Soy from 'metal-soy';

class TodoApp extends Component {
}
Soy.register(TodoApp, templates);

The TodoApp component will be the root level component. It will handle storing the todo data, and the rendering of the other two components.

The TodoItem component will render each item in the list of todos.

The TodoForm component will render a form for adding new todo items to the list. It will consist of a text input and add button.

Why more than one?

It might seem more trouble than it's worth splitting up the Todo App into multiple components, but it's absolutely necessary when creating larger applications. This tutorial aims to teach you how to handle nested components for more complex use cases.