Создайте приложение To-Do в React с помощью Easy Peasy и Ant Design

Как интегрировать Easy Peasy в ваше приложение React

Вокруг нас широко распространены бизнес-приложения. Они помогают нам отслеживать задачи и выполнять дела в течение дня.

В этом руководстве вы узнаете, как создать веб-приложение со списком дел с помощью React. Для хранения и обмена данными между несколькими компонентами мы будем использовать библиотеку управления состояниями Easy Peasy. Кроме того, чтобы сделать наш пользовательский интерфейс более привлекательным, в проекте будут исходные компоненты из библиотеки Ant Design.

Чтобы изучить основы Easy Peasy, прочтите эту статью.

Это будет итог этой статьи:

Давайте начнем!

Начиная

Настройка проекта

Чтобы создать пустой репозиторий React, выполните следующую команду терминала:

npx create-react-app todo-easy-peasy

Установка модулей

Нашему проекту требуются следующие зависимости:

easy-peasy: это позволит нам хранить пользовательские данные и делиться ими во всех частях приложения.
antd: Этот модуль поможет нам использовать компоненты из пакета Ant Design.
nanoid: Чтобы назначить поля идентификатора нашим товарам.

Чтобы установить эти пакеты, запустите эту команду bash:

npm i easy-peasy antd nanoid

Структура папок проекта

В этом разделе мы создадим несколько папок в нашем проекте. Это будет способствовать организации кода и, следовательно, чистоте.

Найдите каталог src в вашем репозитории. Здесь сделайте следующие папки:

components: В этой папке будут храниться наши пользовательские компоненты.
store: Будет держать наш магазин Easy Peasy. Здесь мы будем хранить наши состояния и действия.

Чтобы создать эти каталоги, выполните эту инструкцию bash:

cd src #go to directory
mkdir components store

Когда это будет сделано, ваш проект должен выглядеть так:

Создание нашего приложения Todo

Компонент списка дел

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

В папке components создайте файл с именем TodoItem.js. Здесь начните с написания следующего кода:

Строка 4: Модуль TodoItem примет свойство todo. Это соответствует элементу в списке.
Строка 8: Отобразите поле task объекта todo.

Создание нашего магазина

В папке store создайте файл с именем todoStore.js. Этот файл будет содержать наши переменные состояния и их действия.

В store/todoStore.js напишите этот фрагмент кода:

Строка 4: Определите состояние todos.
Строка 9: Создайте наш магазин и экспортируйте его. Это позволит связать наш магазин с проектом.

Отображение наших задач

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

В папке components создайте файл с именем TodoList.js. Здесь напишите следующий блок кода:

Строка 5: Извлечь состояние todos из нашего магазина.
Строки 9–12: перечислите все дела, используя компонент List. Каждый элемент списка будет отображаться с помощью компонента TodoItem.

Когда это будет сделано, нам останется только подключить наш магазин к проекту. Для этого замените весь код в src/App.js следующим:

Оберните наш TodoList компонент тегами StoreProvider. Опора store указывает на магазин, который мы хотим использовать.
Теперь мы подключили наш магазин к этому приложению.

Это будет вывод кода:

Добавление дел

В этом разделе мы напишем функцию, которая поможет пользователю добавлять задачи в список дел.

В store/todoStore.js найдите свой объект todoModel и добавьте свойство addTodo следующим образом:

Строка 4: Создайте действие addTodo.
Строка 5: Назначьте id новому элементу с помощью модуля nanoid.
Строка 6: В конце добавьте новую задачу в массив todos.

Затем перейдите в папку components. Здесь создайте файл с именем AddTodo.js. Этот компонент позволит пользователям вводить данные в магазин.

В components/AddTodo.js напишите этот блок кода:

Строка 6: Получить функцию addTodo из магазина.
Строка 13: Метод onSubmit является обработчиком этой формы. Это означает, что если пользователь отправит форму, программа вызовет метод addTodo. В результате в список будет добавлен новый элемент.
Строки 14–19: Компонент Controller позволяет нам фиксировать ввод пользователя.

Все, что нам осталось, это отобразить AddTodo компонент в DOM. Для этого перейдите к App.js и измените блок return следующим образом:

Строка 4: Визуализируйте компонент AddTodo как дочерний компонент StoreProvider. Это означает, что AddTodo теперь имеет доступ к нашему магазину.

Запустите код. Это будет вывод:

Удаление задач

В этом разделе мы напишем код, позволяющий пользователю удалять элементы из своего списка.

Для этого перейдите на store/todoStore.js. Добавьте сюда этот фрагмент кода:

Строка 2: объявляем наше removeTodo действие.
Строка 3: Найдите указанный элемент в массиве и удалите его.
Чтобы узнать о filter методе JavaScript, ознакомьтесь с этим сообщением Брэндона Морелли.

Давай проверим!

В качестве последнего шага перейдите к components/TodoItem.js и добавьте этот фрагмент кода:

Строка 3: Получите наш метод removeTodo из магазина.
Строка 7: Опора actions принимает массив компонентов, который позволяет нам взаимодействовать с элементом списка. Здесь мы передаем элемент Button. Когда пользователь нажимает кнопку, приложение вызывает метод removeTodo. Это удалит нужный элемент из списка.

Это будет результат:

Отображение количества элементов через вычисленные свойства

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

Перейдите к store/todoStore.js. Найдите здесь свой объект todoModel и добавьте свойство numberOfItems, например:

Строка 4: Состояние numberOfItems будет получено из массива todos. Здесь мы сохраняем длину состояния todos и назначаем его numberOfItems.

Давайте теперь воспользуемся этим состоянием! Для этого перейдите к components/TodoList.js и добавьте этот фрагмент кода:

Строка 3: Получите состояние numberOfItems из магазина.
Строка 6: отобразить значение numberOfItems в пользовательском интерфейсе.

Результат:

Готово!

Дополнительные ресурсы

Вот репозиторий CodeSandbox для этого проекта.

Заключение

В этой статье вы узнали, как создать приложение для задач с помощью Easy Peasy в качестве решения для хранения данных. Если вам нужна отличная библиотека управления состоянием, Easy Peasy отлично подойдет для вашего проекта. Более того, поскольку он прост в использовании, он помогает разработчикам быстро приступить к работе.

Большое спасибо за чтение!