Create a new file called ITodoItem.ts in the web part's src\webparts\reactTodo folder, and insert the following code and save the file:
export interface ITodoItem { Id: number; Title: string; Done: boolean; }
As you can see, we kept the data model very simple. It will be a POJO (Plain old JS object--wait, that's Java, oh well!)--this would be the model if we were doing a more conventional MVC pattern. It has only three properties that can easily be implemented in the SharePoint list as well.
Next, create a new file called TodoClient.ts in the web part's src\webparts\reactTodo folder, and insert the following code and save the file:
import { ITodoItem } from "./ITodoItem"; export default class TodoClient { private _todoItems: ITodoItem[] = [ { Id: 1, Title: "Todo item 1", Done: true }, { Id: 2, Title: "Todo item 2", Done: false }, { Id: 3, Title: "...