> For the complete documentation index, see [llms.txt](https://lesha.gitbook.io/react-js-for-dummies/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lesha.gitbook.io/react-js-for-dummies/app-todo.md).

# Мини-приложение: Список дел

В этом уроке мы создадим приложение, которое будет отображать список дел, которые нам надо сделать.

![Вариант сервировки нашего приложения](https://4229799421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6LUR3gRBmB8EBPIwRJ%2F-M6LUUA7OgPSIhJ1H0W-%2F-M6LUsPnSsf5Asuz0FoI%2Ftodo.png?alt=media\&token=a115cf78-af79-4a7a-b5e8-e982dd901eae)

Создадим подпапку `todo` внутри `src`, а в ней — файл `TodoApp.jsx`:

```jsx
import React, { useState } from 'react';

export function TodoApp() {  

  return (
    <div >

    </div>
  );
}
```

Во избежание путаницы, называй компоненты и содержащие их файлы одинаково.

Не забудь импортировать `TodoApp` в `App.jsx`. Попытайся сделать это самостоятельно. Если возникли сложности, обратись к прошлому уроку.

Давай посмотрим, на какие компоненты можно разделить наше приложение:

* Строка ввода нового дела
  * Поле для ввода нового дела
  * Кнопка добавления
* Элемент списка дел
  * Текст дела
  * Кнопка удаления

Так как элементов списка дел может быть сколько угодно, для нас очень удобно иметь такой компонент, который мы можем переиспользовать сколько угодно раз.