Разрабатываем ToDo лист на React + TypeScript + Zustand со сборкой на ViteJS | Уроки JavaScript
В этом уроке создадим целиком вместе с вёрсткой ToDo list c использованием React, TypeScript, Zustand, ViteJS + будем использовать хранилище LocalStorage. 🍀 Поддержать канал: https://www.donationalerts.com/r/webe...
☕️ Купить кофе: https://buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: https://webelart.com/illustration.
✍️ Мой telegram channel: https://t.me/webelart
🏰 Английский YouTube: @webelart_en 💁🏼♀️ Инстаграм: / webelart 🦄 LinkedIn: / webelart ❤️ Поддержать развитие канала: / webelart Ссылки используемые в уроке: 🌱 Дополнительные материалы к уроку: https://github.com/liveldi/files_for_...
🌱 Ссылка на макет: https://www.figma.com/file/sUIxwc0dLG...)
🌱 State management zustand https://github.com/pmndrs/zustand
🌱 Документация ViteJS https://vitejs.dev
Рекомендуемые видео в уроке: ⭐️ Единицы измерения 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. На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.