В этом уроке создадим целиком вместе с вёрсткой ToDo list c использованием React, TypeScript, Zustand, ViteJS + будем использовать хранилище LocalStorage. 🍀 Поддержать канал:
https://www.donationalerts.com/r/webe... ☕️ Купить кофе:
🎨 Купить набор кистей Procreate:
✍️ Мой telegram channel:
🏰 Английский YouTube: @webelart_en 💁🏼♀️ Инстаграм: / webelart 🦄 LinkedIn: / webelart ❤️ Поддержать развитие канала: / webelart Ссылки используемые в уроке: 🌱 Дополнительные материалы к уроку:
🌱 Ссылка на макет:
🌱 State management zustand
🌱 Документация ViteJS
Рекомендуемые видео в уроке: ⭐️ Единицы измерения CSS: • 20 методов массивов в JavaScript, которые ... 00:00 Введение. 02:44 Установка и настройка ViteJS 05:47 Настройка структуры директорий 11:55 Постановка задачи. Изучаем макет в Figma. 12:47 Добавляем базовую верстку. 19:28 Знакомимся с zustand. 23:01 Описываем типы todo листа 26:16 Создаём store на zustand 42:44 Работаем над формой добавления задач (InputPlus) 52:49 Добавляем стили к InputPlus. 01:00:55 Отображаем отсутствие задач. 01:02:52 Отображение существующих задач. 01:09:54 Работа над компонентой задачи (InputTask). 01:14:18 Работа над стилями InputTask. 01:21:59 Добавляем mode редактирования для InputTask. 01:30:59 Тестирование + небольшие правки 01:33:19 Погружение в middleware zustand (devtools) 01:37:40 Пишем собственную middleware для LocalStorage. На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.