Приложение Apple Notes — это простой блокнот для создания заметок. Приложение состоит из трех частей. Первая — это список каталогов. В каталоге можно хранить заметки определенной тематики. Тут пользователь может удалить, переименовать или выполнить сортировку каталогов на свое усмотрение. Вторая часть — это список заметок, выбранного каталога. С заметками можно выполнить все те же действия что и с каталогами. Третья часть — это описание/информация о выбранной заметке.
- Инициализировать React приложение.
$ npx create-react-app
- Инициализировать Material Design и Material Icons. Сверстать базову структуру страницы.
$ npm install @material-ui/core
$ npm install @material-ui/icons
- Инициализировать Redux и реализовать функционал добавления каталогов.
$ npm install redux react-redux
-
Реализовать функционал удаления каталогов.
-
Реализовать функционал переименования каталогов.
-
Реализовать функционал добавления заметок. Исправить баг при удалении каталога.
При наступлении события удаление каталога обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе — обработчик активной папки. Это приводило к невозможности прочитать свойство "edited", так как оно неопределенное. Решение — вызвать метод event.stopPropagation() для прекращения всплытия.
Fix #1.
-
Реализовать функционал удаления заметок.
-
Рефакторинг логики редьюсера. Организовать компонент для списка заметок.
-
Реализовать функционал переименования заметок. Исправить баг отрисовки элементов списка с заметками которые были изменены.
При редактировании имени заметки react обновлял названия заметок и в других каталогах. Так же не обновлялись записи активных меток. Решение — правильная организация ключей элементов списков. Повторяющиеся ключи в разных списках приводили к неправильному рендеру.
Fix #2.
- Реализовать функционал для работы с содержанием заметки. Добавить дополнительный функционал в store — отображение информации в консоли о всех action которые срабатывают.
$ npm i redux-logger
> store.js // Настройка store
- Инициализация библиотеки react-beautiful-dnd для красивых перетаскиваний (drag and drop) элементов списка с каталогами.
$ npm install react-beautiful-dnd --save
Подключения пакетов:
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-
Реализовать функционал для перетаскиваний (drag and drop) элементов списка с заметками.
-
Реализовать функционал для перемещения заметок с одного каталога в другой.
-
Создать модальные окна для получения от пользователя подтверждения на удаления каталогов/заметок.
-
Валидация данных Prop-types.
npm install --save prop-types
-
Отобразить дату/время создания заметок.
-
Правки кода (Code Edits #1).
-
Реализовать адаптивный дизайн. Редактировать генерацию id.
Хук useMediaQuery позволяет использовать медиа-запросы в функциональном компоненте и дифференцировать его рендеринг для разных окон просмотра. Для реализации useMediaQuery импортируем:
import useMediaQuery from '@material-ui/core/useMediaQuery';
и устанавливаем условие:
const isMobile = useMediaQuery('(max-width:667px)');
Символьный id генерируем от времени:
id${(+new Date()).toString(16)}
-
Правки кода (Code Edits #2). Переиспользование компонента ListItem.
-
Развернуть React Applications to Github Pages.
*Остальные этапы создания приложения будут добавляться по мере развития проекта.
